jquery 노트 event_jquery

브라우저 모델:
1. DOM 레벨 0 모델
이벤트 핸들러는 DOM 요소의 속성에 함수 인스턴스에 대한 참조를 할당하여 선언됩니다. 이는 onclick 등과 같이 가장 일반적이기도 합니다.

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

< img onclick="alert('hello');" src="1.jpg" />
$("img").onmouseover = function(){alert("hello") ;}

(1), 더 흥미로운 것은 이벤트 인스턴스와 이벤트 버블링입니다.
이벤트 인스턴스는 이벤트의 클래스 인스턴스를 함수의 첫 번째 매개변수로 전달하는 대부분의 브라우저이지만, IE에서는 이벤트가 window 속성에 할당됩니다. 대상 요소를 얻을 때 w3c 표준 브라우저에는 대상이 있으며 IE는 srcElement 속성을 사용합니다.

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

$("img").onclick=function(event){
if (!event) 이벤트 = window.event;
var target = event.target?event.target:event.srcElement
}

(2), 이벤트 버블링
대상 요소는 이벤트를 얻을 수 있는 기회를 가지며, 이벤트 모델은 동일한 유형에 대해 핸들러가 설정되었는지 확인하기 위해 대상 요소의 상위 요소를 요구합니다. 그렇다면 핸들러도 DOM 트리의 상단까지 호출됩니다.
w3c 표준 브라우저의 경우 이벤트의 stopPropagation()을 사용할 수 있습니다. 즉, 이벤트의 cancelBubble을 사용하여 버블링을 취소할 수 있습니다.

레벨 2 모델
이 결함을 해결합니다. 레벨 0 모델에서는 각 속성 저장 이벤트에 대해 하나의 핸들러만 등록할 수 있습니다.

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

$("img").addEventListener( 'click' ,function1,false).addEventListener('click',function2,false);

2레벨 모델에서는 이벤트가 트리거되고 먼저 DOM 트리에서 아래로 전파됩니다. 위의 addEventListener의 세 번째 매개변수가 false이면 버블링 핸들러가 생성되고, true이면 캡처 핸들러가 생성됩니다.
여기서 캡처 유형에 대해 처음 들어봤습니다. IE6과 7은 2단계 모델을 지원하지 않기 때문입니다. 그래서 당연하지만 일부 IE 브라우저는 attachmentEvent(eventName, handler)와 유사한 버블 유형을 지원합니다. ).

그러면 jquery의 바인드가 이러한 문제를 해결합니다. . .
"jquery 실제 사례"를 참조하세요.