事件和事件处理程序

事件：用户或浏览器自身执行的某种动作。诸如：click、load、mouseover等。

事件处理程序（事件侦听器）：响应某个时间的函数。以“on”开头。

 

• html方法：

1. 某个元素支持的每种事件，都可以使用一个与之相应事件处理程序同名的HTML特性来制定。这个特性的值是可以执行的js代码。

例如：要在按钮被单击时执行一些js，可如下：

<input type="button"  value="click me" onclick="alert('我被点击啦')">

         2.可以调用页面其他地方定义的脚本，甚至可以是外部文件中的函数。如：

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

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码。

 注意：事件处理程序会创建一个封装着元素属性值的函数。这个函数中有一个局部变量event，通过event变量，可以访问事件对象。在函数内部，this值等于事件的目标元素。如：

<input type="button"  value="click me" onclick="console.log(this.value)">
//click me

 

• DOM0元素方法

首先，获得要操作的对象引用。每个元素都有自己的事件处理程序属性，这些属性通常小写。然后将这些属性值设置为函数，即可指定事件处理程序。例如：

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

 

删除事件处理程序只需：btn.onclick=null;

• DOM2节点方法

每个节点包含addEventListener()和removeEventListener()方法。

它们接受三个参数：要处理的事件名、作为事件处理程序的函数、布尔值（true情况下在捕获调用，否则在冒泡阶段调用）。

<input type="button" id="btn" value="click me" >
<script type="text/javascript">
    var btn=document.getElementById("btn");
    btn.addEventListener("click",function(){
        alert(this.id);
    },false);
</script>
 //btn

 

注意：通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除，移除时传入的参数需要和添加时的参数相同，这也就意味着通过addEventListener()添加的匿名函数无法移除。

• IE事件处理程序

IE实现了与DOM类似的两种方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称，事件处理程序函数。

注意：第一个参数为on开头的名称。和DOM不同。

它的区别在于：事件处理程序的作用域。在使用DOM0方法，事件处理程序会在所属元素的作用域内运行。而IE方法事件处理程序会在全局作用域中运行，即this=window。

addEventListener()添加的事件处理程序通过removeEventListener()来移除。

支持IE事件处理程序的浏览器：IE,Opera。

事件对象（event）

在触发DOM的某个事件时，会产生一个时间对象event，这个对象包含着所有与事件有关的信息：导致事件的元素、事件的类型等。

兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论事件处理程序是通过DOM0还是DOM2方法。

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

        通过一个函数处理多个事件时，可以使用type属性。如：

<input type="button" id="btn" value="click me" >
<script type="text/javascript">
    var btn=document.getElementById("btn");
    var hander=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=hander;
    btn.onmouseover=hander;
    btn.onmouseout=hander;
</script>

 

        preventDefault() 阻止特定事件的默认行为。

        stopPropagation()立即停止事件在DOM层次中的传播，即取消进一步的事件捕获和冒泡。

<input type="button" id="btn" value="click me" >
<script type="text/javascript">
    var btn=document.getElementById("btn");
    btn.onclick=function(event){
        alert("clicked");
        event.stopPropagation();
    };
    document.body.onclick=function(){
        alert("clicked");
    };
</script>

 

  stopPropagation()方法可以避免触发注册在document.body上面的事件处理程序。如果没有该方法，单击按钮将会弹出两个警告框。添加后，click事件将不会传播到document.body。