javascript--事件流

此文写给那些你还不够真正了解js-event基础的学生。
首先说下什么是事件流,事件流表示总页面中接收事件的顺服。
1.IE的事件流叫做事件冒泡,即事件总最底层向上扩展;
2.NC团队提出的事件流叫做事件捕获,刚好与IE的相反。
然而DOM2级事件定义了事件流的三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。
这里注意在DOM事件流中,实际目标在捕获阶段是不会接受到时间的。
看下图就明白了:

《javascript--事件流》


事件处理程序

现在我们说下事件处理程序:

1.HTML事件处理程序

指定事件处理程序,会创建一个封装着元素属性的含糊,这个函数中有个局部变量event–时间对象,在函数内部this值就是事件的目标元素;
还有一点,他扩展作用域的方式,他可以使用with向外延生作用域链,这样可以访问外部变量很便利。

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

不过缺点也是有的,
第一时差问题,如果用户触发点击事件时,事件处理程序还不具备触发条件时会报错,
第二扩展的作用域链在不同浏览器也存在差异。

2.DOM0级事件处理程序

其实这个没什么好说的,简单说下好了,就是首先取得dom的引用,然后将一个函数赋值给dom引用的一个事件处理程序属性。

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

this可以访问元素的任何属性和方法,事件处理程序在事件流的冒泡阶段处理。

3.DOM2级事件处理程序

DOM2级主要就讲个addEventListener()和removeEventListener(),这里我们注意他们的第三个参数,是一个布尔值,true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序,这里高程没有过多介绍,那么这里具体什么意思,看下面就知道了

// html
// javascript var div = document.getElementById('div'); var btn = document.getElementById('btn'); div.addEventListener("click", function () { console.log('div'); },false); btn.addEventListener("click", function () { console.log('btn'); },false); // 控制台 // 当第三个参数为false -> 冒泡阶段调用程序 // 'btn' // 'div' // 当第三个参数为true -> 捕获阶段调用程序 // 'div' // 'btn'

我想你应该明白了,他们之间的差异了,顺便说几个注意点,removeEventListener()不能用来移除add的匿名事件处理程序,还有addEventListener()可以用来对同一元素添加多个事件处理程序。


总结
写完之后,感觉这也没啥…

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注