目录:1、事件机制概念2、注册事件监听的办法3、事件操作4、冒泡和捕捉
1、事件机制
问题形容:
1)事件机制是如何起作用的?它跟事件循环机制有何区别?
答:
事件机制辨别于事件循环,它是用户交互层面的,依附的是事件流。
Dom事件流分为 3 个阶段:事件捕捉、达到指标和事件冒泡。事件捕捉最先产生,为提前拦挡事件提供了可能。而后,理论的指标元素接管到事件。最初一个阶段是冒泡,最迟要在这个阶段响应事件。
所以是浏览器时刻监听用户操作,一旦触发了事件,就会触发对应的事件流,这时候如果注册了事件监听函数,就会被触发。如果有多个事件同时触发,就会顺次执行事件响应。
用户通过对固定元素注册事件监听的办法,来手动增加事件响应函数。
2、事件监听的办法
问题形容:
1)几种办法?有何区别?
2) addEventListner的第三个参数?
1)有三种事件监听办法
HTML事件处理办法:特定元素反对的每个事件都能够应用事件处理程序的名字以 HTML 属性的模式来指定。此时属性的值必须是可能执行的 JavaScript 代码,失常会绑定为事件处理函数。这种办法最大的缺点就是将HTML代码和JS代码混用,且当须要事件处理的元素十分多时,不实用。
<input type="button" value="Click Me" onclick="console.log('Clicked')"/>
Dom0事件处理办法:把一个函数赋值给一个事件处理程序属性,它的最大局限是,一个事件只能绑定一个事件处理,若绑定多个,那么前面的会笼罩后面的。
let btn = document.getElementById("myBtn"); btn.onclick = function() { console.log(this.id); // "myBtn" };
Dom2事件处理程序:定义了两个办法:addEventListener()和 removeEventListener()。这两个办法裸露在所有 DOM 节点上,它们接管 3 个参数:事件名、事件处理函数和一个布尔值,true 示意在捕捉阶段调用事件处理程序,false(默认值)示意在冒泡阶段调用事件处理程序。
与办法2不同,addEventListener 能够给一个事件注册多个listener。
let btn = document.getElementById("myBtn"); btn.addEventListener("click", () => { console.log(this.id); }, false);
须要留神的是,removeEventListener的几个参数,必须与addEventListener的保留完全一致,才可能勾销监听。
let btn = document.getElementById("myBtn"); let handler = function() { console.log(this.id); }; btn.addEventListener("click", handler, false); // 勾销btn.removeEventListener("click", handler, false); // 有成果!
2)addEventListener的第三个参数
在旧版本的DOM规定中,第三个参数默认规定为设置以后事件监听是在冒泡(默认)/捕捉阶段执行,它是一个boolean值,默认为false。然而理论目前第三个参数曾经有更简单的配置,它设置为一个叫option的对象,可用选项如下:
3、事件操作
问题形容
1)事件处理的event对象是什么?能获取哪些信息?
答:
无论是哪种监听办法,event是传给事件处理程序的惟一变量,称为事件对象。事件对象蕴含与特定事件无关的属性和办法,其内容视状况不同。然而event事件对象固定蕴含一些公共属性和办法。
4、冒泡和捕捉
问题形容:
1)如果先人元素的事件处理曾经被捕捉,那么子孙还会触发事件监听嘛?
2)捕捉和冒泡各自解除默认行为的办法?
1)答案是必定的
因为事件流三个阶段是固定的,也就是无论是否绑定事件监听和解决,事件都会在事件流的三个阶段通过所有波及到的元素,阻止的办法只有手动的增加阻止默认行为。
2)阻止默认行为的办法
应用event.stopPropagation()能够阻止冒泡和捕捉阶段的默认行为,让后续的元素不受影响。
<script> let ul = document.getElementsByClassName('ulList'); let li1 = document.getElementsByClassName('first'); console.log('ul', ul); ul[0].addEventListener('click', (event) => { event.stopPropagation(); }, false) li1[0].addEventListener('click', (event) => { console.log(event.target); }, false)</script>
另外补充一下,想要阻止元素自身的默认事件响应行为,得用event.preventDefault(),如标签的跳转行为等。
let a = document.getElementById('alink');a.addEventListener('click', (e) => { e.preventDefault();})