DOM事件处理

最新推荐文章于 2023-07-05 22:21:38 发布

z_Sherry

最新推荐文章于 2023-07-05 22:21:38 发布

阅读量523

点赞数

分类专栏： javaScript基础

本文链接：https://blog.csdn.net/z_Sherry/article/details/47255837

版权

javaScript基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<span style="font-size:14px;"><span style="font-family: KaiTi_GB2312; background-color: rgb(255, 204, 204);">一、事件流</span></span>

可以形象理解为：当我们指向一组同心圆的圆心时，所指的其实是这一组同心圆，而不只是同心圆组中位于最里层的圆

1.事件冒泡：触发事件的标签（即最里层的标签）最先感知到事件的发生，然后逐层向外传递事件，

2.事件捕获：与事件冒泡的感知方向正好相反，现在很少用

二、事件处理程序

1.HTML事件处理程序

在html标签中设置触发事件、并调用js方法

<span style="font-size:14px;">  <input id="btn1" type="button" value="点我" οnclick="showMessage"/>
  <script type="text/javascript">
     function showMessage(){
          alert("html事件处理被触发");
     }
  </script><span style="white-space:pre">	</span></span>

缺点：html和js的耦合度太高，不利于更改

2.DOM0级事件处理程序（较传统的方式）

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

<span style="font-size:14px;"><input id="btn2" type="button" value="点我"/>
  <script type="text/javascript">
     var btn=document.getElementById("btn2");
     btn.οnclick=function(){
          alert("html事件处理被触发");
     }
     btn.οnclick=null;//事件触发动作的取消
  </script></span>

用的较多的方法，简单，跨浏览器优势

优点：一个按钮上可以添加多个事件处理程序，也可以添加多个事件

3.DOM2级事件处理程序

定义了两个方法：addEventListener和removeEventListener

接收三个参数：要处理的事件名、作为事件处理程序的函数名（触发的函数名）、bool值（为false时代表以事件冒泡形式触发）

<span style="font-size:14px;">   <input id="btn3" type="button" value="点我"/>
   <script type="text/javascript">
<pre name="code" class="javascript" style="font-size: 18px;">       function showMessage(){
             alert("html事件处理被触发");
        }
       var btn=document.getElementById("btn3");
       btn.addEventListener("click",showMessage,false);//注意：这里的事件名称没有"on"  
<pre name="code" class="javascript" style="font-size: 18px;">       btn.removeEventListener("click",showMessage,false);//删除事件（addEventListener添加的事件只能这样删除）
   </script></span>

优点：一个按钮上可以添加多个事件处理程序，也可以添加多个事件（同DOM0）

缺点：不适用于IE浏览器

4.IE事件处理程序

定义了两个方法：attachEvent和detachEvent

接收两个参数：要处理的事件名、作为事件处理程序的函数名（触发的函数名）--IE8及更早的版本只支持事件冒泡

<span style="font-size:14px;">   <input id="btn4" type="button" value="点我"/>
   <script type="text/javascript">
<pre name="code" class="javascript">       function showMessage(){
             alert("html事件处理被触发");
        }
       var btn=document.getElementById("btn4");
       btn.attachEvent("onclick",showMessage);
<pre name="code" class="javascript">       btn.de<span style="font-family: KaiTi_GB2312;">tachEvent</span>("onclick",showMessage);//删除事件
   </script></span>

适用于IE和Opera

5.浏览器兼容的解决

封装一个对象，对象中封装两个方法--添加句柄和删除句柄，方法传入三个参数：事件类型、触发的元素、事件处理函数

<span style="font-size:14px;"><input id="btn5" type="button" value="点我"/>
   <script type="text/javascript">
<pre name="code" class="javascript" style="font-family: KaiTi_GB2312;">       var eventUtil={//封装一个对象，用于实现跨浏览器的事件处理
          //添加句柄（方法）--type：事件类型；element：触发的元素；func：触发的函数；
          addHandler:funtion(type,element,func){//这里传进来的type，是不带"on"的
              if(element.addEventListener){//这里要以属性的形式判断，addEventListener、不是addEventListener()
                 <span style="font-family: KaiTi_GB2312;">element.addEventListener(type,func,false);</span>
              }else if(element.attachEvent){
<pre name="code" class="javascript" style="font-size: 18px; font-family: KaiTi_GB2312;">                 element.attachEvent("on"+type,func);
              }else{//否则，用DOM0级方式处理--element.οnclick=func形式
                 element["on"+type]=func;//由于传进来的type不带on，这里要加上。ps：所有的element.οnclick===element['onclick']
              }
          }
<pre name="code" class="javascript" style="font-size: 18px;"><pre name="code" class="javascript" style="font-family: KaiTi_GB2312;">         //删除句柄（方法）--type：事件类型；element：触发的元素；func：触发的函数；
          removeHandler:funtion(type,element,func){
              if(element.removeEventListener){
                 <span style="font-family: KaiTi_GB2312;">element.removeEventListener(type,func,false);</span>
              }else if(element.detachEvent){
                 element.detachEvent("on"+type,func);
              }else{//否则，用DOM0级方式处理--element.οnclick=func形式
                 element["on"+type]=null;
              }
          }
       }
    var btn=document.getElementById("btn5");
<pre name="code" class="javascript" style="font-size: 18px;">    function showMessage(){
             alert("html事件处理被触发");
        }

    //调用举例
    eventUtil.addHandler("click",btn,showMessage);
    eventUtil.removeHandler("click",btn,showMessage);
   </script></span>

三、事件对象（event）

IE8之前的浏览器，要用window.event获取事件，其它浏览器可以直接用event（也可以用e,ev）获取。直接获取的就是我们用鼠标或键盘所做的操作（即事件）。

1.DOM中的事件对象

常用属性：

type：用于获取事件类型

target：用于获取事件目标（即事件来自于哪个元素--event.target.nodeName可以获取到当前事件所属标签的名称）

常用方法：

stopPropagation()：用于阻止事件冒泡

preventDefault()：用于阻止事件的默认行为（如：对于<a>标签，除了我们给它添加的事件外，它还有一个自己默认的行为，就是href链接跳转。如果对于我们指定的事件，我们只希望执行自己指定的函数，而不执行默认的href跳转，我们就需要在事件触发的函数中，添加event.preventDefault();这个语句，用来阻止默认跳转行为发生）

2.IE中的事件对象

常用属性：

type：用于获取事件类型

srcElement：用于获取事件目标（即事件来自于哪个元素）

cancelBubble：用于阻止事件冒泡（阻止时，设置cancelBubble=true;）

returnValue：用于阻止事件的默认行为（默认为true，要阻止默认行为时，设置returnValue=false;）

<span style="font-size:14px;"><span style="font-family: monospace; font-size: 18px; white-space: pre; background-color: rgb(240, 240, 240);"><input id="btn6" type="button" value="点我"/></span>
<script type="text/javascript">
<pre name="code" class="javascript" style="font-family: KaiTi_GB2312;">       var eventUtil={//封装一个对象，用于实现跨浏览器的事件处理
          //添加句柄（方法）--type：事件类型；element：触发的元素；func：触发的函数；
          addHandler:funtion(type,element,func){//这里传进来的type，是不带"on"的
              if(element.addEventListener){//这里要以属性的形式判断，addEventListener、不是addEventListener()
                 <span style="font-family: KaiTi_GB2312;">element.addEventListener(type,func,false);</span>
              }else if(element.attachEvent){
                 element.attachEvent("on"+type,func);
              }else{//否则，用DOM0级方式处理--element.οnclick=func形式
                 element["on"+type]=func;//由于传进来的type不带on，这里要加上。ps：所有的element.οnclick===element['onclick']
              }
          },
<pre name="code" class="javascript"><pre name="code" class="javascript" style="font-family: KaiTi_GB2312;">         //删除句柄（方法）--type：事件类型；element：触发的元素；func：触发的函数；
          removeHandler:funtion(type,element,func){
              if(element.removeEventListener){
                 <span style="font-family: KaiTi_GB2312;">element.removeEventListener(type,func,false);</span>
              }else if(element.detachEvent){
                 element.detachEvent("on"+type,func);
              }else{//否则，用DOM0级方式处理--element.οnclick=func形式
                 element["on"+type]=null;
              }
          },
        getEvent:function(event){
<span style="white-space:pre">	</span>      return event?event:window.event;
          },
        getType:function(event){
              return event.type;
          },
        getElement:function(event){
              return event.target || event.srcElement;
          },
        preventDefault:function(event){
              if(event.preventDefault){
                   event.preventDefault();
              }else{
                   event.returnValue=false;
              }
          },
        stopPropagation:function(event){
<pre name="code" class="javascript" style="font-size: 18px;"><pre name="code" class="javascript" style="font-family: KaiTi_GB2312;">              if(event.stopPropagation){               
<pre name="code" class="javascript" style="font-size: 18px; font-family: KaiTi_GB2312;">                   event.stopPropagation();
              }else{
                   event.cancelBubble=true;
              }
          }
       }
    //调用举例
    var btn=document.getElementById("btn6");
    eventUtil.addHandler("click",btn,function(e){//这里的e，就是获取的事件对象
        e=eventUtil.getEvent(e);//防止浏览器不兼容，再次获取事件e（将e传到我们封装好的方法里，从而转换为我们希望得到的e。如果不经过这步转换，很可能因为浏览器不兼容，而无法获得e对象）
        eventUtil.getElement(e);//这里传入的就是我们转换后的e了
    });
</script></span>