js点击事件的执行过程实例分析【冒泡与捕获】

程序员文章站 2022-06-17 14:50:28

本文实例讲述了js点击事件的执行过程。分享给大家供大家参考，具体如下：js事件对象event包括很多事件类型，这里用onclick事件为例，探讨一下在js事件捕获机制和冒泡机制下的执行过程，以及如何阻...

本文实例讲述了js点击事件的执行过程。分享给大家供大家参考，具体如下：

js事件对象event包括很多事件类型，这里用onclick事件为例，探讨一下在js事件捕获机制和冒泡机制下的执行过程，以及如何阻止事件的捕获和冒泡。

首先看下当我们点击一个元素后，浏览器的执行过程。

1，当某个元素绑定的事件被触发时，这时浏览器就会从*document元素发出一个事件流

2，这个事件流顺着dom层级，一层一层向下找，直到遇到了触发事件的目标元素，这个查找的过程是捕获阶段

说明：捕获阶段，在查找每一层dom时，遇到相同的事件默认不执行，元素的事件默认在冒泡阶段执行

3，到达目标元素后会触发目标元素绑定的事件函数，也就是目标元素事件函数处理阶段

4，在处理过目标元素事件后，在顺着dom层级一层一层向上查找，这时对应dom上如果有相同的事件，默认会被触发，冒泡阶段

实例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>document</title>
</head>
<body>
  
 <div class="box" style="width:300px;height:300px;background:green;" οnclick="firstclick()">
  parent
  <div class="child" οnclick="secondclick()">child
    <div class="button" onclick = "thirdclick()">提交</div>
  </div>
</div>
<script>
  var divs=document.queryselectorall("div");//获取所有的divs
  function firstclick(){
    alert('firstclick')
  }
  function secondclick(){
    alert('secondclick')
  }
  function thirdclick(){
    alert('thirdclick')
  }
  function fn0(){
    alert("box");
  }
  function fn1(){
    alert("child");
  }
  function fn2(){
    alert("but");
  }
  divs[0].addeventlistener("click",fn0,false);
  divs[1].addeventlistener("click",fn1,false);
  divs[2].addeventlistener("click",fn2,false);
</script>
</body>
</html>

说明：

addeventlistener有三个参数，最后一个参数是决定元素事件的触发阶段，默认是false，在冒泡阶段执行，设置为true,则在捕获阶段执行。

在dom上直接绑定的事件会在addeventlistenter监听的事件执行之后执行。

阻止冒泡：

onclick = function(e){
  e=e||window.event;
    if(e.stoppropagation){
    e.stoppropagation();//其它浏览器
  }else{
    e.cancelbubble=true;//ie浏览器
  }
}

阻止捕获：判断e.target

function fn0(e){
  if(e.target == divs[0]){
    alert("fn0");
  }
}
divs[0].addeventlistener("click",fn0,true);

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。

上一篇：获取cookie后，携带cookie请求

下一篇： JS三级联动代码格式实例详解

js点击事件的执行过程实例分析【冒泡与捕获】

js事件机制----捕获与冒泡机制实例分析