JavaScript 이벤트의 버블링, 위임, 바인딩 및 전파에 대해 간략하게 이해합니다.

이 기사에서는 버블링 이벤트, 위임 이벤트를 포함하여 JavaScript 이벤트의 버블링, 위임, 바인딩 및 전파와 관련된 문제를 주로 정리하고 addEventListener()를 통해 바인딩 이벤트 등을 살펴보는 javascript에 대한 관련 지식을 제공합니다. on. 모두에게 도움이 되길 바랍니다.

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

버블링 이벤트

1. 이벤트 버블링은 이벤트가 처음에 가장 구체적인 요소에 의해 수신된 다음 위쪽으로 전파되는 것을 의미합니다. 덜 구체적인 요소로.
2. 이벤트 버블링은 기본적으로 활성화되어 있지만 이벤트 버블링은 js 코드를 통해 제어할 수 있습니다.

특징:

• 이벤트 기능이 트리거되면 이벤트 기능이 실제로 이벤트 개체를 수신합니다.

• 이벤트 함수에서 event.stopPropagation() 메서드를 실행하면 이벤트 버블링이 여기서 끝납니다.

• 모든 유형의 이벤트가 이벤트 버블링을 지원하는 것은 아닙니다.

• 이벤트 버블링은 동일한 유형의 이벤트 함수만 실행합니다.

버블링 이벤트를 방지하는 두 가지 방법

버블링 이벤트를 방지하는 방법에는 두 가지가 있는데, 그 중 하나는 속성이고 다른 하나는 메소드입니다.

cancelBubble

이벤트가 계층 구조 위로 전파되어야 하는지 여부를 설정하거나 반환합니다.

구문: ​​event.cancelBubble = true;event.cancelBubble = true;

stopPropagation()

防止事件在事件流中进一步传播。

语法：event.stopPropagation();

实例：为3个互为父子的对象绑定单击响应函数。

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alert('span标签');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(){
          alert('box3');
      }
      var body = document.body;
      body.onclick = function(){
          alert('body');
      }}

给box阻止冒泡：

window.onload = function(){
      var span = document.getElementById("sp");
      span.onclick = function(){
          alert('span标签');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = function(event){
          alert('box3');
           event.stopPropagation();

      }
      var body = document.body;
      body.onclick = function(){
          alert('body');
      }}

委派事件

当我们有一堆子标签有相同的事件时，可以通过遍历子标签为其添加事件，但如果又新增了子标签元素，就要为新增的子标签元素重新绑定，否则就无效。

特性

把事件绑定给祖先元素，这样当子元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应事件来处理事件。利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

获取点击的元素

当我们给祖先元素绑定事件后，此时无论我们点击哪一个位于祖先元素内的元素，都会触发相应事件，我们只希望当我们点击祖先元素内的某一个元素才会触发事件时，此时就需要给定一个判断条件，是否为我们想要触发事件的元素。

target

返回触发事件的元素。

语法：event.taget;

stopPropagation()

이벤트 스트림에서 이벤트가 더 이상 전파되는 것을 방지합니다.

구문: ​​event.stopPropagation();

예: 클릭 응답 기능을 상호 상위 및 하위 개체인 3개 개체에 바인딩합니다.
• 

window.onload = function(){
     var ul = document.getElementById('ul1');
     ul.onclick = function(event){
         if(event.target.className == 'abq'){
             alert('事件触发！！')
         } 
     }
     //添加超链接
     document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a>新建的标签</a>";
         ul.appendChild(li);
     }
 }

박스 차단 :


1. window.onload = function(){
       var bt = document.getElementById('bt1');
       bt.addEventListener('click',function(){
           alert('触发的第一个单击相应函数！')
       },false);
       bt.addEventListener('click',function(){
           alert('触发的第二个单击相应函数！')
       },false);
       bt.addEventListener('click',function(){
           alert('触发的第三个单击相应函数！')
       },false);}

위임 중 events
2. 동일한 이벤트를 가진 하위 태그가 여러 개 있는 경우 하위 태그를 순회하여 이벤트를 추가할 수 있지만, 새 하위 태그 요소가 추가되면 새 하위 태그 요소를 다시 바인딩해야 합니다. 그렇지 않으면 유효하지 않습니다.
3. 기능

은 이벤트를

조상 요소

에 바인딩하므로 하위 요소의 이벤트가 트리거되면 항상 상위 요소

까지 버블링되고 이벤트는 의 응답 이벤트를 통해 처리됩니다. 조상 요소. 버블링 및 위임을 사용하면 이벤트 바인딩 수를 줄이고 프로그램 성능을 향상시킬 수 있습니다. 🎜🎜클릭한 요소 가져오기🎜🎜이벤트를 조상 요소에 바인딩한 후에는 조상 요소를 클릭한 요소에 관계없이 해당 이벤트가 조상 요소 내의 요소를 클릭할 때만 발생하기를 바랍니다. 이벤트가 발생하면 이때 이벤트를 발생시키려는 요소인지 판단하기 위한 판단 조건을 부여해야 합니다. 🎜🎜target🎜🎜이벤트를 트리거한 요소를 반환합니다. 🎜🎜🎜구문: ​​event.taget;🎜🎜🎜🎜🎜

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alert('box1');
     },false);
     box2.addEventListener('click',function(){
         alert('box2');
     },false);
     box3.addEventListener('click',function(){
         alert('box3');
     },false);
 }

🎜addEventListener()를 통해 이벤트 바인딩🎜🎜이 메서드는 여러 개의 동일한 이벤트 응답 함수를 동일한 요소에 바인딩할 수 있습니다. 🎜🎜🎜매개변수: 🎜🎜🎜🎜이벤트 문자열, 🎜🎜 콜백 함수에 사용하지 마세요. 이 함수는 이벤트가 트리거될 때 호출됩니다.🎜🎜캡처 단계에서 이벤트를 트리거할지 여부는 부울 값이 필요합니다. , 기본값은 false입니다🎜🎜🎜 addEventListener()를 사용하여 여러 응답 함수를 요소의 동일한 이벤트에 동시에 바인딩하면 이벤트가 트리거될 때 응답 함수가 함수 순서대로 실행됩니다. 묶여있다! 🎜🎜🎜🎜

window.onload = function(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('click',function(){
        alert('触发的第一个单击相应函数！')
    },false);
    bt.addEventListener('click',function(){
        alert('触发的第二个单击相应函数！')
    },false);
    bt.addEventListener('click',function(){
        alert('触发的第三个单击相应函数！')
    },false);}

事件的传播

• 关于事件的传播网景公司和微软公司有不同的理解：
  微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
  网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素。
• W3C综合了两个公司的方案，将事件传播分成了三个阶段：

1. 捕获阶段
   在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件。
2. 目标阶段
   事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
3. 冒泡阶段
   事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

在冒泡阶段执行响应函数。默认第三个参数为false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alert('box1');
     },false);
     box2.addEventListener('click',function(){
         alert('box2');
     },false);
     box3.addEventListener('click',function(){
         alert('box3');
     },false);
 }

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true！

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('click',function(){
         alert('box1');
     },true);
     box2.addEventListener('click',function(){
         alert('box2');
     },true);
     box3.addEventListener('click',function(){
         alert('box3');
     },true);
 }

【相关推荐：javascript视频教程、web前端】

위 내용은 JavaScript 이벤트의 버블링, 위임, 바인딩 및 전파에 대해 간략하게 이해합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!