JavaScript笔记：事件

ゞ浴缸里的玫瑰 2022-07-17 16:13 146阅读 0赞

JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或者浏览器窗口中发生一些特定的交互瞬间。可以使用侦听器来预定时间，以便事件发生的时候，执行相应的代码。

## 1、事件流 ##

首先要明确的概念：当你点击了一个按钮，那么，点击事件将不止发生在按钮上，同时也发生在按钮的所有父级元素上。事件流，描述的是从页面中接受时间的顺序。

1、事件冒泡

即事件由最具体的元素接受，然后逐级向上传递。  
例如下面这样的页面结构：

<!DOCTYPE html>
    <html>
    <head>
       <title>Event Bubbling Example</title>
    </head>
    <body>
       <div id="myDiv">Click Me</div>
    </body>
    </html>

如果你点击了div，那么事件就会从div开始，div 》body 》html 》document这样传递上去。所有的现代浏览器都支持事件冒泡。

2、事件捕获

事件捕获的事件顺序和事件冒泡正好相反，最父级的元素将最先接收到事件，然后依次向下传递。大多数浏览器也都支持事件捕获。

3、DOM事件流

DOM2级事件规定的事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获阶段，为截获事件提供了机会，然后是实际目标接受到事件，最后是事件冒泡阶段，可以在这个阶段对事件作出相应。还以前面的html页面为例，单击div会按照如下的顺序触发事件：document–html–body–div–body–html–document。  
在DOM事件流中，实际的目标div在捕获阶段不会接收到事件。  
即使DOM2级事件规范明确要求在捕获阶段时不会涉及到事件目标，但是IE9、Safari、Chrome、Firefox一季Opera 9.5和更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两个机会在目标对象上面操作事件。

## 2、事件处理程序 ##

事件，就是用户或者浏览器执行的某种动作。例如：click、load、mouseover等都是事件的名字。而响应某个事件的函数就叫做事件处理程序。

1、HTML事件处理程序

某个元素支持的每种事件，都可以用和事件处理程序同名的HTML性质确定，这个特性的值应该是可以执行的JS代码：

或者，函数可以单独写在JS代码片中：

这样指定事件处理程序有一些独到之处。首先，这样会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，也就是事件对象。

<input type="button" value="Click Me" onclick="alert(event.type)" />
    // 输出click

同时，在函数内部this指针等于事件的目标函数：

<input type="button" value="Click Me" onclick="alert(this.value)">

上面这段代码可以化简为如下所示：

<input type="button" value="Click Me" onclick="alert(value)">

另外，如果当前元素是一个表单输入元素，它还可以访问其他表单字段：

不过，在HTML中指定事件处理程序存在缺点：

存在一个时差的问题。因为用户可能在HTML元素一出现就点击，触发事件，但是事件处理函数可能是在页面底端写的，那么此时，就会出现错误。为此，很多HTML事件处理程序都被放在try-catch块中，不让错误浮出水面：

2、DOM0级事件处理程序

通过JS指定事件处理程序的传统方式：

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

需要注意，在这段代码执行前，事件处理程序不会被指定。因此若代码在页面中位于按钮的后面，可能在有一段时间内，点击按钮无法实现功能。

使用DOM0级的事件处理程序被认为是元素的方法，因此，这时候事件处理方法是在元素的作用域内执行，可以使用this来访问元素。

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

另外，事件处理程序也可以被删除：

btn.onclick = null;

2、DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有的DOM节点中都包含着两个方法，并且该方法接受三个参数：要处理的事件名，作为事件的处理程序，和一个布尔值。布尔值是真表示：在捕获阶段调用程序；是假则表示，在冒泡阶段调用程序。并且事件可以添加多个。代码示例：

var btn = document.getElementById("myBtn");
    btn.addEventListener("click", function(){ 
        alert(this.id);
    }, false);
    btn.addEventListener("click", function(){ 
        alert("Hello world!");
    }, false);

通过addEventListener添加的函数可以通过removeEventListener函数移除，移除时传入的参数和添加的方法相同。但是需要注意的是，想上面那样添加的匿名函数是无法移除的。  
如果想要移除，需要这样定义：

var btn = document.getElementById("myBtn");
    var handler = function(){ 
        alert(this.id);
    };
    btn.addEventListener("click", handler, false);
    //一些其他的操作
    btn.removeEventListener("click", handler, false);

注意，一般都把事件添加在冒泡阶段，这样可以最大限度的兼容浏览器。

4、IE事件处理程序

IE中实现了两个与DOM类似的方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数，事件处理名称和事件处理函数。由于IE8以前只接受冒泡，所以通过attachEvent添加的函数都是在冒泡阶段被执行。

var btn = document.getElementById("myBtn");
    btn.attachEvent("onclick", function(){ 
        alert("Clicked");
    });

attachEvent方法和addEventListener方法的主要区别在于事件处理函数的作用域不同，前者的作用域是全局作用域，也就是说，在函数中使用this是window。

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

在跨浏览器编写代码时，这一点非常重要。  
使用attachEvent方法也可以为事件添加多个函数：

var btn = document.getElementById("myBtn");
    btn.attachEvent("onclick", function(){ 
        alert("Clicked");
    });
    btn.attachEvent("onclick", function(){ 
        alert("Hello world!");
    });

不过，与DOM程序不同的是，函数出发的次序是后绑定的先触发。  
使用attachEvent添加的方法可以通过detachEvent函数移除。同样的，匿名函数添加了就无法移除。

var btn = document.getElementById("myBtn");
    var handler = function(){ 
        alert("Clicked");
    };
    btn.attachEvent("onclick", handler);
    // 其他功能代码
    btn.detachEvent("onclick", handler);

5、跨浏览器的事件处理函数

为了以跨浏览器的方式处理事件，不少开发人员会使用隔离浏览器差异的JS库，还有一些人会自己开发最适合的浏览器处理方法。其实跨浏览器只要适当的使用能力检测即可。要保证处理的事件在大部分浏览器中能正常运行，只需关注冒泡阶段。  
一段跨浏览器的实例代码：

## 3、事件对象 ##

在触发DOM某个事件的时候，会产生一个事件对象event，这个对象包含着与事件有关的全部信息。包括导致事件的信息，事件的类型等等。例如，鼠标点击事件的事件对象包含着鼠标点击的位置，而键盘导致的事件产生的事件对象则包括按键的信息。所有浏览器都支持event对象，只是，支持方式不同。

1、DOM中的事件对象

兼容DOM的浏览器，会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用的什么方法，都会存在event对象。

var btn = document.getElementById("myBtn");
    btn.onclick = function(event){ 
        alert(event.type); //"click"
    };
    btn.addEventListener("click", function(event){
        alert(event.type); //"click" 
    }, false);

在通过html特性指定处理程序时，变量event中保存着event对象。

在需要一个函数处理多个事件的时候，可以使用event.type属性：

var btn = document.getElementById("myBtn");
    var handler = function(event){
        switch(event.type){
            case "click":
                alert("Clicked");
                break;
            case "mouseover":
                event.target.style.backgroundColor = "red";
                break;
             case "mouseout":
                event.target.style.backgroundColor = "";
                break;
     } };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

要阻止特定事件的默认行为，可以使用preventDefault方法。  
例如，如下代码可以阻止导航链接：

var link = document.getElementById("myLink");
    link.onclick = function(event){ 
        event.preventDefault();
    };

另外，stopPropagation方法用于阻止事件在DOM中的传播。

var btn = document.getElementById("myBtn");
    btn.onclick = function(event){ 
       alert("Clicked");
       event.stopPropagation();
    };
    document.body.onclick = function(event){ 
       alert("Body clicked");
    };

事件对象的eventPhase属性，可以用来确定事件目前处于事件流的哪个阶段。如果是捕获阶段，则该值为1；如果在冒泡阶段，该值为3；如果事件正位于目标上，则该值为2。来看例子：

注意，只有在程序处理过程中，event对象才存在，当事件之行完毕，event对象就会被销毁。

2、IE中的事件对象

与访问DOM中的event不同，要访问IE中的event有几种不同的方式，取决于指定事件处理程序的方法。

在使用DOM0级方法添加事件时，event对象作为window的一个属性存在。

var btn = document.getElementById("myBtn");
    btn.onclick = function(){
       var event = window.event;
       alert(event.type);     //"click"
    };

可是，如果事件是用attachEvent添加的，那么，就会有一个event对象作为参数被传入事件处理程序中。

var btn = document.getElementById("myBtn");
    btn.attachEvent("onclick", function(event){  
        alert(event.type); //"click"
    });

在使用attachEvent的情况下，其实也可以使用window.event来访问事件对象。

如果是实用html特性指定的事件处理程序，那么，同在DOM中的事件模型相同，也可以通过变量event来访问事件对象：

IE的event事件同样也包括与创建它的事件相关的属性和方法：

event.srcElement：事件的目标（等于DOM中的target）  
这里，需要注意作用域和this指向谁的问题：

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

returnValue：默认为true，但是设置成false就可以取消事件的默认行为。与DOM中的preventDefault方法相同。

var link = document.getElementById("myLink");
    link.onclick = function(){ 
        window.event.returnValue = false;//阻止链接默认行为
    };

cancelBubble：与DOM中的stopPropagation相同。

var btn = document.getElementById("myBtn");
    btn.onclick = function(){ 
        alert("Clicked");
        window.event.cancelBubble = true;
    };
    document.body.onclick = function(){ 
        alert("Body clicked");
    };

4、跨浏览器的事件对象实例代码：

## 4、事件类型 ##

事件汇总：  
UI事件  
焦点事件  
鼠标事件  
滚轮事件  
文本事件  
键盘事件  
合成事件  
变动事件

**1、UI事件**

ui事件汇总：  
load，unload，abort，error，select，resize，scroll  
这些事件都被DOM2规定为HTML事件，要确定浏览器是否支持DOM2级规定的HTML事件，可以用如下代码：

var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0");

注意，只有根据DOM2级事件实现这些事件的浏览器才会返回true。

load事件：

方法1:

window.onload = function(event){ 
        alert("嗨");
    };

方法2:

<!DOCTYPE html>
    <html>
        <head>
            <title>Load Event Example</title>
        </head>
            <body onload="alert('Loaded!')">
        </body>
    </html>

图像上也可以指定load事件，同样有两种方式：

var image1 = document.getElementById("myImg");
    image1.onload = function(event){ 
        alert("picture");
    };

关于加载图像的其它代码，这里用到了自定义的变量EventUtil：

注意，新图像不一定是从添加到文档才开始加载，只要为其设置了src元素，图片就会开始加载。  
另外，还有一些元素也支持load,例如script元素：

EventUtil.addHandler(window, "load", function(){ 
        var script = document.createElement("script");
        EventUtil.addHandler(script, "load", function(event){ 
            alert("Loaded");
        });
        script.src = "example.js";
        document.body.appendChild(script);
    });

unload事件：

unload与load事件相互对应，这个事件在文档完全被卸载后触发。只要用户从一个页面切换到另一个页面，这个方法就会被触发。利用该事件，可以及时清除引用，防止内存泄漏。同样，我们可以用两种方式来指定处理事件的函数：

EventUtil.addHandler(window, "unload", function(event){
        alert("Unloaded");
    });
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Unload Event Example</title>
    </head>
    <body onunload="alert('Unloaded!')">
    </body>
    </html>

3、resize事件

当浏览器窗口被调整到一个新的高度或者宽度的时候，就会触发该事件。这个事件在window上触发。

window.onresize = function(){ 
        alert("change");
    }

除了这个方式外，我们也可以通过body元素的onresize属性来指定事件处理程序。  
注意，事件处理函数可能在窗口大小变化的时候反复被触发，所以尽量不要写太过复杂的函数，以免浏览器卡顿。

4、scroll事件

跨浏览器写法：

EventUtil.addHandler(window, "scroll", function(event){
        if (document.compatMode == "CSS1Compat"){
            alert(document.documentElement.scrollTop);
        } else {
            alert(document.body.scrollTop);
        }
    });

**2、焦点事件**

焦点事件会在页面元素得到或者失去焦点时触发。利用这个事件，可以知晓用户在页面的行踪。

有以下6个焦点事件：  
blur：元素失去焦点时触发，该事件不会冒泡。所有浏览器都支持。  
focus：元素获得焦点时触发，这个事件不会冒泡。所有浏览器都支持。  
DOMFocusIn、focusin：元素获得焦点时触发，这个事件会冒泡。  
DOMFocusOut、focusout：元素失去焦点时触发。

要确定浏览器是否支持这些事件，可以用如下方法：

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

**鼠标和滚轮事件**

click：用户单击主鼠标按钮或者键盘回车时触发。  
dblclick：用户双击主鼠标按键时触发。  
mousedown：用户按下鼠标任意按钮触发，键盘不能触发该事件。  
mouseenter：鼠标光标从外部首次移动到元素内部时触发。事件不冒泡，而且鼠标移动到后代元素上不会触发。  
mouseleave：位于元素上方的鼠标光标移动到元素外部后触发，事件不冒泡，而且鼠标移动到后代元素上不会触发。  
mousemove：当鼠标光标在元素内部移动时反复触发。  
mouseout：鼠标光标位于一个元素上方，当用户将光标移入其它元素时，触发该方法。其它元素可以位于该元素内部或者外部。  
mouseover：鼠标指针位于一个元素外部，用户首次将其移入另一个元素边界之内时触发。  
mouse：用户释放鼠标时触发。

检测支持度：

var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");
    //检测所有
    var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")

1、客户区坐标位置

鼠标事件实在浏览器视口中特定位置发生的，这个位置信息保存在事件对象clientX和clientY属性中。所有浏览器都支持这个属性。

var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        alert("Client coordinates: " + event.clientX + "," + event.clientY);
    });

2、页面坐标位置

该组坐标是从页面本身，而非视口开始计算的。

var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        alert("Page coordinates: " + event.pageX + "," + event.pageY);
    });

在鼠标没有滚动的情况下，这两组坐标是相等的。

兼容IE8：

var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        var pageX = event.pageX,
           pageY = event.pageY;
        if (pageX === undefined){
           pageX = event.clientX + (document.body.scrollLeft ||
                   document.documentElement.scrollLeft);
        }
        if (pageY === undefined){
           pageY = event.clientY + (document.body.scrollTop ||
                   document.documentElement.scrollTop);
        alert("Page coordinates: " + pageX + "," + pageY);
    });

3、屏幕坐标位置

相对于整个坐标的位置。

var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "click", function(event){
        event = EventUtil.getEvent(event);
        alert("Screen coordinates: " + event.screenX + "," + event.screenY);
    });

4、修改键

虽然鼠标事件是靠鼠标来触发的，但是点击鼠标时，键盘上某些案件的状态也能影响到所要采取的操作。这些键是：Shift、Ctrl、Alt、Meta（window或者command），它们经常被用来修改鼠标的行为。DOM为此规定了4个属性，表示这些修改键的状态：shiftKey ctrlKey altKey metaKey。这些属性的值都是布尔值，如果相应的按键被按下，那么返回true，否则返回false。  
来看下面的例子：

注意，IE8和以前的版本不支持这四个属性。

5、相关元素

在发生 mouseover mouserout事件时，还会涉及更多的元素。对mouseover而言，事件的主元素就是获得鼠标光标的元素，而相关的元素就是失去光标的元素。类似的mouseout事件而言，主元素就是失去光标的元素，而相关元素就是获得光标的元素。

DOM通过事件对象的relatedTarget提供了相关元素的信息。这个属性只针对事件mouseover mouserout，对于其它事件，这个值就变成了null。IE8之前的版本不支持这个属性，但是有fromElement和toElement保存着相关元素。

6、鼠标按钮

对于 mousedown mouse事件来说，在事件对象中还保存着一个button属性，表示按下或者释放的按钮。该属性可能有三个值：0，表示主鼠标按钮；1，表示中间鼠标按钮（滚轮按钮）；2，表示次鼠标按钮。

IE8和以前版本也提供了button属性，但是却和DOM的button有很大差异：数字表示的意义很不相同，大家可以自行百度～

由于单独使用能力检测无法确定差异（两种模型有同名的button属性），因此，我们必须采取别的方法：

通过检测MouseEvents这个特性，可以确定事件对象中的button属性中是否包含正确的值。

7、更多事件信息

DOM2级事件规范在event对象中还包含detail属性，用于给出事件更多的相关信息。

8、鼠标滚轮事件

当用户使用鼠标滚轮上下滚动时，就会触发mousewheel事件。不管在什么元素上进行鼠标滚轮，该事件都会冒泡到document或window上。与mousewheel事件对应的event对象中，除了有常规鼠标事件的属性外，还有一个wheelDelta属性。当用户向前滚动时，wheelDelta是120的倍数，当用户向后滚动时，wheelDelta是－120的倍数。

Firefox支持一个名为DOMMouseScroll的类似事件，而有关鼠标滚轮的信息则包含在detail属性中。向前滚动，则是-3倍数，向后滚动，则是+3倍数。

9、触摸设备

在面向触屏手机开发时，需要注意：  
不支持dblclick事件。  
轻击可单击元素会触发mousemove事件，如果此操作会导致屏幕变化，则没有其它事件会发生；如果屏幕因此没有变化，则会一次发生mousedown mouseup click事件。轻击不可单击的元素不会触发任何事件。  
mousemove事件也会触发mouseover mouse out事件。  
两个手指放在屏幕上且页面随手指一动会触发mousewheel scroll事件。

**4、键盘与文本事件**

用户在使用键盘时会触发键盘事件。对键盘事件的支持主要遵循的是DOM0级。  
有三个键盘事件：  
keydown：当用户按下键盘上的任意按钮时触发，如果用户按住不放，会重复触发该事件。  
keypress：当用户按下键盘上的字符键时触发，如果用户按住不放，会重复触发该事件。按下esc也会触发该事件。  
keyup：当用户释放键盘上的按键时触发。

只有一个文本事件：textInput。这个事件是对keypress事件的补充，可以在将文本现实给用户以前进行拦截。在文本插入文本框之前，会先触发该事件。

键盘事件和鼠标事件一样，都支持一样的修改键。

1、键码

在发生keydown keyup事件时，event事件的keyCode属性中会包含一个代码，与键盘上的特定键对应。

对于数字和字符键，keyCode的值和ASCII中对应的数字或小写字母的编码相同：例如，a的编码是65。与shift的状态无关。

var textbox = document.getElementById("myText");
    EventUtil.addHandler(textbox, "keyup", function(event){
        event = EventUtil.getEvent(event);
        alert(event.keyCode);
    });

非字符的键码大家可以自行百度。

2、字符编码

发生keypress事件，意味着按下的键，会影响到屏幕上的文本显示。  
IE9 Firefox Chrome Safari都支持一个charCode属性，这个属性只有在发生keypress事件的时候才有值，并且这个值是按下字符键的ascii码。此时keyCode等于0，或者也可能等于charCode的值。  
跨浏览器代码如下：

**5、复合事件**

<待续>

## 5、内存和性能 ##

事件处理程序可以给web应用添加与用户交互的能力，因此，许多开发人员会不分青红皂白的添加许多事件。可是在JS中，添加到页面上的处理程序的数量，会直接影响到页面的整体性能。下面，为大家介绍几种提升性能的方式。

**1、事件委托**

事件委托利用了事件冒泡，只指定一个事件处理程序，来处理一类事件。例如，click事件会一直冒泡到document，也就是说，我们可以为一个页面只指定一个单击的处理程序。

例如，有下面这样一个html代码：

<ul id="myLinks">
        <li id="goSomewhere">Go somewhere</li>
        <li id="doSomething">Do something</li>
        <li id="sayHi">Say hi</li>
    </ul>
    
    // 逐个添加
    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
    
    EventUtil.addHandler(item1, "click", function(event){ 
        location.href = "http://www.wrox.com";
    });
    EventUtil.addHandler(item2, "click", function(event){ 
        document.title = "change";
    });
    EventUtil.addHandler(item3, "click", function(event){ 
        alert("hi");
    });
    
    // 统一添加
    var list = document.getElementById("myLinks");
    EventUtil.addHandler(list, "click", function(event){ 
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        switch(target.id){
            case "doSomething":
                document.title = "I changed the document's title";
                break;
            case "goSomewhere":
                location.href = "http://www.wrox.com";
                break;
            case "sayHi": 9 alert("hi");
                break; 
        }
    });

这样，我们利用事件委托，只给ul元素添加了一个点击事件的处理程序。

**2、移除事件处理程序**

将事件处理程序指定给元素时，运行中的浏览器代码和支持页面交互的JS代码就会建立一个连接。这种连接越多，页面执行起来就越慢。因此，再不需要的时候移除那些无用的事件处理程序（称为：空事件处理程序）也很有必要。

<div id="myDiv">
        <input type="button" value="Click Me" id="myBtn">
    </div>
    <script type="text/javascript"> var btn = document.getElementById("myBtn"); btn.onclick = function(){ //先执行了某些操作 document.getElementById("myDiv").innerHTML = "Processing..."; //Oops,这样不好，因为被移除的元素上还绑定着事件呢！ }; </script>
    
    //正确的做法是，移除元素前：
    btn.onclick = null;

导致空事件处理程序的原因还有一个就是卸载页面的时候。如果页面被卸载之前，没有清理干净事件处理程序，那么这些程序就会滞留在内存中。

因此，在页面卸载之前，最好用onunload事件处理程序移除所有的事件处理程序。