JavaScript系列之事件详解

JavaScript简单入门能够看看我丑丑的Github博客JavaScript简单入门

事件

JavaScript与HTML之间的交互是经过事件实现的。事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件流

事件流描述的是从页面中接收事件的顺序。
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

事件捕获

事件开始时是由较为不具体的节点接收，而后逐级向下传播到最具体的节点 。

事件冒泡

事件开始时是由最具体的节点接收，而后逐级向上传播到较为不具体的节点。

DOM事件流

“DOM2级事件”规定事件流包括三个阶段：

事件捕获阶段 -->  处于目标阶段 -->  事件冒泡阶段

● 事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，而后依次传递给body，最后到达目的节点（即事件目标）
● 事件冒泡：事件到达事件目标以后不会结束，会逐层向上冒泡，直至document对象，跟事件捕获相反

例如单击页面div

事件处理程序

事件是用户或浏览器自身执行的某种动做，如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头。
为事件指定事件处理程序的方法主要有3种。

html事件处理程序

事件直接加在DOM元素上。

//原生函数
<input type="button" value="click me!" onclick="alert('clicked!')" />
//自定义函数
<input  onclick="myAlert()"  type="button" value="click me!" />
<script type="text/javascript">
    function myAlert(){
        alert("谢谢支持");
    }
</script>

DOM0级事件处理程序

把一个函数赋值给一个事件处理程序属性。

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

DOM2级事件处理程序

DOM2级事件处理程序能够为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()。
优势:

1. 能够绑定多个事件。
2. 能够解除相应的绑定

• addEventListener

elementObject.addEventListener(eventName,handle,useCapture); IE8及如下不支持，属于DOM2级的方法，可添加多个方法不被覆盖

• removeEventListener

经过addEventListener添加的事件处理程序必须经过removeEventListener删除，且参数一致。

<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特有

• attachEvent
  elemObject.attachEvent("eventName", functionReference); IE特有，兼容IE8及如下，可添加多个事件处理程序，只支持冒泡阶段

useCapture：（可选）指定事件是否在捕获或冒泡阶段执行。true，捕获。false，冒泡。默认false。

• detachEvent

经过attachEvent添加的事件处理程序必须经过detachEvent方法删除，且参数一致。

兼容写法示例

function addEvent(obj,type,handle){
    try{  
    // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
        obj.addEventListener(type,handle,false);
    }catch(e){
        try{  
        // IE8.0及其如下版本
            obj.attachEvent('on' + type,handle);
        }catch(e){  
        // 早期浏览器
            obj['on' + type] = handle;
        }
    }
}

取消事件

• 给对象的事件属性赋值为null，可取消此事件的全部注册过的处理事件程序。

document.body.onclick=null;     //onclick属性赋值为null，至关于注销了onclick事件

• 阻止经过on这种方式绑定的事件的默认事件

ele.onclick = function() {
    return false;              //经过返回false值阻止默认事件行为
};

阻止事件

阻止事件冒泡

标准事件对象是e.stopPropagation()，IE则使用e.cancelBubble = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.stopPropagation();   
});
//IE
btn.attachEvent("onclick", function(event) {
    event.cancelBubble = true;  
});

阻止默认事件

标准事件对象使用preventDefault()，IE则使用returnValue = true/false

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
    event.preventDefault(); 
});
//IE
btn.attachEvent("onclick", function(event) {
    event.returnValue = false;
});

事件对象

事件在浏览器中是以对象的形式存在的，即event。触发一个事件，就会产生一个事件对象event，该对象包含着全部与事件有关的信息。
部分属性以下：

1. type属性，被触发的事件的类型
2. target属性，直接事件目标，真正触发事件的目标
3. currentTarget属性，其事件处理程序当前正在处理事件的那个元素

在事件处理程序内部，对象this始终等于currentTarget的值，而target则是包含事件的实际目标。

DOM中的事件对象

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        console.log(event); 
    }
    btn.addEventListener("click", function (event) {
        console.log(event); 
    },false);

IE中的事件对象

• 经过DOM0级方法添加事件处理程序时，event对象做为window对象的一个属性存在

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.onclick= function () {
        var event=window.event;
       console.log(event); 
    }
</script>

• 经过attachEvent()添加的事件处理程序，event对象做为参数传入

<input id="btn" type="button" value="click"/>
<script>
    var btn=document.getElementById("btn");
    btn.attachEvent("onclick", function (event) {
        console.log(event);
    })
</script>

部分属性以下：

1. srcElement属性，事件的目标（与DOM中的target属性相同）

兼容性处理

function showMsg(event){
    event = event || window.event;  
    var ele = event.target || event.srcElement; 
    ......
 }

事件处理程序中this

IE事件处理程序中this的值等于 window 对象，而在标准事件绑定当中，this的值等于被绑定的元素。

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

事件委托

利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果，解决事件处理程序过多问题。
事件委托优势：

1. 提升JavaScript性能。事件委托能够显著的提升事件的处理速度，减小内存的占用
2. 动态的添加DOM元素，不须要由于元素的改动而修改事件绑定。

<ul id="color">
    <li>red</li>
    <li>orange</li>
    <li>yellow</li>
    <li>green</li>
</ul>
<script>
    (function(){
        var color = document.getElementById("color");
        color.addEventListener('click', showColor, false);
        function showColor(e) {
            e = e || window.event;
            var targetElement = e.target||e.srcElement;
            if (targetElement.nodeName.toLowerCase()==="li") {
                alert(targetElement.innerHTML);
            }
        }
    })();
</script>