Javascript中事件机制详解

最新推荐文章于 2023-03-11 10:30:00 发布

NINE-NINE

最新推荐文章于 2023-03-11 10:30:00 发布

阅读量809

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_38099607/article/details/73012469

版权

javascript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

事件流

事件流描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。
事件冒泡
IE的事件流叫做事件冒泡，即事件开始由最具体的元素接收，然后逐级向上传播到较不具体的节点：

<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

如果单击了id为inner的元素，那么这个click事件会按照如下顺序传播：

(1)#inner
(2)#outer
(3)body
(4)html
(5)document

也就是说click事件先在我们单击的元素上发生，然后click事件沿DOM树向上传播，在第一级节点上都会发生，直到传播到document对象。
所有现代浏览器都支持事件冒泡，但是在具体实现上还是有细微的差别，IE5.5及更早的版本中的事件冒泡会跳过元素（从直接跳到document）,IE9、Firefox、Chrome和Safari则一直将事件冒泡到window对象。
事件捕获
事件捕获的思想是不太具体的事件应该更早收到事件，而最具体的事件应该最后接收到事件。事件捕获的用意在于事件达到预定目标之前捕获它。

<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

同样的例子，现在单击id为inner的元素那么这个click事件会按照如下顺序传播：

(1)document
(2)html
(3)body
(4)#outer
(5)#inner

在事件捕获过程中，document对象首先接收到click事件，然后事件沿DOM树依次向下，一直传播到事件的实际目标。
现在IE9、Firefox、Chrome、Opera和Safari也都支持这种事件流模型，尽管“DOM2级事件”规范要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件。
DOM事件流
”DOM2级事件“规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。还是以上面的代码为例，单击inner则会按照下面的顺序触发事件：

(1)document
(2)body
(3)#outer
(4)#inner
(5)#outer
(6)body
(7)html
(8)document

在DOM事件流中，实际的目标inner在捕获阶段不会接受到事件。这意味着在捕获阶段，事件到outer就停止了，下一个阶段是“处于目标”阶段，于是事件在inner 上发生，并在事件处理中呗看成是冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

事件处理程序

响应某个事件的函数叫做事件处理程序（事件侦听器）。
事件处理程序的名字以”on”开头，因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。
为事件指定事件处理程序的方法主要有3种。
一、html事件处理程序
事件直接加在html元素上。
这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合，修改时即要修改html也要修改js。
这种方式也有两种方法：
第一种：直接在html中定义事件处理程序及包含的动作。

<input type="button" value="click me!" onclick="alert('clicked!')"/>

第二种：html中定义事件处理程序，执行的动作则调用其他地方定义的脚本。

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

二、DOM0级事件处理程序
把一个函数赋值给一个事件处理程序属性。
这种方法简单而且跨浏览器，但是只能为一个元素添加一个事件处理函数。因为这种方法为元素添加多个事件处理函数，则后面的会覆盖前面的。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.onclick=function(){
        alert("clicked!");
    }
</script>

删除事件处理程序：

myBtn.onclick=null;

三、DOM2级事件处理程序
DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。所有的DOM节点都包含这2个方法。
这两个方法都需要3个参数：事件名，事件处理函数，布尔值。
这个布尔值为true,在捕获阶段处理事件，为false，在冒泡阶段处理事件，默认为false。
添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
    myBtn.addEventListener("click",function(){
        alert("world");
    },false);
</script>

删除事件处理程序：通过addEventListener添加的事件处理程序必须通过removeEventListener删除，且参数一致。通过addEventListener添加的匿名函数将无法删除。下面这段代码将不起作用！

myBtn.removeEventListener("click",function(){
        alert("world");
    },false);

应该这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler=function(){
        alert("hello");
    }
    myBtn.addEventListener("click",handler,false);
    myBtn.removeEventListener("click",handler,false);
</script>

四、IE事件处理程序
IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。
这两个方法都需要两个参数：事件处理程序名称和事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。注意是事件处理程序名称而不是事件名称，所以要加上on，是onclick而不是click。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handlerIE=function(){
        alert("helloIE");
    }
    var handlerDOM= function () {
        alert("helloDOM");
    }
    myBtn.addEventListener("click",handlerDOM,false);
    myBtn.attachEvent("onclick",handlerIE);
</script>

添加事件处理程序：现在为按钮添加两个事件处理函数，一个弹出“hello”,一个弹出“world”。

<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert("hello");
    });
    myBtn.attachEvent("onclick",function(){
        alert("world");
    });
</script>

**注意：**IE8以下浏览器中先弹出“world”，再弹出“hello”。和DOM中事件触发顺序相反。
IE9及以上浏览器先弹出“hello”，再弹出“world”。和DOM中事件触发顺序相同了。
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除，且参数一致。和DOM事件一样，添加的匿名函数将无法删除。所以为了能删除事件处理程序，代码可以这样写：

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    var handler= function () {
        alert("hello");
    }
    myBtn.attachEvent("onclick",handler);
    myBtn.detachEvent("onclick",handler);
</script>

注意： IE事件处理程序中还有一个地方需要注意：作用域。
使用attachEvent()方法，事件处理程序会在全局作用域中运行，因此this等于window。而dom2或dom0级的方法作用域都是在元素内部，this值为目标元素。

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.attachEvent("onclick",function(){
        alert(this===window);  //true
    });
</script>

跨浏览器的事件处理程序

所以为了兼容IE浏览器和标准的浏览器，我们需要编写通用的方法来处理：

var EventUtil = {

    addHandler: function( element, type, handler ){
        if( element.addEventListener ){
            element.addEventListener( type,handler,false );
        }else if( element.attachEvent ){
            element.attachEvent( "on" + type, handler );
        }else{
            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;
        }
    }
};

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
跨浏览器的事件对象

var EventUtil={
    //获取javascript下的页面事件对象
    getEvent:function(event){
        return event||window.event;
    },
    //获取事件源
    getTarget:function(event){
        return event.target||event.srcElement;
    },
    //取消事件的默认行为
    preventDefault:function(){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue=false;
        }
    },
    //取消事件冒泡
    stopPropagation:function(){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble=true;
        }
    },
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
             element["e"+type]=function(){
              handler.call(element)
          }
            element.attachEvent("on"+type,element["e"+type]);
        }else{
            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,element["e"+type]);
  element["e"+type]=null;   
        }else{
            element["on"+type]=null;
        }
    }

  };