간단히 말해서 Jquery의 이벤트 처리 메커니즘은 onclick(), keydown() 등과 같은 HTML 태그에 다양한 이벤트를 지정하는 것과 동일합니다. 태그에 이벤트를 지정하는 것은 Javascript 기능에 해당하므로 내 요구 사항을 쉽게 달성할 수 있습니다. JQuery의 이벤트 처리는 이러한 이벤트를 스크립트 내부에 바인딩하므로 태그에 함수를 노출할 필요가 없으며 사용이 매우 편리합니다.
방법을 소개하기 전에 이벤트에 대응하기 위한 두 가지 전략을 설명할 필요가 있다고 생각합니다. 하나는 이벤트 캡처, 하나는 이벤트 버블(Event bubble)이며, 이 두 전략은 상반되며 브라우저 전쟁에서 Netscape와 Microsoft가 각각 제안한 완전히 반대되는 두 가지 이벤트 전파 모델입니다. 이벤트 버블링은 개체에서 특정 유형의 이벤트(예: onclick 이벤트)를 트리거하는 것으로 정의됩니다. 개체가 이 이벤트에 대한 핸들러를 정의하는 경우 이벤트는 이를 정의합니다. 이벤트 핸들러 또는 이벤트가 true를 반환하면 이 이벤트는 처리될 때까지(상위 개체의 모든 유사한 이벤트가 활성화됨) 개체에 도달할 때까지 내부에서 외부로 이 개체의 부모 개체에 전파됩니다. 계층 구조 수준. 이벤트 캡처는 이벤트 버블링과 정반대이며, 이벤트 처리는 객체의 가장 바깥쪽 레이어에서 종료될 때까지 전파됩니다. W3C 주석은 두 가지 이벤트 처리 전략을 지원하지만, 이벤트 캡처에 버그가 많기 때문에 이벤트 버블링을 선호합니다. 현재 IE는 이벤트 캡처를 지원하지 않으며, 다른 브라우저는 기본적으로 두 가지를 모두 지원합니다. 아래에서 이벤트 버블링의 예를 들어보겠습니다. 이벤트 캡처는 잊어버리세요.
은 지정된 이벤트 처리 함수를 지정된 요소에 바인딩하는 데 사용되며, [data]는 선택적 전달 매개 변수를 나타냅니다. 코드 복사
이벤트 버블링복사 code 코드는 다음과 같습니다.
< ;head>
#box {width:200px; height:100px; border:2px solid red}
#box h5 {margin:0px; -size:18px; text-align:right; 배경:빨간색; 커서:이동}
#box h5 a {text-장식:none; color:#FFF}
#box div{ 공백 ;}
기본 동작 방지), event.stopPropagation();event.stopImmediatePropagation();(이벤트 버블링 방지), 직접 반환 return false;(기본 동작 및 시간 버블링을 방지합니다).
이벤트 처리에는 bind(type,[data],fn), bin(map), one(type,[data],fn), Trigger(type,[data]), TriggerHandler(type,[ data]), unbind([type],[data])이러한 메서드입니다.
코드를 복사하세요. 코드는 다음과 같습니다.
//매개변수를 사용한 바인딩 방법
$("#text").bind('click', { result: "yes" }, function(event) {
alert(event .data .result);
})
//매개변수 없음 및 버블링 방지
$("#text").bind('click', function(e) {
// 사용자 정의 처리 동작
e.stopPropagation();
})
사실 이벤트를 바인딩하는 방식인 바인드(type,[data],fn)의 약어가 있지만. 차이점은 약어 방식은 바인드처럼 매개변수 [data]를 지정할 수 없다는 점이다. 작성 방법은 다음과 같이 바인드에서 타입 매개변수를 직접 실행하는 것이다. 코드
코드는 다음과 같습니다. $("#text").click(function(e) { //사용자 정의 처리 동작alert ("abbreviation"); })
2.
bind(map)
은 다음과 같이 여러 이벤트 핸들러를 한 번에 바인딩하는 것입니다
코드 복사
코드는 다음과 같습니다. $('#text ').bind({ click: function() { alert("bind(map) 바운드 클릭 이벤트"); }, mouseenter: function() {
alert( " 바인딩(map) 바운드 mouseenter 이벤트");
3,
one(type,[data],fn)
지정 event는 한 번만 실행되며, 작성 방법은 bind() 메서드와 동일하므로 여기서는 설명하지 않겠습니다.
4. trigger(type,[data]), TriggerHandler(type,[data])실제로 동일한 효과를 가지며, 일치하는 각 요소에서 트리거됩니다. 특정 유형의 경우 이벤트 중 유일한 차이점은 전자는 이벤트 버블링 이벤트를 실행하는 반면 후자는 지정된 요소에서만 이벤트를 실행한다는 것입니다. 비교해 보겠습니다.
코드는 다음과 같습니다. code$("#triggerdiv").click(function() { 일부 사람들은 내가 작성한 내용이 너무 단순하다고 말했습니다. 여기서 제가 말하는 내용은 오랫동안 JQuery에 노출되지 않았다는 점을 말씀드리고 싶습니다. 내 자신의 기억을 깊게 하고 JQuery를 막 배우고 있는 친구들을 가르치기 위해 이것은 단지 일부 정보일 뿐이며 JQuery를 잘한다고 말할 수는 없습니다. 모두가 함께 배우고 발전할 수 있기를 바랍니다. 계속됩니다...
alert("DIV 트리거");
})
$("#trigger").click(function( ) {
$("#tri").trigger("click");
})
$("#triggerHandler").click(function() {
$("# tri") .triggerHandler("click");
});
$("#tri").click(function() {
alert("하위 집합 DIV 트리거");
} );
5.
unbind([type],[data])
유형 매개변수가 지정된 경우 이보다 더 간단할 수 없습니다. , 지정된 이벤트가 삭제됩니다. 지정하지 않으면 지정된 요소에 대한 모든 이벤트가 삭제됩니다.
이 메커니즘 중 제가 가장 많이 사용하는 방식은 바인드 방식이며, 가장 많이 사용하는 방식은 그 약어입니다. 물론 비즈니스 요구에 따라 이러한 이벤트 메커니즘을 조합하여 사용할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
