JS事件
1、首先,什么是事件?
JavaScript和Html发生交互是通过事件来实现的,事件,就是文档或浏览器窗口发生一些特定的交互的瞬间
2、什么是事件流?
事件流就是,事件传播的过程。
DOM中完整的事件流包括了三个阶段:事件捕获阶段
、目标阶段
和事件冒泡阶段
事件通过捕获到达目标元素,这个时候就是目标阶段,从目标节点元素将事件上传到根节点的构成阶段,冒泡阶段
3、关于事件冒泡以及事件捕获
- 事件冒泡,也就是自下而上,从目标触发的元素逐级向上传播,直至window对象
也就是从document逐级向下传播到目标元素,但是有与IE浏览器的限制,很少使用到事件捕获
后来ECMAScript在DOM2中对事件流进行了进一步规范,基本上就是上述二者的结合。
DOM2级事件规定的事件流包括三个阶段: (1)事件捕获阶段 (2)处于目标阶段 (3)事件冒泡阶段
3、关于DOM事件的处理
当我们在DOM节点中添加了事件之后,就需要对事件进行处理,而DOM事件的处理主要是分为4各级别:
- DOM0级事件
- DOM1级事件
- DOM2级事件
- DOM3级事件
把一个函数赋值给一个事件处理程序属性
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
alert("hello world");
}
btn2.onclick = null; //移除事件处理程序
DOM2事件机制
同样的事件和事件流机制下的相同方法只会触发一次。
为当前元素创建一个事件池,把所有需要绑定的方法存储到事件池中,当事件触发的时候,到对应的事件池中找到对应的方法 依次执行 即可
let oDiv = document.getElementById("div1");
function fn() {
console.log("fn");
return "100"
}
oDiv.addEventListener("click", function () {
console.log("fn");
}, false);
oDiv.addEventListener("click", fn1, false);
oDiv.removeEventListener("click", function () {
console.log("fn");
}, false);
备注:
其中DOM1级事件处理标准中并没有定义相关的内容,所以没有所谓的DOM1事件处理;
DOM3
级事件是在DOM2级事件的基础上添加了更多的事件类型。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)