DOM（文档对象模型）（三）DOM中的事件

最新推荐文章于 2024-08-27 15:59:21 发布
最新推荐文章于 2024-08-27 15:59:21 发布
阅读量141 收藏 1
点赞数
文章标签： js dom javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/originalApril/article/details/115332884
版权

文章目录

一、事件初识

代码示例：

 	<button id="btn">点击</button>
    <script>
        // 节点+on事件名=匿名函数
        document.getElementById("btn");
        btn.onclick=function(){
            alert("大海全是水")
        }
    </script>

以上是最简单的一个事件绑定代码，点击button时触发下面的函数代码。

二、为一个元素绑定多个事件

1.直接绑定两个事件（不OK）

如下所示，这种写法 后面的alert语句会覆盖前面的；

	<button id="btn">点我</button>

    <!-- 这种写法  后面的alert语句会覆盖前面的 -->
    <script>
        let btn=document.getElementById("btn")
        btn.onclick=function(){
            alert("大海啊，你全是水")
        }
        btn.onclick=function(){
            alert("大海啊，你全是水00011")
        }
    </script>

仅弹出一次alert，结果如下：
在这里插入图片描述

2.attachEvent

       方法一：对象.attachEvent(“有on类型的事件”,事件处理的函数,false)
       谷歌不支持 火狐不支持 IE8以下的浏览器支持

	<button id="btn">点我</button>
	<script>
        var btn=document.getElementById("btn");
        btn.attachEvent("onclick",function(){
            console.log("大海全是水");
        },false)
    </script>

因未安装IE8以下的浏览器，故此处没有测试。

3.addEventListener

       方法二： 对象.addEventListener(“事件类型”,事件处理的函数,false)
       谷歌支持 火狐支持 IE8以下不支持

	<button id="btn">点我</button>
	<script>
        var btn=document.getElementById("btn");
        btn.addEventListener("click",function(){
            alert("大海啊，你全是水")
        })
        btn.addEventListener("click",function(){
            alert("大海啊，你全是水0001")
        })
    </script>

结果如下，依次执行两个点击事件：
在这里插入图片描述
在这里插入图片描述

三、为元素添加兼容的写法

上一章介绍了三种方式绑定多个事件，总结一种兼容式写法：

	<button id='btn'>点击</button>
    <script>
        var btn=document.getElementById("btn")
        // 为任意元素绑定事件，事件类型和处理函数
        function addEventListener(element,type,fn){
            // 判断浏览器是否支持这个方法  火狐 谷歌 IE
            if(element.addEventListener){
                element.addEventListener(type,fn,false)节点.addEventListener()
            }else if(element.attactEvent){
                // IE<=8
                element.attactEvent("on"+type,fn,false)//节点.attachEvent()
            }else{
                element["on"+type]=fn//节点.οnclick=function(){}
            }

        }
        addEventListener(btn,"click",function(){
            alert("大海全是水")
        })
        addEventListener(btn,"click",function(){
            alert("大海全是水0001")
        })
    </script>

测试ok。

四、attachEvent和addEventListener之间的区别?

       相同点: 都可以为元素绑定事件
       不同点:
              1 方法名不一样
              2 参数的个数是不一样的 attachEvent是两个参数 addEventListener是三个参数
              3 addEventListener 谷歌 火狐 IE8 支持 attachEvent IE8以下支持
              4 this指向不同 attachEvent中的指向是window addEventListener表示的是当前绑定事件的对象
              5 一个加on 一个不加on

五、解绑事件

解绑事件 ：
       方法一
               对象.on事件名 = 事件处理函数 —>绑定事件
               对象.on事件名 = null
       方法二
              对象.addEventListener(“没有on的事件类型”,命名函数,false)
              对象.removeEventListener(“没有on的事件类型”,命名函数,false)
       方法三
              对象.attactEvent(“on的事件类型”,命名函数)
              对象.detachEvent(“on的事件类型”,命名函数)
两种方式如下代码：

    <input type="button" value="第一个按钮" id="btn" />
    <input type="button" value="干掉第一个按钮" id="btn2">

    <script>
        var btn=document.getElementById("btn")
        var btn2=document.getElementById("btn2")
     

        // 第一种方式
        // btn.οnclick=function(){
        //     console.log("我是第一个按钮");
        // }
        // btn2.οnclick=function(){
        //     btn.οnclick=null //将btn的点击事件置为空 等于解绑
        // }

        // 第二种方式
        function fn1(){
            console.log("001");
        }
        function fn2(){
            console.log("002");
        }
        btn.addEventListener("click",fn1)
        btn.addEventListener("click",fn2)

        btn2.onclick=function(){
            // 移除绑定事件
            btn.removeEventListener("click",fn1,false)
            btn.removeEventListener("click",fn2,false)
        }
    </script>

六、解绑事件的兼容式写法

    <button id="btn">点击</button>
    <script>
        function removeEventListener(element,type,fnName){
            if(element.removeEventListener){
                element.removeEventListener(element,type,fnName)
            }else if(element.detachEvent){
                element.detachEvent(element,"on"+type,fnName)
            }else{
                element["on"+type]=null
            }
        }
    </script>

补充：
        （1）对象.事件名 对象的写法
       btn.οnclick=function(){ }

       （2）对象[‘事件名’] 数组的写法
       btn[‘onclick’]=function(){ }
总结: 以上两种写法是等价的

七、事件冒泡

事件冒泡: 多个元素嵌套 有层次关系 这些元素都注册了相同的事件 如果里边的元素事件触发了 外边的元素的事件就会自动由内向外触发。
为了便于精简代码，引入了一个my.js文件，里面是对getElementById（）方法的封装。
代码如下：

// 获取ID节点
function $(id){
    return document.getElementById(id)
}

事件冒泡示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        #div1{
            width:300px;
            height:200px;
            background-color: red;
        }
        #div2{
            width:250px;
            height:150px;
            background-color: green;
        }
        #div3{
            width:200px;
            height:100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <script src="./my.js"></script>
    <script>
     	//事件冒泡的第一种写法  当addEventListener的第三个删除为false时，表示事件冒泡
		//$("div1").addEventListener("click",function(){
        //    console.log(this.id);
        //},false)
        //$("div2").addEventListener("click",function(){
        //    console.log(this.id);
        //},false)
        //$("div3").addEventListener("click",function(){
        //    console.log(this.id);
        //},false)
        
    	//事件冒泡的第二种写法
        $("div1").onclick=function(){
            console.log(this.id);//div1
        }
        $("div2").onclick=function(){
            console.log(this.id);//div2
        }
        $("div3").onclick=function(){
            console.log(this.id);//div3
        }
       
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

八、事件捕获

当addEventListener的第三个参数是true时，表示事件捕获。事件捕获是从外到里触发事件。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        #div1{
            width:300px;
            height:200px;
            background-color: red;
        }
        #div2{
            width:250px;
            height:150px;
            background-color: green;
        }
        #div3{
            width:200px;
            height:100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
    <script src="./my.js"></script>
    <script>
        $("div1").addEventListener("click",function(){
            console.log(this.id);
        },true)
        $("div2").addEventListener("click",function(){
            console.log(this.id);
        },true)
        $("div3").addEventListener("click",function(){
            console.log(this.id);
        },true)
   
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

九、阻止事件冒泡

如何阻止事件冒泡？
       （1）IE浏览器特有的 谷歌火狐不支持 window.event.cancelBubble=true
       （2）e.stopPropagation() 谷歌和火狐支持

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        #div1{width:300px;height:200px;background-color: red;}
        #div2{width:250px;height:150px;background-color: green;}
        #div3{width:200px;height:100px;background-color: blue;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div> 
    <script src="my.js"></script>
    <script>
        $("div1").addEventListener("click",function(){
         console.log(this.id)
        },false)

        $("div2").addEventListener("click",function(e){
         console.log(this.id)
         e.stopPropagation();
        },false)
        
        $("div3").addEventListener("click",function(e){
         console.log(this.id)
         e.stopPropagation();
        },false)
    </script>
</body>
</html>

结果如下，点击哪个div哪个div的点击事件触发：
在这里插入图片描述

十、事件阶段

       关于事件阶段
               1 代表事件捕获阶段 由外到内
               2 代表事件目标阶段 最开始选择的那个
               3 代表事件冒泡阶段 从里到外
       可以通过e.eventPhase这个属性知道当前的事件是什么阶段的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width:300px;height:200px;background-color: red;}
        #div2{width:250px;height:150px;background-color: green;}
        #div3{width:200px;height:100px;background-color: blue;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div> 
</body>
<script src="my.js"></script>
<script>
    var objs=[$("div1"),$("div2"),$("div3")];

    // 遍历注册事件
    for(var i in objs){
        // console.log(i);
        objs[i].addEventListener("click",function(e){
            console.log(this.id+"=========>"+e.eventPhase);
        })
    }
</script>
</html>

结果如下：
在这里插入图片描述

十一、一个元素绑定多个不同的事件指向同一个事件处理函数

示例：

	<input type="button"  id="btn" value="一个按钮"  >
    <script src="my.js"></script>
    <script>
        //为同一个元素绑定多个不同的事件 指向相同的事件处理函数
        $("btn").onclick=f1;
        $("btn").onmouseover=f1;
        $("btn").onmouseout=f1;

        function f1(e){
            // e.type能够获取事件类型
            switch (e.type){
                case "click":
                    console.log("单击了按钮");
                    break;
                case "mouseover":
                    console.log("鼠标经过按钮");
                    break;
                case "mouseout":
                    console.log("鼠标离开了按钮");
                    break;
            }
        }
    </script>

结果如下：
在这里插入图片描述

十二、关于事件的多重绑定

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
    <style>
        #demo{
            width:150px;
            height:150px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <script>
        var demo=document.getElementById("demo");
        demo.addEventListener("click",function(){
            console.log("click");
        },false)
        demo.addEventListener("mousemove",function(){
            console.log("mousemove");
        },false)
        demo.addEventListener("mouseout",function(){
            console.log("mouseout");
        },false)
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

总结

一、 关于事件阶段
       1 事件捕获阶段 由外到内
        2 事件目标阶段 最开始选择的那个
        3 事件冒泡阶段 从里到外
二 、阻止事件冒泡
       为元素绑定事件
       addEventListener
       事件触发的过程中 可能会出现事件冒泡 为了阻止事件冒泡

      window.event.cancelBubble=true  
      window.event就是一个对象,是IE的标准  

      e.stopPropagetion() 阻止事件冒泡 ------ 谷歌火狐标准

      window.event 和e都是事件参数对象 一个是IE标准 一个是火狐和谷歌标准

三、 一般情况默认的都是冒泡 很少用捕获
       可以通过 e.eventPhase 这个属性能够知道现在事件所处的阶段
              冒泡阶段: 从里到外
              捕获阶段: 从外向里

小召小召
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文档对象模型DOM通俗讲解
09-04
文档对象模型（DOM）是Web开发中的一个关键概念，它为HTML和XML文档提供了一个结构化的表示，并允许程序和脚本动态地访问和更新文档内容、结构和样式。DOM是独立于语言的标准，这意味着任何支持DOM的编程语言都可以...
常用手册 DOM文档对象模型.chm
05-25
通过阅读《常用手册 DOM文档对象模型》，开发者不仅可以深入理解DOM的基本概念，还能掌握实际操作DOM的技巧，从而提高网页和应用程序的交互性和动态性。此外，对于学习前端开发和Web应用的人员来说，这是一份非常...
DOM 文档对象事件模型及示例
danning之道
04-12 2494
DOM Level 2 中介绍的模块之一是Events模块，它指定一个方法来处理DOM文档中的事件。 早期的版本的浏览器中内置的事件模块使用了事件处理程序，这些处理程序作为属性附在元素之上。当需要动态地依附在元素上和从元素中删除时，使用这个方法就会很不方便。另外，使用这种模块把每个事件处理程序附在非Element节点上是不可能的，这是因为只有Element可以具有属性。 注意：IE
dom（document object model）文档对象模型事件
萧十一郎博客
03-29 466
dom（document object model）文档对象模型事件
14.DOM(文档对象模型)-dom事件
Mr_LiuP的博客
02-22 371
JavaScript -dom事件
JS文档对象模型（DOM）事件的类型与事件对象
m0_63851202的博客
11-24 465
事件的三要素 元素、事件类型、事件对象 事件对象的作用 携带着相关事件类型的所有属性和方法 ps：事件对象的产生，必须有事件；根据需求，事件对象可有可无。 调用事件对象的写法： document.onclick=function(evt){ var e=evt||event; console.log(e)} 鼠标事件对象的属性 e.pageX/e.pageY——针对整个页面的左顶点 e.clientX/e.clientY——针对可视窗口的左顶点 e.offsetX/e.offsetY——
文档对象模型DOM和自定义对象以及事件
weixin_33769207的博客
05-11 87
2019独角兽企业重金招聘Python工程师标准>>> ...
解析XML中的树形结构与DOM文档对象模型
09-24
以上知识点总结了XML中的树形结构和DOM文档对象模型的核心概念和用途，以及如何使用JavaScript来操作DOM以解析XML文档。这些知识点在前端开发、数据交换格式设计等领域具有广泛的应用，是每一位IT专业人员需要掌握的...
Dom文档对象模型-2010
08-15
Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。
DOM(文档对象模型)
JustinNeil的博客
06-04 1465
DOM概念 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 ...
前端基础----JavaScript（DOM、事件）
weixin_58545784的博客
06-28 643
DOM：Document Object Model--文档对象模型，是浏览器提供的一套专门用来操作网页内容的功能，可以开发网页特效和实现用户交互。removeChild() ：删除（并返回）当前节点的指定子节点。appendChild()：向节点的子节点列表的结尾添加新的子节点。2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。事件：HTML事件是发生在HTML元素上的”事情“。replaceChild()：用新节点替换一个子节点。
JavaScript核心知识第一章---DOM 文档对象模型（含大量案例分析）
m0_60707708的博客
04-15 812
1️⃣ JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发— 响应机制。2️⃣ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：所有元素全部清除样式（干掉其他人）；给当前元素设置样式 （留下我自己）；注意顺序不能颠倒，首先干掉其他人，再设置自己；
DOM模型和事件
xiaoyu_alive的博客
01-26 2358
讲述了JavaScript中DOM模型和事件的相关知识点。
JavaScript
weixin_33916256的博客
04-02 336
JavaScript 数据对象去重 resultData = [ { 'towerName':'AA', 'address':'asss' }, { 'towerName':'AA', 'address':'awsdwasd' }, { 'towerName':'BB', ...
js面试题
热门推荐
dpy521的博客
04-09 1万+
JavaScript 的组成 JavaScript 由以下三部分组成： ECMAScript（核心）：JavaScript 语言基础 DOM（文档对象模型）：规定了访问 HTML 和 XML 的接口 BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法 JS 的基本数据类型和引用数据类型 基本数据类型：undefined、null、boolean、number、string、s...
前端基础-文档对象模型 (DOM)
逍遥云恋
03-26 573
第1章 文档对象模型 (DOM) 1.1 基本概念 DOM是JavaScript操作网页的接口，全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作(增删改查)。 浏览器会根据DOM模型，将结构化文档(比如HTML和XML)解析成一系列的节点， 再由这些节点组成一个树状结构(DOM Tree)。 所有的...
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
最新发布
h2345678的博客
08-27 865
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
JavaScript代码片段
weixin_66128399的博客
08-26 789
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 5950
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
理解DOM：文档对象模型详解
"DOM文档对象模型介绍" DOM文档对象模型（Document Object Model）是网页内容的结构化表示，它提供了一种标准的接口，允许程序员和脚本语言（如JavaScript）来解析、修改和操作HTML或XML文档。DOM是W3C（World Wide...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值