事件和事件处理程序

Posted alaner

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了事件和事件处理程序相关的知识,希望对你有一定的参考价值。

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

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

 

  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。

以上是关于事件和事件处理程序的主要内容,如果未能解决你的问题,请参考以下文章

将数据从片段发送到活动,无需任何事件处理或侦听器

Android YouTube Player API Fragment无法手动处理触摸事件

响应Activity中的ViewPager2 Fragments事件

将通知设置为在某个用户事件时触发

事件捕获与事件冒泡

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段