DOM以及DOM事件的处理方式

已于 2022-05-26 20:54:43 修改
阅读量1k 收藏 1
点赞数
分类专栏： 前端相关技术 文章标签： javascript 前端 html
于 2022-05-26 16:03:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45583303/article/details/124890680
版权

文章目录

01.DOM概述

Document Object Model （DOM）文档对象模型：将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。

通过 HTML DOM，可访问 HTML 文档的所有元素，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM 模型被构造为对象的树。
在这里插入图片描述
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

02.DOM事件概述

DOM事件：浏览器和用户可以对HTML页面做出某种动作，如浏览器加载页面后，用户点击鼠标时等，我们称这些动作为DOM事件。

事件是用户和页面交互的核心，当动作发生（事件触发）时，我们可以为这个动作（事件类型）绑定一个或多个处理事件的函数，通过这些绑定的函数来完成我们想要实现的功能。

举例如下：当我们点击页面中的请点击我！的时候，会触发一个弹窗事件，弹出hello！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">请点击我！</div>
	</body>
	 <!-- JS代码 -->
	<script type="text/javascript">
		// 通过DOM元素的id选择需要添加事件的DOM元素
	    var root= document.getElementById("root");
	    // 显示在控制台
	    console.log(root);
	    // 给该DOM元素添加一个事件，该事件的类型是onclick点击事件，事件对应的处理函数为弹窗
        root.onclick = function (){
            alert("hello！！！"); 
        };
	</script>
</html>

总结一下，事件的三要素：

  • 事件源（是谁发生了事情）：例子中的div标签
  • 事件类型（发生了什么事）：鼠标点击了该div标签
  • 事件处理函数（怎么应对）：弹出一个弹窗

03. 事件类型

当我们想HTML分配事件的时候，要先确定事件的类型，如上面的例子使用的事件类型就是点击事件。

HTML中的事件类型有很多：鼠标事件，框架/对象事件，表单事件，打印事件，拖动事件，多媒体事件，动画事件，过度事件等。

  • 鼠标事件：点击鼠标发生的事件
  • 表单事件：处理表单使用的事件

具体参考：HTML DOM 事件

下面就演示几个比较简单的鼠标事件：

  • 鼠标点击事件：
    • 事件类型：onclick
    • 功能：当用户双击某个对象时，调用的事件句柄（事件对应的函数）
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">请双击我！</div>
	</body>
	<script type="text/javascript">
	    var root= document.getElementById("root");
        console.log(root);
        root.ondblclick = function (){
            alert("hello！！！"); 
        };
	</script>
</html>
  • 鼠标移动事件：
    • 事件类型：onmouseout
    • 功能：当鼠标从某个元素上移开时，调用的事件句柄（事件对应的函数）
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">从我身上移开！</div>
	</body>
	<script type="text/javascript">
	    var root= document.getElementById("root");
        console.log(root);
        root.onmouseout = function (){
           alert("hello！！！"); 
        };
	</script>
</html>

04.事件对象

每当有事件被触发，浏览器都会记录当前事件触发的详细信息，并把它们封装成一个对象，可以传递给事件处理函数，我们可以获取到该事件对象，事件对象也有自己的属性和方法。

  • 事件属性：
    • target：返回触发此事件的DOM元素
    • type：返回当前事件对象的事件属性。
    • 等等
  • 事件方法：
    • stopPropagation()：不再派发事件
    • 等等

事件绑定方式：

  • element.on+事件类型（type） = function (event){};

举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">事件对象相关的属性和方法验证请在控制台查看！！</div>
	</body>
	<script type="text/javascript">
	    var root= document.getElementById("root");
        root.onmouseout = function (event){
            var event=event || window.event;  // 获取事件对象的兼容处理
            console.log(event); // 打印事件对象本身
            console.log(event.target); // 返回触发此事件的DOM元素
            console.log(event.type);   // 返回当前事件对象的事件属性。
        };      
	</script>
</html>

05.事件的监听

监听绑定方式：

  • element.addEventListener(事件类型,function,boolean);。
  • 同一事件类型可以绑定一个或多个事件处理程序，IE老版本不兼容。
  • 也可以在第二个参数的位置直接使用匿名函数。

举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">点击事件！！</div>
	</body>
	<script type="text/javascript">
	    var root= document.getElementById("root");
		// 点击事件
        root.onclick = function (){
            alert("hello！！")
        }; 
		//给点击事件添加事件监听：只要点击就触发
		root.addEventListener("click",testListener,false);
		function testListener(){
            alert("监听点击事件：onclick")
        }; 
	</script>
</html>

监听解除方式：

  • element.removeEventListener(事件类型,function,false);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">点击事件！！</div>
	</body>
	<script type="text/javascript">
	    var root= document.getElementById("root");
		// 点击事件
        root.onclick = function (){
            alert("hello！！")
        }; 
		//给点击事件添加事件监听：只要点击就触发
		root.addEventListener("click",testListener,false);
		//给点击事件去除事件监听
		root.removeEventListener("click",testListener,false);
		function testListener(){
            alert("监听点击事件：onclick")
        }; 
	</script>
</html>

另外：IE有个独有的方法obj.attchEvent(‘on’+type,function);，功能和监听方式一样。

解除方式是：element.detachEvent(‘on’+type,function);

注意：如果绑定的是匿名函数，则无法解除。

06.事件的捕获和冒泡

事件流：

  • 当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。
  • 即当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。

事件流分类：

  • 冒泡型事件流
  • 捕获型事件流

事件冒泡：事件由子元素传递到父元素的过程叫做冒泡（false）。

  • 事件响应顺序（向上响应）：文本节点–>元素节点—>body—>html—>document

捕获事件：事件由父元素传递到子元素的过程叫做事件捕获（ture）。

  • 事件响应顺序（向下响应）：document–>html–>body–>元素节点–>文本节点

监听方式根据提供的第三个参数设置事件捕获或冒泡：true则在捕获阶段，false则在冒泡阶段（默认）。

举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="father">
			<div id="son">事件的捕获与冒泡</div>
		</div>
	</body>
	<script type="text/javascript">
		// 通过id方式获取父组件
		var father=document.getElementById("father");
		// 通过id方式获取子组件
		var son=document.getElementById("son");

		// 监听的时候绑定的第三个参数是false为冒泡方式，也是默认的方式。
		// 点击后会先弹出：子组件
		// 点击确认后再弹出：父组件

		// 监听的时候绑定的第三个参数是true为捕获方式
		// 点击后会先弹出：父组件
		// 点击确认后再弹出：子组件

		// 监听父组件的点击事件
		father.addEventListener("click",fatherListener,false);
		// 监听子组件的点击事件
		son.addEventListener("click",sonListener,false);

		// 监听之后执行的函数
		function fatherListener(){
            alert("父组件");
        }; 
		function sonListener(){
            alert("子组件");
        }; 
	</script>
</html>

07.阻止事件冒泡的方式

方式一：事件委托

  • 事件委托的功能：当子元素个数很多或不确定，且每个子元素都需要绑定执行类似功能的事件处理函数时，通过在父元素上绑定该事件处理函数，在函数内部获取事件源对象（某子元素），通过事件冒泡机制，确保能让每个子元素在被触发相应事件时，事件处理函数都能被正确执行。

  • 事件对象有两个属性，target或srcElement(IE)，它存储的是事件源对象，即实际触发该事件的对象，不是捕获的，也不是冒泡的，通过事件源对象，可以轻松实现事件委托功能。

  • 举个例子：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="root">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
			</ul>
		</div>	
	</body>
	<script type="text/javascript">
		// 一个数目很多的列表，我们要实现的功能是点击每个li都弹出它自己的内容
		// 通过id方式获取根组件
		var root=document.getElementById("root");
		// 在根组件上绑定函数，根据冒泡机制，当点击子组件时，会以冒泡的形式向上层层触发
		// 在子组件中不做处理，统一委派到根组件处理
		root.onclick = function (event){
			var event = event || window.event;
			// 获取产生事件的对象（子组件本身）
			target = event.target || event.srcElement;
			// 控制台查看
			console.log(target); 
			alert(target.innerText);
		};
	</script>
</html>

方式二：阻止事件冒泡

  • event.stopPropagation()：可以阻止事件冒泡，阻止触发父级元素绑定的事件。
  • 举个例子：
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>demo</title>
	</head>
	<body>
		<div id="father">
			<div id="son">阻止事件冒泡</div>
		</div>
	</body>
	<script type="text/javascript">
		// 通过id方式获取父组件
		var father=document.getElementById("father");
		// 通过id方式获取子组件
		var son=document.getElementById("son");

		// 监听父组件的点击事件
		father.addEventListener("click",fatherListener,false);
		// 监听子组件的点击事件
		son.addEventListener("click",sonListener,false);

		// 监听之后执行的函数
		function fatherListener(){
            alert("父组件");
        }; 
		function sonListener(event){
            alert("子组件");
			event.stopPropagation();   //阻止事件冒泡
        }; 
	</script>
</html>
彤彤的小跟班
关注
专栏目录
DOM的事件处理、Windows的常用事件
weixin_61561066的博客
06-17 812
BOM（Brower Object Model）：浏览器对象模型。独立于内容和浏览器进行交互的对象。核心是window对象（1）DOM（Document Object Model）：文档对象。把文档看做对象，顶级对象（核心对象）是document。（2）BOM（Brower Object Model）：浏览器对象模型。把浏览器看做对象，顶级对象（核心对象）是window。事件三要素：（1）事件源：触发事件的对象；（2）事件类型：出发了什么样类型的事件；（3）事件处理程序：事件被触发后执行的函数（程序段）传统
Javascript处理DOM元素事件实现代码
12-09
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候，onclick=function...
JS DOM处理小结
webdev
08-14 166
DOM即文件对象模型（Document Object Model，简称DOM）， HTML DOM 定义了访问和操作 HTML 文档的标准方法。 个人理解： （1）其实它就是将 HTML 文档以节点（Node）为单位将其表达为等级明确、节构整齐的树节构，以便于简捷地操作文档的元素。 （2）它在一定程度上对HTML（或XML）元素（节点）实现了“黑盒”访问和操作。例如，我们获得了一个...
JS中的事件和DOM操作
最新发布
weixin_61898502的博客
09-24 1137
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM模型被构造为对象的树：有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式JavaScript 能够改变页面中的所有 HTML 元素。JavaScript 能够改变页面中的所有 HTML 属性。
DOM事件处理程序
Cinderella_hou的博客
07-27 1255
事件就是用户或浏览器自身执行的某种动作。比如“click”，“load”，“mouseover”等都是事件的名字。响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此，click对应的时间处理程序就是 “onclick”。给事件指定事件处理程序有好几种方式。   一：HTML 方式   这种方式是利用元素的属性，直接添加事件处理程序，像下面给这样：  
js--DOM（事件处理）
06-06 691
js--DOM（事件处理）  今天学习事件处理程序，其实以前都学过，就是系统的回顾一下。 目录：1.HTML事件处理程序       2.DOM 0级事件处理程序       3.DOM 2级事件处理程序       4.IE事件处理程序       5.跨浏览器的事件处理程序 还会学习几个API的使用：addEventListener(); removeEventListe
DOM事件处理详解
zxn200125的博客
11-25 254
事件处理中的事件注册、移除、以及常用事件对象
动态生成的DOM不会触发onclick事件的原因及解决方法
09-01
在处理动态生成的DOM元素时，经常遇到一个常见的问题：这些元素不会触发onclick事件。为了解决这个问题，需要了解背后的原因以及相应的解决策略。 首先，传统的绑定事件方式，如直接在HTML元素上使用onclick属性，...
关于动态生成dom绑定事件失效的原因及解决方法
11-28
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下： 1. 事件...
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
01-21
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件，如果按照正常的方式添加处理，结果发现只会执行 onclick，而不会执行 ondblclick；这时我们需要对2个事件的处理函数稍作处理就可以实现2个...
《悟透JavaScript》学习札记之响应DOM事件
javatome
08-16 66
响应DOM事件的两种方式： 1. 静态绑定（JS代码写在HTML标签的事件属性里面）： &lt;div onclick="alert('This is a ' + this.tagName)"&gt;Click Me Static!&lt;/div&gt; // output: This is a DIV 2.动态绑定（DOM对象的事件属性与事件处理函数关联）： &lt;di...
前端菜鸟学习之DOM事件处理
arzu19740204的博客
11-04 207
一、事件处理程序 　　1.DOM0级事件处理程序：就是将一个函数赋值给一个事件处理程序属性，至今仍为现代所有浏览器所支持，主要得益于其跨浏览器的优势，要使用DOM0级事件，首先要得到操作对象的引用，具体实例如下图所示。　　　　 var oBtn = document.querySelector('.btn'); oBtn.onclick = functi...
DOM事件处理
yang_zongjun的专栏
04-14 321
DOM事件处理两种事件流： 事件冒泡 由具体的元素到不具体的元素，由小到大（所有浏览器） 事件捕获 有不具体的元素到具体的元素，由大到小（netscape） html时间处理程序就是把js写到html中，html和js紧紧地耦合在一起，当然这是极不推荐的写法 <input type="button" value="按钮" id="btn" onclick="alert('hello wor
DOM事件的处理
Bart_G的博客
01-04 403
处理事件的两种方式eg：<html> <head> <title>DOM EVent</title> </head> <body> <div id="box"> <input type="button" id="btn"value="按钮"/> </div> </body> </html>事件冒泡当点击按钮时候，先触发的按钮然后出发按钮所在的div再出发div所在的body然后到html最后到doc
dom对象处理
loushengyue
12-23 504
什么是DOM? DOM是W3C标准（是HTML文档对象模型的英文缩写，Document Object Model for HTML）。 DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。 通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 DOM独立于平台和编程语言。它可被
DOM 事件处理（收集）
晓强的技术博客
09-15 702
paste 事件场景 - 去掉来源前后空白符已知页面中有很多个 <input> 元素，对它们复制粘贴的方式写数据的时候，要对数据文本进行处理，如去掉前后空白符。 $("body").on("paste", "input", function(e){ e.preventDefault(); var text = (e.originalEvent || e).clipboardData
JQ DOM事件处理
qq_38636998的博客
10-26 336
事件处理 一、事件API jQuery对象的核心事件方法，核心事件函数，主要用于为元素的任意事件(包括自定义事件)添加、取消、触发绑定的一个或多个事件处理函数 二、on()方法(首选方法) 1、说明 on() 方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彤彤的小跟班

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值