javascript之事件捕获与冒泡

一时失言乱红尘 2021-09-20 00:04 439阅读 0赞

说到JavaScript的事件，就会牵扯到事件的捕获与冒泡两个概念。

## 通过代码去理解 ##

<div id="grand1">
        爷爷
        <div id="parent1">
            父亲
            <div id="child1">
                儿子
            </div>
        </div>
    </div>
    复制代码

div{
        border:1px solid black;
        padding:10px
    }
    复制代码

grand1.addEventListener('click',function(){
    	console.log('1爷爷') 
    })
    parent1.addEventListener('click',function(){
    	console.log('2父亲') 
    })
    child1.addEventListener('click',function(){
    	console.log('3儿子') 
    })
    复制代码

请思考几个问题

*  1 当我点击儿子的时候，我是否点击了父亲和爷爷?
    
     *  答案：yes 我点了你的鼻子你说我有没有点到你的脸
 *  2 当我点击儿子的时候，三个函数是否调用?
    
     *  答案：yes
 *  3 三个函数的调用顺序 3 2 1 or 1 2 3?
    
     *  答案：addEventListener('click',function()\{\}，true/falsey) 的第三个参数为 false时 输出顺序 儿子->父亲->爷爷 如果第三个参数为 true 输出顺序 爷爷->父亲->儿子

[demo效果][demo]

## 通过文字描述理解 ##

*  当鼠标点击儿子时，
 *  浏览器会县从上往下问，你孩子被人打了，你管不管啊？这个阶段叫捕获
 *  然后儿子会从下往上问，爸，你儿子我被人打了，你问不问啊？问完再问爷爷。这个阶段叫冒泡
 *  那一个事件到底是在捕获阶段还是冒泡阶段执行呢？由addEventListener函数的第三个参数决定
 *  true:捕获阶段 | false:冒泡阶段

[demo效果][demo 1]

### 两种型号 ###

毫不奇怪，在过去的糟糕时期，Netscape和微软得出了不同的结论

*  Netscape表示**爷爷元素**上的事件首先发生。这称为事件捕获。
 *  Microsoft坚持认为**儿子元素**上的事件优先。这称为事件冒泡。

两个事件顺序完全相反。Explorer仅支持事件冒泡。Mozilla，Opera 7和Konqueror都支持这两种方式。旧版Opera和iCab都不支持。

### W3C型号 ###

W3C非常明智地决定在这场斗争中占据中间位置。首**先捕获**在DOM中发生的任何事件， 直到它到达**目标元素**，然后**再次冒泡**

Web开发人员可以选择是在捕获阶段还是在冒泡阶段注册事件处理程序。这是通过addEventListener() 的最后一个参数决定的。如果它的最后一个参数是

*  true 则为捕获阶段设置的事件处理程序
 *  false ，则为冒泡阶段设置事件处理程序

## 通过MDN去理解 ##

*  1 代表捕获阶段
 *  2 代表事件目标
 *  3 代表冒泡阶段

### 注册事件监听器 ###

*  EventTarget.addEventListener

//推荐使用
    myButton.addEventListener('click', function(){alert('Hello world');}, false);
    复制代码

*  HTML 属性

<button onclick="alert('Hello world!')">
    复制代码

*  DOM 元素属性

//这种方法的问题在于每个元素和事件只能设置一个处理函数
    myButton.onclick = function(event){alert('Hello world');};
    复制代码

### [addEventListener()][addEventListener] ###

语法

target .addEventListener（type，listener [，options ]）;
    target .addEventListener（type，listener [，useCapture ]）;
    复制代码

*  type 一个区分大小写的字符串，表示要侦听的[事件类型][Link 1]
 *  listener 当发生指定类型的事件时接收通知（实现接口的对象）的对象,比如JavaScript 函数
 *  useCapture 是否使用捕获 true/false 默认为false 表明该事件实在捕获阶段还是冒泡阶段触发

<button id="btn">点我</button>
    复制代码

btn.addEventListener('click',function(event){
      console.log(event)  
    },true)
    复制代码

**click** : 事件类型的一种(鼠标点击事件)

**event** : 监听器回调函数的参数

*  event.currentTarget 对当前注册的事件目标的引用
 *  event.preventDefault() 取消事件（如果可取消)
 *  event.stopPropagation() 阻止事件在DOM中进一步传播。

**true** : true表示该事件 使用了捕获机制，该参数默认为false

[demo]: https://link.juejin.im?target=http%3A%2F%2Fjsrun.net%2FSJgKp%2Fedit
[demo 1]: https://link.juejin.im?target=http%3A%2F%2Fjsrun.net%2FixgKp%2Fedit
[addEventListener]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FEventTarget%2FaddEventListener
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FEvents