DOM事件

最新推荐文章于 2022-03-10 09:19:05 发布

xitingweiyu

最新推荐文章于 2022-03-10 09:19:05 发布

阅读量221

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xitingweiyu/article/details/51836592

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先了解以下几个概念：
（1）事件流：描述的是从页面接受数据的顺序。
（2）事件冒泡：是指事件从最确定的元素逐级向上传播到最不确定的元素的顺序触发。
（3）事件捕获：事件捕获与事件冒泡方向相反，是从最不确定的元素逐级向下传播到最确定的对象的顺序触发。
冒泡事件与捕获事件
（4）HTML事件处理程序：直接把事件添加在html中，缺点：html与js耦合程度高，在修改代码时成本高。

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id = "btn" onclick="showMessage()">
    </div>

<script>
   function showMessage(){
       alert("hello!");
   }
</script>
</body>

</html>

一、DOM中的事件处理

1、DOM0级事件处理程序

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id = "btn" >
    </div>

<script>

   //DOM0添加点击事件
    var btn = document.getElementById('btn');
    btn.onclick = function(){
       alert("这是DOM0添加的事件！");
   }

    //删除事件
    btn.onclick = null;
</script>
</body>
</html>

2、DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作。
addEventListener()和removeEventListener().
两个函数都是接收三个参数：要处理的事件名、作为处理程序的函数和布尔值（false:事件冒泡，true:事件捕获）

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id = "btn" >
    </div>

<script>
    function showMessage(){
      alert("这是通过DOM2添加的事件！");
    }

   //DOM2添加点击事件
    var btn = document.getElementById('btn');
    btn.addEventListener("click",showMessage,false);

    //删除事件
    btn.removeEventListener("click",showMessage,false);

</script>
</body>

</html>

DOM0级和DOM2级可以为元素添加多个事件处理程序。事件处理程序会按照他们的顺序来执行。

3、IE事件处理程序及跨浏览器解决

IE事件处理程序的两个方法
attachEvent()添加事件
detachEvent()删除事件
接收两个参数：事件处理程序的名称和时间处理程序的函数
不使用第三个参数的原因是：IE8以及更早的浏览器版本只支持事件冒泡。

二、DOM中的事件对象

事件对象：在触发DOM上的事件时都会产生一个对象
事件对象event

1、 DOM中的事件对象

（1）type属性用于获取事件类型

function showMessage(event){
      alert("这是通过DOM2添加的事件！");
        alert(event.type);
}

（2） target用于获取事件目标

function showMessage(event){
      alert("这是通过DOM2添加的事件！");
        alert(event.target.nodeName);
}

（3） stopPropagation（）方法用于阻止事件冒泡

<!DOCTYPE html>
<html>
<head>
    <title>事件流</title>
    <meta charset="UTF-8">
</head>
<body>
    <div id="box">
        <input type="button" value="按钮" id = "btn" >
    </div>

<script>
    function showMessage(event){
      alert("这是btn上的点击事件！");
        //阻止事件冒泡
        event.stopPropagation();
    }

    function showBox(){
        alert("这是box上的点击事件！");
    }

   //DOM2添加点击事件
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.addEventListener("click",showMessage);
    box.addEventListener("click",showBox);

   /* //删除事件
    btn.removeEventListener("click",showMessage,false);*/
</script>
</body>
</html>

（4） preventDefault()方法阻止事件的默认行为
超链接

三、IE中的事件对象

type属性用于获取事件类型
srcElement属性用于获取事件目标
cancelBubble属性用于阻止事件冒泡
设置为true表示阻止冒泡设置为false表示不阻止事件冒泡
eturnValue属性用于阻止事件的默认行为
设置为false表示阻止事件的默认行为

四、解决跨浏览器兼容问题

下面js代码写了一些跨浏览器兼容问题的处理方法：

<script>
   var eventUtil = {
       //添加句柄
       addHandler:function (element,type,handler){
           if(element.addEventListener){  //DOM中的添加事件
               element.addEventListener(type,handler,false);
           }else if(element.attachEvent) {//IE中的添加事件
               element.attachEvent('on'+type,handler);
           } else{
               element['on'+type] = handler;
           }
       },

       //删除句柄
       removeHandler:function (element,type,handler){
           if(element.removeEventListener){//DOM中的删除事件
               element.removeEventListener(type,handler,false);
           }else if(element.detachEvent){//IE中的删除事件
               element.detachEvent('on'+type,handler);
           }else{
               element['on'+type] = handler;
           }
       },

       //获取事件
       getEvent:function (event){
           return event?event:window.event;
       },

       //阻止事件的默认行为

       preventDefault:function(event){
           if(event.preventDefault){
               event.preventDefault();
           }else{
               event.returnValue = false;
           }
       },

       //阻止事件冒泡
       stopPropagation : function(event){
           if(event.stopPropagation){
               event.stopPropagation();
           }else{
               event.cancelBubble = false;
           }
       },

       //获取事件类型
       getType : function (event){
           return event.type;
       },

       //获取事件元素
       getElement : function(event){
           return event.target||event.srcElement;
       }
   }
</script

xitingweiyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件

先了解以下几个概念：（1）事件流：描述的是从页面接受数据的顺序。（2）事件冒泡：是指事件从最确定的元素逐级向上传播到最不确定的元素的顺序触发。（3）事件捕获：事件捕获与事件冒泡方向相反，是从最不确定的元素逐级向下传播到最确定的对象的顺序触发。（4）HTML事件处理程序：直接把事件添加在html中，缺点：html与js耦合程度高，在修改代码时成本高。<!DOCTYPE html>
复制链接

扫一扫