事件

2018-05-30  本文已影响9人  米诺zuo 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event Exam</title>
</head>
<body>
    <div id="event" onclick="test()"></div>

</body>
</html>

一、事件流，三种事件流。
事件即用户或浏览器自身执行的某种动作。
1.事件冒泡 IE中的事件流
click事件由近即远 div--body--html--document


冒泡事件.png

2.事件捕获
document--html--body--div


捕获流.png

3.DOM事件流
捕获事件事件到body层就停止了，不会传到div层，然后开始事件冒泡在传回document。


DOM事件流.png 
IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流；IE8及更早版本不支持DOM事件流。

二、事件处理程序
即响应某个事件的函数就叫做事件处理程序。事件处理程序的名字以"on"开头。
1.HTML事件处理程序
直接在html中绑定事件

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

这样会创建一个封装着元素属性值的函数，该函数中有一个局部变量event，也就是事件对象。

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

通过event变量，可以直接访问事件对象，在这个函数内部，this值等于事件的目标元素。

<!--输出 Click Me -->
<input type="button" value="Click Me" onclick="alert(this.value)" />

event 函数内扩展作用域的方式

可以输出value
 <input type="button" value="Click Me" onclick="alert(value)" />
<form method="post">
        <input type="text" name="username" value="">
        <input type="button" onclick="alert(username.value)">
</form>

缺点：
存在一个时差问题。因为用户可能会在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。
这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。不同JavaScript引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。
HTML与JavaScript代码紧密耦合。

2.DOM0级事件处理程序
对每个事件只支持一个事件处理程序

var btn = document.getElementById("myBtn");
btn.onclick = function () {
    alert(this.id);
}
//删除点击事件
btn.onclick = null;

 <input type="button" value="Click Me" onclick="null" />
如果使用HTML指定事件处理程序，将相应的属性值设置为null，也可以删除以这种方式指定的事件处理程序。

3.DOM2级事件处理程序
“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数：

btn.addEventListener("click",function () {
    alert(this.id);
},false)
btn.addEventListener("click",function () {
    alert("hello World");
},false)

优点：使用DOM2可以添加多个事件处理程序，按添加方法的顺序执行。

移除点击事件，需要将定义的事件提出来，移除的事件和添加的事件应为同一个事件。

function handle() {
        alert(this.id);
}
btn.addEventListener("click",handle,false)
btn.removeEventListener("click",handle,false)

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

4.IE事件处理程序
IE中实现了与DOM中类似的方法，attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都被添加到冒泡阶段。

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

在IE中使用attachEvent()和在DOM0级方法的主要区别
在于事件处理程序的作用域。attachEvent()的事件处理程序在全局中作用域运行，在DOM0级方法的情况下，事件处理程序是局部的。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
      alert(this==window);//true
})
btn.attachEvent("onclick",function(){
      alert("Hello World");
})
//与DOM方法不同的事，IE中不是按添加方法的顺序执行，而是相反的执行，先输出Hello World,在输出true

attachEvent()添加的方法可以用detachEvent()方法移除，条件是必须提供相同的参数，与DOM方法一致，不能删除匿名函数。

支持IE事件处理程序的浏览器只有IE和Opera。

5.跨浏览器的事件处理程序
三、事件对象
1.DOM的事件处理对象
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。

var btn = document.getElementById("myBtn");
btn.onclick = function (event) {
    alert("点我");
}
event属性2.png event属性.png

只有在事件处理程序执行期间，event对象会存在，一旦时间处理程序执行完，event对象就会被销毁。

2.IE中的事件对象
使用DOM0级方法添加事件处理程序时，event对象作为window对象的属性存在。
使用attachEvent()添加的，就会有一个event对象作为参数被传入事件处理函数。
3.跨浏览器的事件对象
四、事件类型

//load 事件 两种添加方式，EventUtil为跨浏览器的事件对象。
在body元素上加onload="alert('hello')"事件，
EventUtil.addHandler(window, "load", function(event){
            alert("Loaded!");
});
//unload 事件，用户从一个页面切换到另一个页面触发。
在body元素上加onunload="alert('hello')"事件，
EventUtil.addHandler(window, "unload", function(event){
            alert("Loaded!");
});
//resize事件，当浏览器被调整到一个新的高度或宽度时，会触发。
EventUtil.addHandler(window, "resize", function(event){
           var event = EventUtil.getEvent(event);
           var pageX = event.pageX;
           var pageY = event.pageY;
});
//scroll 事件
EventUtil.addHandler(window, "scroll", function(event){
            alert("Loaded!");
});

2.焦点事件

3.鼠标事件和滚轮事件
DOM3级事件中定义了9个鼠标事件：

mouseleave，mouseenter不能冒泡
IE9之后的执行顺序，IE8及之前会跳过第二个mousedown和click事件
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick

  1. 键盘与文本事件

5.复合事件
IE9+支持。

6.变动事件
DOM2级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示。

7.HTML5事件

EventUtil.addHandler(window, "contextmenu", function(event){
        var event = EventUtil.getEvent(event);
        event.preventDefault();//禁用鼠标默认事件，比如右击
});

//需要鼠标触发window对象，即事件的对象。
EventUtil.addHandler(window, "beforeunload", function(event){
    var event = EventUtil.getEvent(event);
    var msg = "你确定要离开吗？";
    event.returnValue = msg; //事件的返回信息是给用户的提示信息。
    return msg;
});

8.设备事件

9.触摸与手势事件

五、内存与性能
在javascript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
原因：
每个函数都是对象，都会占用内存。
内存的对象越多，性能就越差。
事件委托
事件委托利用了事件冒泡，只指定一个事件，就能管理某一类型的所有事件。

  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;

在使用事件时，需要考虑如下一些内存与性能方面的问题。

上一篇 下一篇

猜你喜欢

热点阅读