[聚合文章] 理解Event的冒泡模型

本文探索一下Event的冒泡过程和初学遇到的几个小bug

DOM Event概述

Event接口是检测在DOM中的发生的所有事件，我们一直在用，而且从DOM的很早的版本就一直在用着。早期的网景(后来的火狐)和IE是各自为战，直到W3C一统江湖，DOM版本一路发展而来，经历了DOM-0(洪荒时代)、DOM-1(只有两章核心内容)、DOM-2(划时代的一个版本，我们学的Event就在这个版本，而且目前的用的也是这个版本)、DOM-3、DOM-4(草案阶段)。

• 通过一个例子唤醒对Event的认识

//1、有一个js函数如下function print(){  console.log(1)}//2、在html的button里面点击触发上面的函数<button id=button onclick="?">点我</button>//问号处填可以填什么 A. print() B.print C.print.call()//在js里面的onclick里面触发button.onclick = ?//问号处可以填什么 A. print() B.print C.print.call()

• 很明显第一个问号应该选A C，第二个问号应该选B
• 第一处在HTM中，点击事件要立刻执行代码，肯定选择带()的，而第二处在JS中，onclick是一个属性，不需要立刻执行，等用户点击了，浏览器再反应，不需要()。

既然onclick等on事件在JS中是一个属性，那么后面的就会覆盖前面的，所以DOM2里面引入了一个重要的EventListener，是一个队列。

addEventListener

这是一个队列，例子1，先进先出的特点，为后面的冒泡模型做准备。

function f(){  console.log("eventListener不会覆盖")}button2.addEventListener('click', function(){  console.log("eventListener不会覆盖1")})button2.addEventListener('click', f)button2.removeEventListener('click', f)button2.addEventListener('click', function(){  console.log("eventListener不会覆盖3")})

• 会打印出什么呢，答案是eventListener不会覆盖1 eventListener不会覆盖3
• 所以说既然on可以一个打印出结果，就可以借助remove来实现one执行一次的操作

function f(){  console.log("eventListener不会覆盖2")  button2.removeEventListener('click', f)}button2.addEventListener('click', f)

只会打印一次，不会一直打印了，也就是one的原理。

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。