当前位置: IT培训 > HTML5培训 > 前端开发 > JS事件流及事件处理程序
JS事件流及事件处理程序 时间:2017-07-17     来源:移动互联网学院

一.什么是事件流

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

IE和Netscape提出了几乎完全相反的事件流概念

IE:事件冒泡(由内而外)

Netscape:事件捕获(由外向内)

DOM2级事件规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段

二.为事件指定处理程序的方式

1.  HTML事件处理程序

<script>

    function fun(){

    alert('clicked');

}</script><button onclick="func()">click me</button>

缺点:1、时差  2、html代码语JavaScript代码耦合紧密,不易改动

2.  DOM0级事件处理程序

获取要操作对象的引用

给对象的事件处理程序属性(如onclick)设置属性值为函数

以这种方式添加的事件会在事件流的冒泡阶段被处理

var btn=document.getElementById('btn');

btn.onclick=function(){

    alert(1);

}

删除DOM0级事件处理程序:

btn.onclick = null;

3.  DOM2级事件处理程序

var btn=document.getElementById("btn");

btn.addEventListener("click",function(){

    alert("hello");

},false);

三个参数:事件、处理函数、事件处理阶段(true捕获false冒泡)

大的优点:可以为一个对象添加多个事件,不会相互覆盖,而是按某种顺

序依次执行移除事件:

var btn=document.getElementById("btn");function fun(){

    alert("hello");

}

btn.addEventListener("click",fun,false);

btn.removeEvemtListener("click",fun,false);

注意:removeEventListener()不能移除匿名函数,像下面这样也是无效的:

var btn=document.getElementById("btn");

btn.addEventListener("click",function(){

    alert("hello");

},false);

btn.removeEventListener("click",function(){

    alert("hello");

},false);

添加和移除的被认作两个不同的函数

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以大程度兼容各种浏览器

4.  IE事件处理程序

IE8-浏览器值支持事件冒泡

有两个类似的方法:attachEvent()和detachEvent()

var btn=document.getElementById("btn");

function fun(){

    alert(this===window);//true

}

btn.attachEvent("click",fun);

btn.detachEvent("click",fun);

三.总结

DOM2级和IE事件处理程序有何不同之处?

作用域:DOM2级事件处理与DOM0事件处理一样,作用域在当前元素(btn)的作用域中,IE事件处理程序的作用域是全局:window;

参数:个数不同,IE事件处理程序只支持冒泡;

是否有'on':DOM2无:'click',IE有:'onclick';

都支持添加多个事件,但执行顺序相反:DOM2按添加顺序,IE相反。

X