JQuery에 대한 첫 번째 살펴보기(2) 이벤트 메커니즘(2)

JQuery에 대한 첫 번째 살펴보기(2) 이벤트 메커니즘(2)_jquery

WBOY

풀어 주다： 2016-05-16 18:14:29

원래의

938명이 탐색했습니다.

간단히 말해서 Jquery의 이벤트 처리 메커니즘은 onclick(), keydown() 등과 같은 HTML 태그에 다양한 이벤트를 지정하는 것과 동일합니다. 태그에 이벤트를 지정하는 것은 Javascript 기능에 해당하므로 내 요구 사항을 쉽게 달성할 수 있습니다. JQuery의 이벤트 처리는 이러한 이벤트를 스크립트 내부에 바인딩하므로 태그에 함수를 노출할 필요가 없으며 사용이 매우 편리합니다.

방법을 소개하기 전에 이벤트에 대응하기 위한 두 가지 전략을 설명할 필요가 있다고 생각합니다. 하나는 이벤트 캡처, 하나는 이벤트 버블(Event bubble)이며, 이 두 전략은 상반되며 브라우저 전쟁에서 Netscape와 Microsoft가 각각 제안한 완전히 반대되는 두 가지 이벤트 전파 모델입니다. 이벤트 버블링은 개체에서 특정 유형의 이벤트(예: onclick 이벤트)를 트리거하는 것으로 정의됩니다. 개체가 이 이벤트에 대한 핸들러를 정의하는 경우 이벤트는 이를 정의합니다. 이벤트 핸들러 또는 이벤트가 true를 반환하면 이 이벤트는 처리될 때까지(상위 개체의 모든 유사한 이벤트가 활성화됨) 개체에 도달할 때까지 내부에서 외부로 이 개체의 부모 개체에 전파됩니다. 계층 구조 수준. 이벤트 캡처는 이벤트 버블링과 정반대이며, 이벤트 처리는 객체의 가장 바깥쪽 레이어에서 종료될 때까지 전파됩니다. W3C 주석은 두 가지 이벤트 처리 전략을 지원하지만, 이벤트 캡처에 버그가 많기 때문에 이벤트 버블링을 선호합니다. 현재 IE는 이벤트 캡처를 지원하지 않으며, 다른 브라우저는 기본적으로 두 가지를 모두 지원합니다. 아래에서 이벤트 버블링의 예를 들어보겠습니다. 이벤트 캡처는 잊어버리세요.
이벤트 버블링

복사 code 코드는 다음과 같습니다.

< ;head>

JavaScript 이벤트 버블링 >< ;style type="text/css">
#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{ 공백 ;}

;" >닫기

JQuery에서 이벤트 전략을 방지하는 방법은
event.preventDefault() 입니다.
(

기본 동작 방지), 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])이러한 메서드입니다.

1.bind(type,[data],fn)

은 지정된 이벤트 처리 함수를 지정된 요소에 바인딩하는 데 사용되며, [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])실제로 동일한 효과를 가지며, 일치하는 각 요소에서 트리거됩니다. 특정 유형의 경우 이벤트 중 유일한 차이점은 전자는 이벤트 버블링 이벤트를 실행하는 반면 후자는 지정된 요소에서만 이벤트를 실행한다는 것입니다. 비교해 보겠습니다.

코드 복사
코드는 다음과 같습니다.

//HTML 코드 :
< ;br/ >

code

$("#triggerdiv").click(function() { 
alert("DIV 트리거"); 
}) 
$("#trigger").click(function( ) { 
$("#tri").trigger("click"); 
}) 
$("#triggerHandler").click(function() { 
$("# tri") .triggerHandler("click"); 
}); 
$("#tri").click(function() { 
alert("하위 집합 DIV 트리거"); 
} ); 

 
5. 
unbind([type],[data])
 유형 매개변수가 지정된 경우 이보다 더 간단할 수 없습니다. , 지정된 이벤트가 삭제됩니다. 지정하지 않으면 지정된 요소에 대한 모든 이벤트가 삭제됩니다. 


 이 메커니즘 중 제가 가장 많이 사용하는 방식은 바인드 방식이며, 가장 많이 사용하는 방식은 그 약어입니다. 물론 비즈니스 요구에 따라 이러한 이벤트 메커니즘을 조합하여 사용할 수 있습니다. 

일부 사람들은 내가 작성한 내용이 너무 단순하다고 말했습니다. 여기서 제가 말하는 내용은 오랫동안 JQuery에 노출되지 않았다는 점을 말씀드리고 싶습니다. 내 자신의 기억을 깊게 하고 JQuery를 막 배우고 있는 친구들을 가르치기 위해 이것은 단지 일부 정보일 뿐이며 JQuery를 잘한다고 말할 수는 없습니다. 모두가 함께 배우고 발전할 수 있기를 바랍니다. 계속됩니다...