자바스크립트 이벤트 bubbling_javascript 스킬에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:20:451381검색
이벤트는 JavaScript의 핵심 콘텐츠 중 하나입니다. 이벤트 적용에는 필연적으로 이벤트 버블링이라는 중요한 개념이 포함됩니다. 이벤트 버블링을 소개하기 전에 이벤트 흐름이라는 또 다른 중요한 개념을 소개하겠습니다.
1. 이벤트 흐름이란:
DOM(Document Object Model)은 트리 구조로, 다음 그림과 같이 생생하게 표현됩니다.
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>
이벤트 캡처는 이벤트 버블링과 정반대입니다. 요소를 클릭하면 이벤트 전파 방향이 루트 요소에서 트리거 요소로 진행됩니다. 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 브라우저는 이를 사용하여 이벤트 버블링을 방지합니다.