事件和事件处理程序

Posted 2020-12-31 alaner

事件：用户或浏览器自身执行的某种动作。诸如：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元素方法

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

1 <input type="button" id="btn" value="click me" >
2 <script type="text/javascript">
3     var btn=document.getElementById("btn");
4     btn.onclick=function(){
5       console.log("clicked");
6     };
7 </script>
8  //clicked

 

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

• DOM2节点方法

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

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

1 <input type="button" id="btn" value="click me" >
2 <script type="text/javascript">
3     var btn=document.getElementById("btn");
4     btn.addEventListener("click",function(){
5         alert(this.id);
6     },false);
7 </script>
8  //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方法。

 1 <input type="button" id="btn" value="click me" >
 2 <script type="text/javascript">
 3     var btn=document.getElementById("btn");
 4     btn.addEventListener("click",function(){
 5         alert(event.type);   //click
 6     },false);
 7     btn.onclick=function(){
 8         alert(event.type);  //click
 9     };
10 </script>

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

 1 <input type="button" id="btn" value="click me" >
 2 <script type="text/javascript">
 3     var btn=document.getElementById("btn");
 4     var hander=function(event){
 5         switch(event.type){
 6             case "click":{
 7                 alert("clicked!");
 8                 break;
 9             }
10             case "mouseover":{
11                 event.target.style.backgroundColor="red";
12                 break;
13             }
14             case "mouseout":{
15                 event.target.style.backgroundColor="";
16                 break;
17             }
18         }
19     };
20     btn.onclick=hander;
21     btn.onmouseover=hander;
22     btn.onmouseout=hander;
23 </script>

 

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

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

 1 <input type="button" id="btn" value="click me" >
 2 <script type="text/javascript">
 3     var btn=document.getElementById("btn");
 4     btn.onclick=function(event){
 5         alert("clicked");
 6         event.stopPropagation();
 7     };
 8     document.body.onclick=function(){
 9         alert("clicked");
10     };
11 </script>

 

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