Javascript事件流详解

1.事件流

      描述的是从文档页面接受事件的顺序。

      冒泡事件流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。

      捕获事件流:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

2.事件处理程序

    (1)HTML事件处理程序

    (2)DOM0级事件处理程序

             较为传统的方式:把一个函数值赋值给一个事件处理程序的属性。这种方法用的比较多,主要是因为它简单而且支持跨浏览器;

    (3)DOM2级事件处理程序

           DOM2级的事件定义了两个方法:用于处理指定和删除事件处理程序的操作。分别是addEventListener()和removeEventListener()两个方法,接收三个参 数:要处理的事件名(无‘on’),作为事件处理程序的函数,布尔值(冒泡还是捕获)

          DOM0、DOM2级都可以给一个元素添加多个事件和多个事件处理程序,其中多个事件处理程序按照添加顺序执行。

    (4)IE事件处理程序

         分别是添加事件attachEvent()和删除事件detachEvent(),接收两个参数:事件处理程序的名称(有‘on’)和事件处理程序的函数;

         支持IE事件处理程序的浏览器有:IE和Opera

         不使用第三个参数的原因是:IE8及更早的浏览器版本只支持事件冒泡。

    (5)跨浏览器事件处理程序

         恰当的使用能力检测,有什么样的能力你就用什么样的能力

3.事件对象

     在触发DOM上的某个事件时,都会产生一个事件对象event。只有在事件处理程序执行期间,event对象才会存在;一旦事件处理程序执行完成,event对象就会被销毁。
   (1).DOM中的事件对象(兼容DOM的浏览器会将一个event对象传入到事件处理程序中)
          ①、type属性:用于获取事件类型;
          ②、target属性:用于获取事件目标;
          ③、stopPropagation()方法:用于阻止事件冒泡;
          ④、preventDefault()方法:阻止事件的默认行为;
   (2).IE中的事件对象
          ①、type属性:用于获取事件类型;
          ②、srcElement属性:用于获取事件的目标;
          ③、cancelBubble属性:用于阻止事件冒泡;
          ④、returnValue属性:用于阻止事件的默认行为;
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。