JavaScript 연구 노트 (5) 이벤트 흐름 및 이벤트 처리 기능 할당 이벤트 처리

如果你在页面上做一次点击例如点击一个按钮，那么你是首先点击了该按钮然后动作传入了按钮的容器，最后传入整个页面Document还是首先点击了页面Document，然后是按钮的容器，最后导致按钮的点击呢？
  javaScript对这种问题的处理方式可以称之为事件流即事件的传播机制。对于事件流IE跟FF有不同的解释。IE下的解决方案称之为：冒泡型事件，而FF下称之为：捕获型事件。顾名思义冒泡型事件是从低而上的触发机制，而捕获型事件则是从上到下的触发机制。《Javascript高级程序设计》一书提到:
    DOM事件流同时支持两种事件触发机制，但是捕获型事件先发生。注意因为事件的目标（也就是DOM树最深的节点）是最精确的元素，实际上它会连续接收两次事件，一次是在捕获过程中，一次是在冒泡过程中。事情到底是不是这样呢？观察下面的程序：

 
   
   
   
 
 
   

click me!

IE: Click click me 실행 순서는 다음과 같습니다: DIV-->BODY-->HTML 페이지의 다른 부분 클릭: BODY --> HTML
FF: 나를 클릭하세요. 실행 순서는 DIV-->HTML-->BODY입니다. HTML-->BODY
하하. 책에서 말하는 것과 다릅니다! 프로그램 실행 결과는 다음과 같이 알려줍니다. IE에서든 Firefox에서든 이벤트는 항상 가장 정확한 요소(즉, DOM 트리에서 가장 깊은 노드)에 의해 먼저 트리거된 다음 IE와 FireFox에서 버블링을 시작합니다. . 캡처.

JavaScript는 이벤트 처리 함수를 할당하는 세 가지 방법을 제공합니다. 첫 번째는 위 프로그램과 마찬가지로 HTML 코드에서 이벤트 처리 함수를 할당하는 것입니다.
두 번째 방법은 JavaScript에서 이벤트 처리 기능을 할당하는 것입니다. 이 방법은 먼저 이벤트 처리 기능을 할당할 요소에 대한 참조를 얻어야 합니다.
1      window.onload = function(){
2 var oDiv = document.getElementById("contentDiv");
3 oDiv.onclick = function(){
4 Alert(oDiv.innerHTML);
5 }
6 } 위와 같이 이 메서드는 이벤트 핸들러 함수를 할당할 때 요소에 대한 참조를 얻었는지 확인해야 하므로 이 프로그램은 oDiv의 onclick 이벤트를 onload 이벤트 내부에 배치합니다. 그렇지 않으면 oDiv가 그렇지 않다고 보고합니다. 한정된. 또 한 가지 주의할 점은 이 이벤트 처리 함수 할당 방법을 사용할 때 특정 이벤트에 대해 하나의 함수만 할당할 수 있으며 이벤트 함수의 시그니처는 소문자여야 합니다. 그렇지 않으면 이전에 할당된 함수가 나중 함수로 덮어쓰여지게 됩니다. 동일한 이벤트에 2개 이상의 처리 기능을 할당하려면 세 번째 이벤트 처리 기능 할당 방법을 사용해야 합니다.
IE에서는 요소에 함수를 할당하기 위해 obj.attachEvent() 메서드를 사용하고, DOM에서는 요소에 대한 이벤트 처리 함수를 분리하기 위해 obj.detachEvent() 메서드를 사용합니다(예: FireFox) ) addEventListener() 메소드를 사용하여 함수를 할당하고, RemoveEventListener() 메소드를 사용하여 함수를 분리합니다.
코드 참조:
1 Window.onload = Function () {
2 var oDIV = Document.GetelementByid ("ContentDiv")
3 var Func1 = Function () {
4 경보(oDiv.innerHTML);
5 }
6 var func2 = function(){
7 경보("또한 " + oDiv.innerHTML);
8 }
9 // IE
10 if(oDiv.attachEvent){
11 oDiv.attachEvent("onclick",func1);
12 oDiv.attachEvent("onclick",func2);
13                  //oDiv. detachEvent ("Onclick", func1)
14} Else if (odiv.addeventristener) {
15 // Firefox
16 odiv.addeventristener ("click", Func1, TRUE); odiv .addEventListener("click",func2,true);
18 //oDiv.removeEventListener("click",func1,true);
19 }
20 
21 } IE에 대해 설명하겠습니다. 다음은 FireFox에서 이 이벤트 처리 함수의 차이점입니다.
1. 함수의 첫 번째 매개변수에는 IE에서는 접두사로 "on"이 있어야 하지만 FF에서는 두 경우 모두 처리되지 않습니다. . 소문자여야 합니다.
2. FireFox 아래 addEventListener() 함수의 세 번째 매개변수는 다음을 나타냅니다. true는 캡처 단계에서 이벤트 처리 기능을 추가하는 것을 의미하고, false는 버블링 단계에서 이벤트 처리 기능을 추가하는 것을 의미하지만 FireFox는 버블링 이벤트 스트림을 지원하지 않으므로 따라서 여기서는 True로 설정해도, False로 설정해도 별 차이가 없을 것 같습니다. 그러나 한 가지 주의할 점은 addEventListener()의 세 번째 매개변수가 true로 설정된 경우, RemoveEventListener() 메서드의 세 번째 매개변수도 동일한 값으로 설정되어야 한다는 것입니다. 그렇지 않으면 메서드가 실패합니다.
3. 런타임 단계에서 IE는 마지막에 추가된 이벤트 처리 기능을 먼저 실행한 다음 마지막에서 두 번째 이벤트 처리 기능을 실행합니다. 그러나 FireFox에서는 IE와 달리 이벤트 처리 기능을 실행합니다. 이벤트 처리 기능이 추가되었습니다.

위는 이벤트 처리의 이벤트 흐름 및 이벤트 처리 기능 할당 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!