资讯专栏INFORMATION COLUMN

js中的事件流和事件处理程序

forsigner / 1753人阅读

摘要:事件流描述的是从页面中接受事件的顺序。事件流中的事件流是事件冒泡流。顺序是从外向里级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段,其中到是处于目标阶段,如图所示。添加的事件会被逆序执行。

HTML和js之间的交互是通过事件实现的。

事件流描述的是从页面中接受事件的顺序。

事件流

IE中的事件流是事件冒泡流。顺序是从里向外 eg:div-body-html-Document

Netscape Communicator的事件流是事件捕获流。顺序是从外向里 eg:Document-html-body-div

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段,其中3到4是处于目标阶段,如图1所示。

事件处理程序

1.HTML事件处理程序

通过html特性来指定处理事件



function show(){
  alert("hello world")
}

事件处理程序中的代码在执行时,有权访问全局作用域中的任何代码
为什么会这样呢???
通过html特性方式指定的事件处理程序会创建一个封装这元素属性值的函数,这个函数内部可以像访问局部变量一样访问document及钙元素本身的成员,神不神奇?这个函数使用with扩展自己的作用域:

function(){
    with(document){
      with(this){
        //元素属性值
    }
  }
}

2.DOM0级事件处理程序

通过javaScript指定事件处理程序的传统方式,将一个函数赋值给一个事件处理程序属性

var btn=document.getElementById("myBtn")
btn.onclick=function(){
  alert(this.id)
}

删除:

btn.onclick=null;

3.DOM2级事件处理程序

两个方法,一个处理指定事件一个删除,addEventListener()和removeEventListener()。这两个方法分别接受三个参数:
(要处理的事件名、作为事件处理程序的函数、一个布尔值)true表示在捕获阶段调用函数,false表示在冒泡阶段调用,一般使用false,这样可以最大限度地兼容各种浏览器
通过addEventListener()添加的函数只能通过addEventListener()移除,所以,匿名函数无法移除

var btn=document.getElementById("myBtn")
btn.addEventListener("click",function(){
    alert(this.id)
},false)
btn.removeEventListener("click",function(){            //没有用
    alert(this.id)
},false)

调用removeEventListener时与传入addEventListener时的函数不同

var btn=document.getElementById("myBtn")
var handler(){
    alert(this.id)
}
btn.addEventListener("click",handler,false)
btn.removeEventListener("click",handler,false)

4.IE事件处理程序

与DOM中类似,两个方法:attachEvent()和detachEvent(),接受两个参数,同时由于IE8及更早版本只支持事件冒泡,所以通过这两个方法添加的事件处理程序都会被添加到冒泡阶段:
(事件处理程序名称、事件处理程序函数)

var btn=document.getElementById("myBtn")
btn.attachEvent("onclick",function(){
    alert(this===window)    //true
})

此处是onclick而不是click,与DOM方法不同的是这里的事件处理程序会在全局作用域中运行,this等于window。添加的事件会被逆序执行。

5.跨浏览器的事件处理程序

使用EventUtil对象,封装如下:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {   //DOM2级
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {    // IE
            element.attachEvent("on" + type, handler);
        } else {    //DOM0级
            element["on" + type] = handler;
        }
    },
    removeHandler: function (element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
  }

使用如下:

var btn=document.getElementById("myBtn")
var handler=function(){
    alert(clicked)
}
EventUtil.addHandler(btn,"click",handler)
EventUtil.removeHandler(btn,"click",handler)

注:本篇文章内容来自红皮书

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93943.html

相关文章

  • JavaScript 事件——“事件流和事件处理程序”的注意要点

    摘要:事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。事件处理程序的名字以开头,如等。如使用级方法指定的事件处理程序被认为是元素的方法。 事件流 事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流,而Netscape Communicator的事件流是事件捕获流。 事件冒泡 即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点。如: ...

    Amio 评论0 收藏0
  • 《JavaScript高级程序设计》学习笔记:JavaScript中的事件流和事件处理程序

    摘要:可以使用侦听器或处理程序来预订事件,以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。 事件:文档或浏览器窗口中发生的一些特定的交互瞬间。 可以使用侦听器(或处理程序来预订事件),以便事件发生时执行相应的代码。 1. 事件流 事件流:从页面中接收事件的顺序。 ...

    Rocko 评论0 收藏0
  • javascript 之 事件

    摘要:处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时,会产生一个事件对象。 js 是采用异步事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数来处理。事件源:产生事件的地方(html元素,窗口,其他等等);事件:鼠标事件,键盘...

    Forest10 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<