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

事件监听：

　　使用监听器（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会获得更新

未完待续

posted @ 2017-05-17 19:01  ZackBee  阅读(366)  评论(0)  编辑  收藏  举报