首页 / JAVASCRIPT / js之DOM事件流详解

js之DOM事件流详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js之DOM事件流详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10667字，纯文字阅读大概需要16分钟。

内容图文

事件就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。事件处理程序响应某个事件的函数就叫事件处理程序(或事件侦听器)。

DOM0级事件处理程序

下面例子中展示了dom0绑定事件的两种方法以及如何解绑事件，执行代码我们发现如果给同一元素同时绑定两个事件的话，则后面绑定的事件会把前面绑定的事件给覆盖。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
       <button type="button" id="btn" onclick="alert('btn1')">点击按钮</button>
</body>
<script>    var btn=document.getElementById("btn");    //绑定事件    btn.onclick=function(){        alert("btn");
   };    //事件解绑    btn.onclick=null;
</script>
</html>

dom2级事件处理程序

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport"          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"/>
   <title>Title</title>
</head>
<body>
<button type="button" id="btn" onclick="alert('btn1')">点击按钮</button>
</body>
<script>    var btn=document.getElementById("btn");    //绑定事件    btn.addEventListener("click",function(){         alert("btn");
   },false);    //事件解绑   btn.removeEventListener("click",function(){       alert("解绑");
  })
</script>
</html>

注意：addEventListener()方法第三个参数默认为false，即采用事件冒泡的形式执行程序，如果为true的话则，采用事件捕获的形式执行程序。局限于非ie浏览器，ie浏览器则采用attachEventListener绑定事件，关于ie和非ie浏览器事件绑定以及解绑，接下来我会写一个例子来展示二者之间的区别。

var eventUtil = {    //添加事件    addEventHandle:function(element,eventType,fn){        if(element.addEventListener){//非IE            element.addEventListener(eventType,fn,false);
       }else if(element.attachEvent){//IE            element.attachEvent('on'+eventType,fn);//这里拼接上'on',调运的时候不要加on，使用click等。        }else{//不支持DOM2级，使用DOM0级方式            element['on'+eventType] = fn;//这里使用[]方式实现对象的属性添加，相当于.的作用        }
   },    //删除事件    removeEventHandle:function(element,eventType,fn){        if(element.removeEventListener){//非IE,不带'on'            element.removeEventListener(eventType,fn,false);
       }else if(element.detachEvent){//IE,带'on'            element.detachEvent('on'+eventType,fn);
       }else{//不支持DOM2级，使用DOM0级方式            element['on'+eventType] = fn;
       }
   },    //获取事件对象    getEvent:function(event){        return event?event:window.event;
   },    //获取事件类型    getType:function(event){        return event.type;
   },    //获取执行事件的目标元素    getTarget:function(event){        return event.target||event.srcElement;
   },    //禁用默认行为    preventDefault:function(event){        if(event.preventDefault){            event.preventDefault();//非IE        }else{            event.returnValue = false;//针对IE        }

   },    //阻止传播冒泡    stopPropagation:function(event){        if(event.stopPrapagation){            event.stopPropagation();//非IE        }else{            event.cancelBubble = true;//针对IE        }
   }
}

dom3事件处理程序

DOM浏览器中可能发生的事件有很多种，不同事件类型具有不同的信息，DOM3级事件规定了一下几种事件：
UI事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或者失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中，输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动事件，当底层Dom结构发生变化时触发；
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
DOM中的事件模拟（自定义事件）：
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent");
返回的对象有一个initCustomEvent（）方法接收如下四个参数。
1）type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
可以像分配其他事件一样在DOM中分派创建的自定义事件对象。如：

   
var  p = document.getElementById("myp");
EventUtil.addEventHandler(p,"myEvent", function () {
alert("p myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
var e = document.createEvent("CustomEvent");
e.initCustomEvent("myEvent",true,false,"hello world!");
p.dispatchEvent(e);
}

这个例子中创建了一个冒泡事件“myEvent”。而event.detail的值被设置成了一个简单的字符串，然后在p和document上侦听该事件，因为在initCustomEvent中设置了事件冒泡。所以当p激发该事件时，浏览器会将该事件冒泡到document。
IE中的事件模拟(IE8及之前版本中)：
与DOM中事件模拟的思路类似，先创建event对象，再为其指定相应信息，然后再使用该对象来触发事件。当然IE在实现以下每个步骤都不太一样。
例如：

var btn = document.getElementById("myBtn");
//创建事件对象,不接受任何参数，结果会返回一个通用的event对象，你必须为该event对象指定所有必要的信息。
var event  = document.createEventObject();
//初始化事件对象
event.screenX = 100；
event.screenY = 0;
event.clientX = 0;
event.clientY =0;
event.ctrlKey = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;

//触发事件
btn.fireEvent("onclick",event);

事件流的分类

事件冒泡流：IE的事件流叫事件冒泡，即事件开始时由最具体的元素(文档中嵌套层次最深的节点)接收，然后逐级向上传播到较为不具体的节点
事件捕获流：Netscape团队提出的另一种事件流叫事件捕获，事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件
dom事件流：“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段==>处于目标阶段==>事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会。然后是实际的目标接收事件。最后一个阶段是冒泡阶段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <p id="node1">
           <p id="node2">
               <p id="node3">
                   <p id="node4">click me</p>
               </p>
           </p>
       </p>
</body>
<script>    var node1=document.getElementById("node1");    var node2=document.getElementById("node2");    var node3=document.getElementById("node3");    var node4=document.getElementById("node4");    node1.addEventListener("click",function(){        alert("node1");
    },false);    node2.addEventListener("click",function(){        alert("node2");
    },false);    node3.addEventListener("click",function(){        alert("node3");
    },false);    node4.addEventListener("click",function(){        alert("node4");
    },false);
</script>
</html>

以上代码分别给node1-node4个节点绑定事件，且采用事件冒泡的形式执行，从而分别会弹出node4->node3->node3->node1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <p id="node1">
           <p id="node2">
               <p id="node3">
                   <p id="node4">click me</p>
               </p>
           </p>
       </p>
</body>
<script>    var node1=document.getElementById("node1");    var node2=document.getElementById("node2");    var node3=document.getElementById("node3");    var node4=document.getElementById("node4");    node1.addEventListener("click",function(){        alert("node1");
    },true);    node2.addEventListener("click",function(){        alert("node2");
    },true);    node3.addEventListener("click",function(){        alert("node3");
    },true);    node4.addEventListener("click",function(){        alert("node4");
    },true);
</script>
</html>

以上代码分别给node1-node4个节点绑定事件，且采用事件捕获的形式执行，从而分别会弹出node1->node2->node3->node4.

那如果给同一元素同事绑定两个事件，一个采用冒泡一个采用捕获则程序会按照dom流的形式来执行程序即"先捕获后冒泡"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
       <p id="node1">
           <p id="node2">
               <p id="node3">
                   <p id="node4">click me</p>
               </p>
           </p>
       </p>
</body>
<script>    var node1=document.getElementById("node1");    var node2=document.getElementById("node2");    var node3=document.getElementById("node3");    var node4=document.getElementById("node4");    node1.addEventListener("click",function(){        alert("node1");
    },false);    node2.addEventListener("click",function(){        alert("node2");
    },false);    node3.addEventListener("click",function(){        alert("node3");
    },false);    node4.addEventListener("click",function(){        alert("node4");
    },false);    
    
    node1.addEventListener("click",function(){        alert("node1");
    },true);    node2.addEventListener("click",function(){        alert("node2");
    },true);    node3.addEventListener("click",function(){        alert("node3");
    },true);    node4.addEventListener("click",function(){        alert("node4");
    },true);
    
    
</script>
</html>

程序执行顺序：node1->node2->node3->node4->node4->node3->node2->node1.

事件代理

含义：事件代理即事件委托，就是利用事件冒泡只制定一个事件处理程序就可以管理某一类型的所有事件

为什么：一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>    //无事件代理    window.onload = function(){        var oUl = document.getElementById("ul1");        var aLi = oUl.getElementsByTagName('li');        for(var i=0;i<aLi.length;i++){            aLi[i].onclick = function(){                alert(123);
            }
        }
    };    //事件代理    window.onload = function(){        var oUl = document.getElementById("ul1");        oUl.onclick = function(ev){            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            if(target.nodeName.toLowerCase() == 'li'){                alert(123);                alert(target.innerHTML);
            }
        }
    }
</script>
</body>
</html>

内容总结

以上是互联网集市为您收集整理的js之DOM事件流详解全部内容，希望文章能够帮你解决js之DOM事件流详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/293779.html

来源：【匿名】

【上一篇】js如何获取其它页面url传过来的参数【下一篇】javascript 怎么调用php方法

更多 ►

【js之DOM事件流详解】教程文章相关的互联网学习教程文章

javascript阻止事件冒泡及默认事件方式【代码】

//阻止事件冒泡function stopBubble(e){if(e&&e.stopPropagation){//非IE e.stopPropagation();}else{//IEwindow.event.cancelBubble=true;} } //阻止默认事件function stopDefault(e) {//阻止默认浏览器动作(W3C)if ( e && e.preventDefault ){e.preventDefault();}else{//IE中阻止函数器默认动作的方式window.event.returnValue = false;}returnfalse; } 原文：http://www.cnblogs.com/chinahui/p/5701035.html

javascript之事件模型

事件模型冒泡型事件（Bubbling）：事件由叶子节点沿祖先节点一直向上传递到根节点捕获型事件（Capturing）：由DOM树最顶元素一直到最精确的元素，与冒泡型事件相反DOM标准事件模型：DOM标准既支持冒泡型事件，也支持捕获型事件，可以说是两者的结合体，首先是捕获型，接着冒泡传递事件对象在IE浏览器中事件对象是window的一个属性，在DOM标准中，event必须作为唯一的参数传给事件处理函数获得兼容的event 对象：function(event){ /...

javascript 给所有相同属性元素添加同一事件(javascript add the same event to all the same properties)【代码】【图】

经常遇到要给 html 中所有相同属性的元素添加同一个点击事件, 这里, 我需要给所有 type 属性为 "radio" 的 input 元素添加上相同的点击事件, 具体实现的 javascript 代码如下: // document.querySelectorAll("input[type=‘radio‘]")是获取网页上所有type属性为radio的input元素 document.querySelectorAll(‘.some-class‘).forEach(item => {item.addEventListener(‘click‘, event => {//handle click }) }) 参考资料: https...

javascript双击事件取消默认的两次单击事件【代码】

当一个元素同时具有单击和双击事件时，双击时会触发2次单击和1此双击事件。双击会：先第1次单击，同时触发第2次和双击事件。<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script type="text/javascript">var id;window.onload = function () {document.getElementById(‘divdemo‘).onclick = funct...

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用处理时间占用内存，而且不是每个事件都会被点击执行。由此事件委托可以优化事件绑定行为、。事件逐层冒泡直到被父级元素捕获。事件代理给外层元素绑定一个处理事件，就可以处理子元素上出发所有事件。DOM 标准事件三个阶段：捕获到达目标、冒泡IE 不支持捕获，但冒泡够用了。event.currentTarget 事件处理程序当前正在处理事件的那个元素event.target 事...

Javascript自定义事件【代码】

事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.实现自定义事件的原理是创建一个管理事件的对象.第一步：创建事件对象function EventTarget(){ this.handlers = {};//存储结构：{事件名1:[func1,func2……]，事件名2:[func1,func2……]……}}EventTarget.prototype = {constructor:EventTarget,//添加事件addHandler:function(type,handler){ if(typeof this.handlers[type] == "undefined")...

Javascript 4.3 事件处理函数

鼠标指针悬停在某个元素上时触发一个动作:onmouseover事件处理函数鼠标指针离开某个元素时触发一个动作:onmouseout事件处理函数点击某个链接时触发一个动作:onclick事件处理函数this关键字:摘取当前对象原文：https://www.cnblogs.com/ljt828/p/10729535.html

JavaScript事件详解【图】

事件流　　描述的是在页面中接收事件的顺序事件冒泡　　由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）事件捕获　　最不具体的节点先接收事件，而最具体的节点应该是最后接收事件事件处理　　HTML事件处理：直接添加到HTML结构中　　DOM 0级事件处理：把一个函数赋值给一个事件处理程序属性【会被覆盖掉】结果会显示17行的结果，前面几行的事件会被覆盖掉。18行的是清空事件。　　DOM 2级事件处理：　　　...

JS JavaScript事件循环机制【代码】【图】

区分进程和线程进程是cpu资源分配的最小单位（系统会给它分配内存）不同的进程之间是可以同学的，如管道、FIFO(命名管道)、消息队列一个进程里有单个或多个线程浏览器是多进程的，因为系统给它的进程分配了资源（cpu、内存）（打开Chrome会有一个主进程，每打开一个Tab页就有一个独立的进程）浏览器的渲染进程是多线程的1.GUI渲染线程2.JS引擎线程3.事件触发线程4.定时触发器线程5.异步HTTP请求线程事件循环机制上图解释：同步和...

6月第4周--javascript 事件机制

本周任务，对javascript事件机制进行思考提供以下几个博文论点：1.javascript事件模型2.e.target与e.currentTarget是干什么的？3.preventDefault与stopPropagation是干什么的4.什么是dispatchEvent？5.说一说事件代理的实现，并封装一个方法6.事件代理的问题<li><span></span></li>如果同时给span与li绑定事件该如何组装冒泡？？？7.tap事件是如何实现的8.tap会产生什么问题9.zepto的touch库做了什么？10.fastclick解决了什么问...

javascript中点击鼠标右键触发的事件【代码】

javascript中事件有很多种，这里只谈一个很有用，但不常见的事件。单击鼠标右键触发的事件contextmenu事件。 document.oncontextmenu=function(){return false;}这样就可以屏蔽掉鼠标右击的事件。当然如果需要什么效果也可以在事件监听函数中添加。原文：http://www.cnblogs.com/smallLong/p/6553894.html

javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别【代码】

项目中有个需求，事件第一次执行（立即执行）与后几次执行不同，但是直接传递定义好的命名函数，返回结果一样。。如果通过匿名函数内再嵌套具名函数，结果就能返回正确！代码如下：代码<buttonclass="button">按钮</button> (function(w) {//第一次定义需要执行的代码块var fn = function() {console.log(1);};var btn = document.querySelector(‘.button‘);btn.addEventListener(‘click‘, fn, false);btn.click();//覆...

javascript:理解DOM事件【代码】【图】

首先，此文不讨论繁琐细节，但是考虑到读者的心灵感受，本着以积极向上的心态，在此还是会列举示例说明。?标题为理解DOM事件，那么在此拿一个简单的点击事件为例，希望大家看到这个例子后能触类旁通。最初我们给页面实现点击，就像下面这样的简单操作。先定义一个块如<div id="weiyuzhou">微宇宙</div>，之后在<script type="text/javascript"></script>内部实现id为weiyuzhou的点击事件，如下代码所示：var wyz = document.getE...

javascript:理解splice事件

splice针对数组的使用，表示给数组插入一个新的参数，返回一个新的数组，还会修改原来的数组，怎么理解这个意思，比如现在的数组arr = [1,2,3]，现在给数组添加一个新的字符串‘Thomson‘，如arr.splice(1，‘Thomson‘)，得到的新数组[1,‘Thomson‘,2,3]，这样都可以，splice可以随意的插入到数组的任意地方，说明了splice的强大之处，所以我们可以在方法内使用数组的时候可以调用splice如function o(thing.splice){},当然也能删...

高级功能：很有用的javascript自定义事件【代码】

之前写了篇文章《原生javascript实现类似jquery on方法的行为监听》比较浅显，能够简单的使用场景。这里的自定义事件指的是区别javascript默认的与DOM交互的事件，比如click，mouseover,change等，有时候我们需要监听某一行为是否发生，很显然默认的行为不够用，比如一个场景。我们写好了tab切换，点击后请求加载隐藏标签的内容。tab切换是非常常用的一个功能，通常会写成组件，如果每次把请求写在组件里肯定对组件拓展和耦合性有影...

首页 / JAVASCRIPT / js之DOM事件流详解

js之DOM事件流详解

内容导读

内容图文

dom3事件处理程序

事件流的分类

那如果给同一元素同事绑定两个事件，一个采用冒泡一个采用捕获则程序会按照dom流的形式来执行程序即"先捕获后冒泡"

事件代理

内容总结

内容备注

内容手机端

【js之DOM事件流详解】教程文章相关的互联网学习教程文章

DOM - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程