window.addEventlistener和document.addEventlistener区别

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时，先弹窗再看到页面内容。

window.addEventlistener和document.addEventlistener区别相关推荐

window.onload和$(document).ready()区别很大……
window.onload和$(document).ready()区别很大-- posted on 2014-06-11 14:01 Juniors 阅读(...) 评论(...) 编辑收藏转载于 ...
window.addEventListener()和document.addEventListener()区别
window.addEventListener('load',function(){ //页面的全部资源加载完后才会执行包括图片视频等 }) window.addEventListener('D ...
angular2 页面中使用window.open打开新窗口后，新页面document.addEventListener visibilitychange事件不生效（谷歌浏览器）
如题目所述,在原来页面中,使用window.open打开新页面链接,新页面中需要实现浏览器窗口切换时,监听当前窗口切换超过几次进行提醒,新窗口监听事件如下 if (document.hidden != ...
attachEvent 与addEventListener到底有什么区别呢？
2019独角兽企业重金招聘Python工程师标准>>> attachEvent 与addEventListener到底有什么区别呢?总结如下: 一.适应的浏览器版本不同 attach ...
addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
HTML5+ document.addEventListener('plusready'不执行解决办法！！！
// 这里可以调用5+ API了,为了更好的兼容性,应该使用以下代码进行判断 if(window.plus){ // 在这里调用5+ API }else{// 兼容老版本的plusready事件 do ...
JQ中$(window).load和$(document).ready()使用，区别与执行顺序
本文内容借鉴http://www.jb51.net/article/107111.htm(阅读原文请跳转此链接!) 一般情况下一个页面响应加载的基本顺序是:域名解析 -> 加载html -> ...
window.onload和$(document).ready(function(){})的区别
前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正. ...
document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
jQuery-$（document）.ready和$（window）.load有什么区别？
本文翻译自:jQuery - What are differences between $(document).ready and $(window).load? What are differenc ...

window.addEventlistener和document.addEventlistener区别

window.addEventlistener和document.addEventlistener区别相关推荐

最新文章

热门文章