window.addEventlistener和document.addEventlistener区别

最新推荐文章于 2024-05-29 16:21:30 发布

爱吸猫两脚兽

最新推荐文章于 2024-05-29 16:21:30 发布

阅读量4.6k

点赞数

分类专栏：理论知识文章标签： html

本文链接：https://blog.csdn.net/weixin_44753854/article/details/100711311

版权

理论知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

window.addEventlistener(“click”,showa,true);
括号里三个参数：
1：“click” 事件类型，有click、onmouseover……等事件类型；
2：showa （函数名称）事件触发后调用的函数；
3：true （布尔值）用于描述事件是冒泡还是捕获，可选参数，true捕获 false冒泡。
document.addEventlistener(“click”,showc,true);
参数解释同上。
下面测试例子：

<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function showa()
{
   var ida=document.getElementById('a');
   alert(ida.innerText);
}
window.addEventListener("click", showa, true);
	function showb()
{
   var idb=document.getElementById('b');
   alert(idb.innerText);
}
window.addEventListener("click", showb, false);
	function showc()
{
   var idc=document.getElementById('c');
   alert(idc.innerText);
}
document.addEventListener("click", showc, true);
	function showd()
{
   var idd=document.getElementById('d');
   alert(idd.innerText);
}
document.addEventListener("click", showd, false);
</script>
</head>
<body>
<a id="a">aa</a><br>
<a id="b">bb</a><br>
<a id="c">cc</a><br>
<a id="d">dd</a>
</body>
</html>

弹窗顺序：acdb
捕获时true：先执行window，再执行document；
冒泡时false：事件往回传递，先执行document，再执行window。

window.addEventlistener参数为true时，先弹窗再看到页面内容，false时，先看到页面的内容，再弹窗；
document.addEventlistener参数为true时，先看到页面内容再弹窗，false时，先弹窗再看到页面内容。

爱吸猫两脚兽

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
window.addEventlistener和document.addEventlistener区别

window.addEventlistener(“click”,showa,true);括号里三个参数：1：“click” 事件类型，有click、onmouseover……等事件类型；2：showa （函数名称）事件触发后调用的函数；3：true （布尔值）用于描述事件是冒泡还是捕获，可选参数，true捕获 false冒泡。document.addEventlistener(“cli...
复制链接

扫一扫