码迷,mamicode.com
首页 > Web开发 > 详细

JS中的事件监听与事件流

时间:2017-05-17 19:57:04      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:记录   监听器   没有   执行   boolean   交互   span   html   on()   

事件监听:

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

未完待续

JS中的事件监听与事件流

标签:记录   监听器   没有   执行   boolean   交互   span   html   on()   

原文地址:http://www.cnblogs.com/ZackBee/p/6869123.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!