JS의 이벤트 모델 예제에 대한 자세한 설명

　이전에는 이벤트 모델이 비교적 명확했고, 많은 개념이 내 마음 속에 명확하게 매핑되었습니다. 작업을 마친 후 한편으로는 제한 사항을 사용하고 다른 한편으로는 프레임워크에서 다양한 이벤트 모니터링 방법을 사용하는 데 익숙해졌습니다. 단순함은 편리함을 의미하며 시간이 지남에 따라 이벤트에 대한 일부 개념이 기억에서 사라지기 시작했습니다. 이제 C를 잊어버리기 시작한 것처럼, 언어 포인터, 맥스웰 방정식, 행렬 변환, 최소 제곱법 등. 지식은 단순한 것에서 심오한 것으로, 심오한 것에서 이해로 나아가는 길을 닦는 다채로운 조약돌과 같으며, 항상 당신이 더 멀리 나아갈 수 있도록 도와줍니다. 이벤트 모델을 다시 살펴보겠습니다.

이벤트에는 다음이 포함됩니다:마우스 이벤트키보드 이벤트오류 발생 시 프레임 이벤트 크기 조정 onscroll 등
폼 이벤트 onblur onfocus 등
클립보드 이벤트 oncopy oncut onpaste
Print 이벤트 onafterprint onbeforeprint
drag 애니메이션 이벤트 ondrag ondragenter 등
media events onplay onpause
animation events animationend
전환 이벤트
기타 이벤트 등

이벤트는
대상 이벤트 객체
이벤트 청취 객체

를 포함한 객체로 캡슐화됩니다. 키보드 이벤트 객체 등
여기에는 고유한 속성과 메서드가 포함되어 있으며 Event 객체에서 상속됩니다. W3C에 따라 다릅니다.
일반적으로 사용되는 방법:
event.preventDefault()//링크 점프 및 양식 제출과 같은 요소의 기본 동작 방지
event.stopPropagation()//이벤트 버블링 방지



모델

1. 원본 이벤트 모델(DOM 레벨 0) 특징: 원본 이벤트 모델에는 이벤트 발생 후 전파 개념이 없으며 이벤트 흐름도 없습니다. 사건이 발생하면 즉시 처리하세요.
리스닝 함수는 요소의 속성 값일 뿐입니다. 리스너는 요소의 속성 값을 지정하여 바인딩됩니다. 작성 방법은 두 가지가 있습니다. 　 HTML:
js : document.getElementsById('btn').onclick = func

단점:

b. 동일한 이벤트에 대해 하나의 청취 기능만 바인딩될 수 있으며 나중에 바인딩된 기능은 이전 기능을 덮어씁니다.

　 현재 웹 프로그램의 모듈식 개발과 더욱 복잡한 로직에서 이 방법은 확실히 구식이므로 실제 프로젝트에서는 사용하지 않는 것이 좋습니다. 평소에는 일부 데모를 작성해도 괜찮고 속도도 더 빠릅니다.

특징: IE는 처리 함수에서 이벤트 객체를 창의 속성으로 설정합니다. 함수 실행이 완료되면 null

IE의 이벤트 모델에는 두 단계만 있습니다. 먼저 요소의 청취 기능이 실행된 다음 이벤트가 상위 노드를 따라 문서로 전달됩니다. 청취 기능을 바인딩하고 해제하는 방법: attachmentEvent("eventType","handler"), 여기서 evetType은 onclick과 같은 이벤트 유형이므로
'on'을 추가하는 데 주의하세요.
이벤트 리스너를 비활성화하는 방법은 detachEvent("eventType", "handler" )입니다.
단점: IE 자체에서만 사용할 수 있어 너무 춥습니다.


3. DOM2 이벤트 모델

이벤트 모델은 W3C Level 2 DOM 이벤트, 즉 DOM2 이벤트 모델로 표준화되어 있습니다. 최신 브라우저(IE9 이하 제외)는 모두 이 사양을 따릅니다.

W3C에서 개발한 이벤트 모델에서 이벤트 발생에는 세 가지 프로세스가 포함됩니다. a. 이벤트 캡처 단계. 이벤트는 문서에서 대상 요소까지 전파됩니다. 이 과정에서 전달된 노드를 차례로 확인하여 해당 이벤트에 대한 청취 기능이 등록되었는지 확인하고 등록된 경우 실행됩니다. b. 이벤트 처리 단계. 이벤트가 대상 요소에 도달하면 대상 요소의 이벤트 처리 기능이 실행됩니다.
　c. 이벤트는 문서에 도달할 때까지 대상 요소에서 발생합니다. 또한 전달 노드가 이벤트에 대한 수신 기능을 등록했는지 여부도 확인합니다.

　
참고:
모든 이벤트 유형은 이벤트 캡처 단계를 거치지만 일부 이벤트만 이벤트 버블링 단계를 거치게 됩니다. 예를 들어
제출 이벤트는 버블링되지 않습니다.

리스닝 기능을 바인딩하고 해제하는 방법:
addEventListener("eventType", "handler", "true|false"); 여기서 eventType은 이벤트 유형을 나타냅니다. 참고

두 번째 매개변수는 처리 함수입니다. 세 번째 매개변수는 캡처 단계에서 실제 캡처 단계에 들어갈지 여부를 지정하는 데 사용되며, 버블링 단계에서만 false입니다. 리스너 제거도 비슷합니다. ,"handler","true !false");

IE 및 최신 브라우저와 호환 이벤트 등록 듣기 쓰기 방법

var a = document.getElementById('XXX');
if(a.attachEvent){
    a.attachEvent('onclick',func);
}
else{//IE9以上和主流浏览器
    a.addEventListener('click',func,false);
}

现有的框架和类库都会对适应各种浏览器做兼容性的封装，JQuery底层即使用了上面的兼容性写法。

三、事件的捕获-冒泡机制
DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和
冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。

以如下HTML结构为例子，执行流程应该是这样的:

<div id="parent">
       父元素
       <div id="child">子元素</div>
</div>

运行一下一目了然。

var parent= document.getElementById('parent');
	console.dir(parent);
    var child = document.getElementById('child');
    parent.addEventListener('click',function(){alert('父亲在捕获阶段被点

击');},true);//第三个参数为true
    child.addEventListener('click',function(){alert('孩子被点击了');},false);
 parent.addEventListener('click',function(){alert('父亲在冒泡阶段被点击

了');},false);//第三个参数为false