登录  /  注册
首页 > 头条 > 正文

javascript DOM对象学习之事件流addEventListener()使用教程

伊谢尔伦
发布: 2017-07-12 11:08:35
原创
1718人浏览过

addeventlistener 用于注册事件处理程序,ie 中为 attachevent,我们为什么讲 addeventlistener 而不讲 attachevent 呢?一来 attachevent 比较简单,二来 addeventlistener 才是 dom 中的标准内容。

学习我们php中文网的视频课程:独孤九贱(3)_JavaScript视频教程

简介

addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序,在以前我们一般是

语法

element.addEventListener(event, function, useCapture);
登录后复制

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。

你可以使用函数名,来引用外部函数:

element.addEventListener("click", function(){ alert("Hello World!"); });
element.addEventListener("click", myFunction);function myFunction() {
    alert ("Hello World!");
}
登录后复制

addEventListener-事件流

说到 addEventListener 不得不说到事件流,先说事件流对后面的解释比较方便。

当一个事件发生时,分为三个阶段:

捕获阶段 从根节点开始顺序而下,检测每个节点是否注册了事件处理程序。如果注册了事件处理程序,并且 useCapture 为 true,则调用该事件处理程序。(IE 中无此阶段。)

目标阶段 触发在目标对象本身注册的事件处理程序,也称正常事件派发阶段。

冒泡阶段 从目标节点到根节点,检测每个节点是否注册了事件处理程序,如果注册了事件处理程序,并且 useCapture 为 false,则调用该事件处理程序。

举例

<div id="div1">   <div id="div2">     <div id="div3">       <div id="div4">       </div>     </div>   </div> </div>
登录后复制

如果在 d3 上点击鼠标,事件流是这样的:

捕获阶段 在 div1 处检测是否有 useCapture 为 true 的事件处理程序,若有,则执行该程序,然后再同样地处理 div2。

目标阶段 在 div3 处,发现 div3 就是鼠标点击的节点,所以这里为目标阶段,若有事件处理程序,则执行该程序,这里不论 useCapture 为 true 还是 false。

冒泡阶段 在 div2 处检测是否有 useCapture 为 false 的事件处理程序,若有,则执行该程序,然后再同样地处理 div1。

注意,上述捕获阶段和冒泡阶段中,实际上 div1 之上还应该有结点,比如有 body,但这里不讨论。

addEventListener-第三个参数 useCapture

addEventListener 有三个参数:第一个参数表示事件名称(不含 on,如 "click");第二个参数表示要接收事件处理的函数;第三个参数为 useCapture,本文就讲解它。

<div id="outDiv">   <div id="middleDiv">     <div id="inDiv">请在此点击鼠标。</div>   </div> </div>
<div id="info"></div>
登录后复制
var outDiv = document.getElementById("outDiv"); 
var middleDiv = document.getElementById("middleDiv"); 
var inDiv = document.getElementById("inDiv"); 
var info = document.getElementById("info");   
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false); 
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false); 
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);
登录后复制

上述是我们测试的代码,根据 info 的显示来确定触发的顺序,有三个 addEventListener,而 useCapture 可选值为 true 和 false,所以 2*2*2,可以得出 8 段不同的程序。

全为 false 时,触发顺序为:inDiv、middleDiv、outDiv;

全为 true 时,触发顺序为:outDiv、middleDiv、inDiv;

outDiv 为 true,其他为 false 时,触发顺序为:outDiv、inDiv、middleDiv;

middleDiv 为 true,其他为 false 时,触发顺序为:middleDiv、inDiv、outDiv;

……

最终得出如下结论:

true 的触发顺序总是在 false 之前;

如果多个均为 true,则外层的触发先于内层;

如果多个均为 false,则内层的触发先于外层。

向 Window 对象添加事件句柄

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
登录后复制

传递参数

当传递参数值时,使用"匿名函数"调用带参数的函数:

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
登录后复制

事件冒泡或事件捕获?

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中,用户点击

元素, 哪个元素的 "click" 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

元素的点击事件先触发 ,然后再触发

元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);
登录后复制

一般情况下,如果给一个dom对象绑定同一个事件,只有最后一个会生效,比如:

document.getElementById("btn").onclick = method1; 
document.getElementById("btn").onclick = method2; 
document.getElementById("btn").onclick = method3;
登录后复制

那么将只有method3生效。
如果是Mozilla系列,用addEventListener可以让多个事件按顺序都实现,比如:

var btn1Obj = document.getElementById("btn1"); 
//element.addEventListener(type,listener,useCapture); 
btn1Obj.addEventListener("click",method1,false); 
btn1Obj.addEventListener("click",method2,false); 
btn1Obj.addEventListener("click",method3,false);
登录后复制

执行顺序为method1->method2->method3
如果是ie系列,用attachEvent可以让多个事件按顺序都实现,比如:

var btn1Obj = document.getElementById("btn1"); 
//object.attachEvent(event,function); 
btn1Obj.attachEvent("onclick",method1); 
btn1Obj.attachEvent("onclick",method2); 
btn1Obj.attachEvent("onclick",method3);
登录后复制

执行顺序为method3->method2->method1 

相关内容推荐:

1. Javascript 的addEventListener()及attachEvent()区别分析

2. 解析js中addEventListener()与removeEventListener()

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号