자바스크립트 이벤트 bubbling_javascript 스킬에 대한 자세한 설명-JS 튜토리얼-php.cn

자바스크립트 이벤트 bubbling_javascript 스킬에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:20:45

원래의

1341명이 탐색했습니다.

이벤트는 JavaScript의 핵심 콘텐츠 중 하나입니다. 이벤트 적용에는 필연적으로 이벤트 버블링이라는 중요한 개념이 포함됩니다. 이벤트 버블링을 소개하기 전에 이벤트 흐름이라는 또 다른 중요한 개념을 소개하겠습니다.
1. 이벤트 흐름이란: DOM(Document Object Model)은 트리 구조로, 다음 그림과 같이 생생하게 표현됩니다.

html 요소가 이벤트를 트리거하면 해당 이벤트는 DOM 트리의 트리거 노드와 루트 노드 사이에 특정 순서로 전파됩니다. 이 전파 프로세스를 호출합니다. 이벤트의 흐름. 이벤트 전파 순서에 따라 두 가지 범주로 나눌 수 있는데, 하나는 이벤트 버블링이고 다른 하나는 이 장에서 소개할 주제와 관련된 이벤트 캡처입니다.

1. 이벤트 버블링: 소위 시간 버블링은 요소가 이벤트를 트리거할 때 이벤트가 버블처럼 트리거 요소에서 모든 상위 노드로 전파되는 것을 의미합니다. 해당 이벤트는 해당 루트 노드까지 수신됩니다. 이벤트가 상위 요소 핸들러 함수에 등록되면 하위 노드에서 이벤트가 트리거되더라도 상위 요소에 등록된 이벤트 핸들러 함수도 트리거됩니다. 예를 들어, 위 그림에서 a 요소의 onclick 이벤트가 발생하면 해당 상위 요소인 p, document, window가 모두 이 이벤트를 받게 되고, 해당 상위 요소에 시간 처리 기능이 등록되면 이 이벤트 처리 함수가 실행됩니다. 코드 예를 살펴보세요.

<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
 var table=document.getElementById("mytable");
 table.onclick=function(e){
 var event=e||window.event;
 target=event.srcElement||event.target;
 alert(target.innerHTML);
 }
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
<tr>
 <td>脚本之家</td>
 <td>脚本之家</td>
 <td>脚本之家</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

위 코드의 목적은 해당 셀을 클릭하면 해당 셀의 내용이 팝업되도록 하는 것입니다. 그러나 위 구현에서는 onclick 이벤트 핸들러가 각 셀에 등록되지 않고 대신 셀을 클릭하면 onclick 이벤트가 트리거되고 이벤트가 발생합니다. 또한 이벤트 개체에서 위쪽으로 전파되며 테이블 요소에 등록된 onclick 이벤트 핸들러가 이때 실행됩니다. 물론 이벤트 개체 매개변수 전달 문제가 설정됩니다. 모든 브라우저는 이벤트 버블링을 지원합니다. 2. 이벤트 캡처:

이벤트 캡처는 이벤트 버블링과 정반대입니다. 요소를 클릭하면 이벤트 전파 방향이 루트 요소에서 트리거 요소로 진행됩니다. IE는 브라우저 간 지원을 위해 일반적으로 기본적으로 버블링을 사용합니다. 버블 이벤트 처리 모델.

2.javascript 이벤트 버블링 코드 방지 이벤트 버블링은 특정 시나리오에서 매우 유용하지만 때로는 이를 방지해야 합니다. 다음은 이벤트 버블링을 방지하기 위해 모든 주요 브라우저와 호환되는 예제 코드입니다.
코드 예:

function stopBubble(e) 
{ 
 if(e&&e.stopPropagation) 
 { 
 e.stopPropagation(); 
 } 
 else
 { 
 window.event.cancelBubble=true; 
 } 
}

로그인 후 복사

위의 코드는 이벤트가 버블링되는 것을 방지할 수 있습니다. 다음은 코드에 대한 간략한 설명입니다.

2. 코드 주석:

1. function stopBubble(e) {}, 이 함수는 이벤트 버블링을 방지하는 데 사용되며 매개변수는 이벤트 객체입니다.
2. if(e&&e.stopPropagation){e.stopPropagation();}, stopPropagation이 지원되는지 확인합니다. e.stopPropagation()을 사용합니다. stopPropagation() 함수는 IE10 및 IE10 이하 브라우저에서는 지원되지 않습니다.
3.window.event.cancelBubble=true, 현재 IE 브라우저는 이를 사용하여 이벤트 버블링을 방지합니다.

이상은 JavaScript 이벤트 버블링에 대한 자세한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.