dom事件流（当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做）

本文目录

• 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做
• JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别
• Javascript的事件流模型都有什么
• DOM事件流的介绍
• 什么是事件的捕捉阶段和冒泡阶段
• js ie和dom事件流的区别
• dom0级事件及dom2级事件
• DOM事件机制

当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做

直接在DOM里绑定事件：在JS里通过onclick绑定：xxx.onclick=test通过事件添加进行绑定：addEventListener(xxx,‘click’,test)那么问题来了，Javascript的事件流模型都有什么？“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -》 body -》 document IE 6.0: div -》 body -》 html -》 document Mozilla 1.0: div -》 body -》 html -》 document -》 window（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。 DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。 支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。 假设一个元素div，它有一个下级元素p。《div》 《p》元素《/p》《/div》这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？ 两种模型以前，Netscape和Microsoft是不同的实现方式。Netscape中，div先触发，这就叫做事件捕获。Microsoft中，p先触发，这就叫做事件冒泡。两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera’s 和 iCab两种都不支持 。 事件捕获当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。 事件冒泡当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。W3C模型W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。

Javascript的事件流模型都有什么

JavaScript中的事件流模型有冒泡事件流、捕获事件流和DOM事件流。其中dom同时支持两种事件模型，但捕获性事件先开始，从document开始也结束于document，dom模型的独特之处在于文本也可以触发事件

DOM事件流的介绍

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

什么是事件的捕捉阶段和冒泡阶段

（1）冒泡型事件：事件按照特定事件目标特定事件目标(document象)顺序触发 IE 5.5: div -》 body -》 document IE 6.0: div -》 body -》 html -》 document Mozilla 1.0: div -》 body -》 html -》 document -》 window（2）捕获型事件(event capturing)：事件精确象(document 象)始触发精确(窗口级别捕获事件必须由发员特别指定)（3）DOM事件流：同支持两种事件模型：捕获型事件冒泡型事件捕获型事件先发两种事件流触及DOM所象document象始document象结束 DOM事件模型独特性质文本节点触发事件(IE) 支持W3C标准浏览器添加事件用addEventListener(event,fn,useCapture)基第3参数useCaptureBoolean值用设置事件事件捕获执行事件冒泡执行兼容W3C浏览器(IE)用attachEvent()没相关设置IE事件模型默认事件冒泡执行useCapture等于false候执行所处理事件useCapture设置false比较安全实现兼容浏览器效 事件捕获阶段：事件级标签始往查找直捕获事件目标(target)事件冒泡阶段：事件事件目标(target)始往冒泡直页面级标签 假设元素div级元素p 元素两元素都绑定click事件用户点击pdivp都触发click事件两事件处理程序哪先执行呢事件顺序 两种模型前NetscapeMicrosoft同实现式Netscapediv先触发叫做事件捕获Microsoftp先触发叫做事件冒泡两种事件处理顺序刚相反IE支持事件冒泡Mozilla, Opera 7 Konqueror两种都支持旧版本Opera’s iCab两种都支持 事件捕获使用事件捕获父级元素先触发级元素触发即div先触发p触发 事件冒泡使用事件冒泡级元素先触发父级元素触发即p先触发div触发W3C模型W3C模型两者进行W3C模型任何事件发先顶层始进行事件捕获直事件触发达事件源元素

js ie和dom事件流的区别

1. 事件流的区别 ：IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件。

2. 事件侦听函数的区别：IE使用，.detachEvent("name_of_event_handler", fnHandler); //移除绑定。

1.文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

2.Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。

3.微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

dom0级事件及dom2级事件

1.dom0级事件 像上面把onclick写在标签内或者绑定onclick事件，都是dom0级事件，执行的时候第二个会覆盖第一个onclick，弹出1 （btnClick行内事件优先执行， temp.onclick第二个执行，覆盖前者） 2.dom2级事件（DOM2级的事件规定了事件流包含三个阶段包括： 1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段） 以上jq点击事件和原生的addEventListener的点击事件，都是dom2级事件，不会覆盖，会依次执行 3.dom0事件和dom2事件并存 dom0事件和dom2事件并存,一次弹出2,3,4,5,6 4.无论在DOM0还是DOM2还是DOM3中都会在事件函数中传入事件对象; 事件对象event下的属性和方法：

DOM事件机制

前言 一、DOM事件级别 DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。 1.DOM 0级事件 el.onclick=function(){} 当希望为同一个元素/标签绑定多个同类型事件的时候（如给上面的这个btn元素绑定3个点击事件），是不被允许的。DOM0事件绑定，给元素的事件行为绑定方法，这些方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。 2.DOM 2级事件 el.addEventListener(event-name, callback, useCapture) event-name: 事件名称，可以是标准的DOM事件 callback: 回调函数，当事件触发时，函数会被注入一个参数为当前的事件对象 event useCapture: 默认是false，代表事件句柄在冒泡阶段执行 IE9以下的IE浏览器不支持 addEventListener()和removeEventListener()，使用 attachEvent()与detachEvent() 代替，因为IE9以下是不支持事件捕获的，所以也没有第三个参数，第一个事件名称前要加on。 3.DOM 3级事件 在DOM 2级事件的基础上添加了更多的事件类型。 UI事件，当用户与页面上的元素交互时触发，如：load、scroll 焦点事件，当元素获得或失去焦点时触发，如：blur、focus 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel 文本事件，当在文档中输入文本时触发，如：textInput 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress 合成事件，当为IME（输入法器）输入字符时触发，如：compositionstart 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified 同时DOM3级事件也允许使用者自定义一些事件。 二、DOM事件模型和事件流 DOM事件模型分为捕获和冒泡。一个事件发生后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段。 （1）捕获阶段：事件从window对象自上而下向目标节点传播的阶段； （2）目标阶段：真正的目标节点正在处理事件的阶段； （3）冒泡阶段：事件从目标节点自下而上向window对象传播的阶段。 DOM事件捕获的具体流程 捕获是从上到下，事件先从window对象，然后再到document（对象），然后是html标签（通过document.documentElement获取html标签），然后是body标签（通过document.body获取body标签），然后按照普通的html结构一层一层往下传，最后到达目标元素。 而事件冒泡的流程刚好是事件捕获的逆过程。 接下来我们看个事件冒泡的例子： 正如我们上面提到的onclick给元素的事件行为绑定方法都是在当前元素事件行为的冒泡阶段(或者目标阶段)执行的。 三、事件代理(事件委托) 由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation）。 1.优点 减少内存消耗，提高性能 假设有一个列表，列表之中有大量的列表项，我们需要在点击每个列表项的时候响应一个事件 如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。借助事件代理，我们只需要给父容器ul绑定方法即可，这样不管点击的是哪一个后代元素，都会根据冒泡传播的传递机制，把容器的click行为触发，然后把对应的方法执行，根据事件源，我们可以知道点击的是谁，从而完成不同的事。 动态绑定事件 在很多时候，我们需要通过用户操作动态的增删列表项元素，如果一开始给每个子元素绑定事件，那么在列表发生变化时，就需要重新给新增的元素绑定事件，给即将删去的元素解绑事件，如果用事件代理就会省去很多这样麻烦。 2.如何实现 接下来我们来实现上例中父层元素 #list 下的 li 元素的事件委托到它的父层元素上： 四、Event对象常见的应用 event. preventDefault() 如果调用这个方法，默认事件行为将不再触发。什么是默认事件呢？例如表单一点击提交按钮(submit)跳转页面、a标签默认页面跳转或是锚点定位等。 很多时候我们使用a标签仅仅是想当做一个普通的按钮，点击实现一个功能，不想页面跳转，也不想锚点定位。也可以通过JS方法来阻止，给其click事件绑定方法，当我们点击A标签的时候，先触发click事件，其次才会执行自己的默认行为 接下来我们看个例子：输入框最多只能输入六个字符，如何实现？ event.stopPropagation() & event.stopImmediatePropagation() event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。上面提到事件冒泡阶段是指事件从目标节点自下而上向window对象传播的阶段。 我们在例4的inner元素click事件上，添加event.stopPropagation()这句话后，就阻止了父事件的执行，最后只打印了’inner’。 stopImmediatePropagation 既能阻止事件向父元素冒泡，也能阻止元素同事件类型的其它监听器被触发。而 stopPropagation 只能实现前者的效果。我们来看个例子： 如上所示，使用 stopImmediatePropagation后，点击按钮时，不仅body绑定事件不会触发，与此同时按钮的另一个点击事件也不触发。 event.target & event.currentTarget 老实说这两者的区别，并不好用文字描述，我们先来看个例子： 当我们点击最里层的元素d的时候，会依次输出: 从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。也就是说，event.currentTarget始终是监听事件者，而event.target是事件的真正发出者。 五、参考文章 DOM级别与DOM事件 DOM事件机制解惑 事件模型 JavaScript 事件委托详解 JavaScript 事件的学与记：stopPropagation 和 stopImmediatePropagation event.target和event.currentTarget的区别 ***隐藏网址*** 最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。” 祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。