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 οnclick="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会获得更新

未完待续

转载于:https://www.cnblogs.com/ZackBee/p/6869123.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值