共计 3049 个字符,预计需要花费 8 分钟才能阅读完成。
常识储备:
(1)document.addEventListener(event, function, useCapture);
(2)window.addEventListener(event, function, useCapture);
参数具体先盗个图:
参数 | 形容 |
---|---|
event | 必须。形容事件名称的字符串。 |
function | 必须。形容了事件触发后执行的函数。即回调函数。 |
useCapture | 可选。布尔值,指定事件是否 在捕捉或冒泡阶段执行。 |
解释:
1. 第一个参数是监听的事件类型: 常见的事件类型能够参见:HTML DOM 事件
关上页面后能够看到许多常见的事件:
留神:应用时,去掉前缀 on,如:我要监听点击事件时,间接:document.addEventListener(’click’,callback(),[true || false])
不须要应用前缀!
2. 第二个参数为回调函数,即监听到后就触发这个函数。
3. 第三个参数是 bool 值,能够是 true 或者是 false,能够依据传入的值来指定事件的执行形式。
给个例子:
<!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 时,先弹窗再看到页面内容。
【名词解释】
1. 捕捉:事件捕捉,从 dom 构造上到下,window.addEventListener 先 document.addEventListener 被捕捉。
2. 冒泡:事件冒泡,从 dom 构造底层向上传递,document.addEventListener 先于 window.addEventListener 被触发。
在 addEventListener 第三个参数处可指定事件是否在捕捉或冒泡阶段执行。// 这里的 element 示意了下面的增加监听不止只有 window 和 document,也能够是任何元素,一般 HTML 通过 getElement 获取元素,vue 中能够通过 ref 获取该元素,相应的增加点击事件。element.addEventListener(【参数 1】event,【参数 2】function(){ },【参数 3】// true - 事件句柄在捕捉阶段执行 | |
// false- 默认, 事件句柄在冒泡阶段执行 | |
) |
题外扩大:
事件的流传:
* 对于事件的流传是历史遗留问题,由前网景公司和微软公司有不同的了解而收回。
- 微软公司认为事件应该是由外向外流传,也就是当事件触发时,应该先触发以后元素上的事件,而后再向以后元素的先人元素上流传,也就说事件应该在冒泡阶段执行。
- 网景公司认为事件应该是由内向内流传的,也就是以后事件触发时,应该先触发以后元素的最外层的先人元素的事件.而后在向内流传给后辈元素。
-W3C 综合了两个公司的计划,将事件流传分成了三个阶段(当初浏览器执行的默认规范):
1. 捕捉阶段:在捕捉阶段时,从最外层的先人元素,向指标元素进行事件的捕捉.然而默认此时不会触发事件。
2. 指标阶段:事件捕捉到指标元素,捕捉完结,开始在指标元素上触发事件。
3. 冒泡阶段:事件从指标元素向他的先人元素传递,顺次触发先人元素上的事件。
无关捕捉冒泡的深一点点的探索,请看我的另一篇博文:HTML Dom 事件流传:冒泡与捕捉探索
注释:
一. 监听滚动事件:
// 函数 showbtn | |
showbtn(){ | |
let that = this | |
if(document.body.scrollTop > 400 || document.documentElement.scrollTop > 400||window.pageYOffset>400){that.s_bTop=true}else{that.s_bTop=false} | |
}, | |
// 监听函数 this.showbtn | |
window.addEventListener("scroll",this.showbtn,true);// 监听到 document 滚动则触发函数 showbtn |
二、鼠标滑动事件:
// 函数 is_showNav | |
is_showNav(e) { | |
e = e || window.event; | |
let that = this; | |
if (e.wheelDelta) { // 判断浏览器 IE,谷歌滑轮事件 | |
if (e.wheelDelta > 0) { // 当滑轮向上滚动时 | |
console.log("ie 谷歌 滑轮向上滚动") | |
} | |
if (e.wheelDelta < 0) { // 当滑轮向下滚动时 | |
console.log("ie 谷歌 滑轮向下滚动"); | |
} | |
} else if (e.detail) { //Firefox 滑轮事件 | |
if (e.detail> 0) { // 当滑轮向上滚动时 | |
console.log("Firefox 滑轮向上滚动"); | |
} | |
if (e.detail< 0) { // 当滑轮向下滚动时 | |
console.log("Firefox 滑轮向下滚动"); | |
} | |
} | |
} | |
// 滚轮事件只有 firefox 比拟非凡,应用 DOMMouseScroll; 其余浏览器应用 wheel【注:mousewheel 已废除,不倡议应用】上面两个能够同时应用,因为如果没有此事件,就不会触发,IE 谷歌没有 DOMMouseScroll 则不会触发,火狐有些版本没有 wheel 所以,为了兼容,两个都能够用。//DOMMouseScroll 监听火狐 | |
window.addEventListener("DOMMouseScroll",this.is_showNav,true) | |
//wheel 监听 IE 谷歌 | |
window.addEventListener("wheel",this.is_showNav,true); |
运行后果:谷歌 edge 浏览器:
三、待更新……
火狐浏览器: