JS中的事件监听与事件流——阅读js高级程序设计

时间:2022-11-18 22:41:27

事件监听:

  使用监听器(eventListener)来预定事件,在传统软件工程中称成为观察者模式

  执行某种操作时(特定的交互瞬间),会产生对象,对象会沿事件流的方向传播。

 事件流:

  事件流有两种顺序,事件捕获流以及事件冒泡流
  事件捕获是从大到小,事件冒泡是从小到大。

<html>
<body>
<div>
<a></a>
</div>
</body>
</html>

  如果你点了div,事件冒泡流的顺序就是div->body->html-document(理论上),

  事件捕获流的顺序就是document->html->body->div(注意不会传到a,因为没

  点到,如果只点击div你给a加上处理点击事件的处理程序,是不会触发a的处理程序的)

DOM2级事件

“DOM2级事件”规定的事件包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

元素上定义属性
1.直接在HTML中定义
  <a onclick="alert('zack');"></a>
2.在js中定义
  element.onclick = function(){alert("zack");};
  添加事件监听(addEventListener)
  element.addEventListener("click", function(){alert("zack"), boolean}
这些事件处理程序的定义方法都属于事件监听,将一个元素加入事件监听

element.addEventListener(),表示该元素对某个事件进行监听(订阅)

当事件发生时,该元素如果没有其他的影响,可以通过监听从事件流得到事件。

  比如为上面的a元素添加对click事件的事件监听处理程序,当click发生且能够传播到a元素时,

就会对该事件做出相应的处理,处理程序不限于作用在a元素上

事件对象

  事件对象event是一个全局对象,记录了事件发生的各种事情,当事件发生时,事件对象event会获得更新

未完待续