网站建设费用组成,企业营销网站建设步骤,网页设计做一个网站,谢馥春网站建设的优势文章简介
本篇文章为【JavaScript 漫游】专栏的第 022 篇文章#xff0c;对 JavaScript 中事件模型相关的知识点进行了总结。
监听函数
浏览器的事件模型#xff0c;就是通过监听函数#xff08;listener#xff09;对事件做出反应。事件发生后#xff0c;浏览器监听到… 文章简介
本篇文章为【JavaScript 漫游】专栏的第 022 篇文章对 JavaScript 中事件模型相关的知识点进行了总结。
监听函数
浏览器的事件模型就是通过监听函数listener对事件做出反应。事件发生后浏览器监听到了这个事件就会执行对应的监听函数。这是事件驱动编程模式event-driven的主要编程方式。
JavaScript 有三种方法可以为事件绑定监听函数。
HTML 的 on- 属性元素节点的事件属性EventTarget.addEventListener()
HTML 的 on- 属性
HTML 语言允许在元素的属性中直接定义某些事件的监听代码。
body onloaddoSomething()
div onclickconsole.log(触发事件)注意这些属性的值是将会执行的代码而不是一个函数。
!-- 正确 --
body onloaddoSomething()!-- 错误 --
body onloaddoSomething一旦指定的事件发生on- 属性的值是原样传入 JavaScript 引擎执行。因此如果要执行函数不要忘记加上一对圆括号。
使用这个方法指定的监听代码只会在冒泡阶段触发。
div onclickconsole.log(2)button onclickconsole.log(1)点击/button
/div直接设置 on- 属性与通过元素节点的 setAttribute() 设置 on- 属性效果是一样的。
el.setAttribute(onclick, doSomething());
// 等同于
// Element οnclickdoSomething()元素节点的事件属性
元素节点对象的事件属性同样可以指定监听函数。
window.onload doSomething;div.onclick function (event) {console.log(触发事件);
};使用这个方法指定的监听函数也是只会在冒泡阶段触发。
它和 HTML 的 on- 属性的差异是它的值是函数名 doSomething而不像后者必须给出完整的监听代码 doSomething()。
EventTarget.addEventListener()
所有 DOM 节点实例都有 addEventListener()用来为该节点定义事件的监听函数。
window.addEventListener(load, doSomething, false);小结
上面三种方法第一种“HTML 的 on- 属性”违反了 HTML 与 JavaScript 代码相分离的原则将两者写在一起不利于代码分工因此不推荐使用。
第二种“元素节点的事件属性”的缺点在于同一个事件只能定义一个监听函数也就是说如果定义两次 onclick 属性后一次定义会覆盖前一次。因此也不推荐使用。
第三种 EventTarget.addEventListener() 是推荐的指定监听函数的方法。它有如下优点
同一个事件可以添加多个监听函数能够指定在哪个阶段捕获阶段还是冒泡阶段触发监听函数除了 DOM 节点其他对象比如 window、XMLHttpRequest 等也有这个接口它等于是整个 JavaScript 统一的监听函数接口。
this 的指向
监听函数内部的 this 指向触发事件的那个元素节点。
事件的传播
一个事件发生后会在子元素和父元素之间传播propagation。这种传播分成三个阶段。
第一阶段从 window 对象传导到目标节点上层传导底层称为捕获阶段capture phase第二阶段在目标节点上触发称为目标阶段target phase第三阶段从目标节点传导回 window 对象从底层传回上层称为冒泡阶段bubbling phase
这种三阶段的传播模型使得同一个事件会在多个节点上触发。
divp点击/p
/div事件的代理
由于事件会在冒泡阶段向上传播到父节点因此可以把子节点的监听函数定义在父节点上由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理delegation。
var ul document.querySelector(ul);ul.addEventListener(click, function (event) {if (event.target.tagName.toLowerCase() li) {// some code}
});如果希望事件到某个节点为止不再传播可以使用事件对象的 stopPropgation 方法。
// 事件传播到 p 元素后就不再向下传播了
p.addEventListener(click, function (event) {event.stopPropagation();
}, true);// 事件冒泡到 p 元素后就不再向上冒泡了
p.addEventListener(click, function (event) {event.stopPropagation();
}, false);stopPropgation 方法只会阻止事件的传播不会阻止该事件触发 p 节点的其他 click 事件的监听函数。也就是说不是彻底取消 click 事件。
p.addEventListener(click, function (event) {event.stopPropagation();console.log(1);
});p.addEventListener(click, function(event) {// 会触发console.log(2);
});如果想要彻底取消该事件不再触发后面所有 click 的监听函数可以使用 stopImmediatePropgation 方法。
p.addEventListener(click, function (event) {event.stopImmediatePropagation();console.log(1);
});p.addEventListener(click, function(event) {// 不会被触发console.log(2);
});
