JS基础进阶3-DOM事件

embedded/2024/12/23 15:14:06/

DOM事件流

一、定义

DOM事件流指的是从页面接收事件的顺序。这个路径包括了事件的捕获阶段、目标阶段和冒泡阶段。

图片来源黑马pink老师PPT

二、事件流阶段

DOM事件流涉及三个主要阶段:

捕获阶段(Capturing Phase):

  • 事件从文档的根节点(如document对象)开始,沿着DOM树向下传播,直到到达事件的目标节点(即触发事件的元素)。
  • 在这个阶段,事件会经过目标节点的所有祖先节点,并触发这些节点上设置的捕获阶段事件监听器(如果有的话)。
  • 默认情况下,大多数浏览器不支持或不在此阶段触发事件监听器,除非在addEventListener方法中明确指定。

目标阶段(Target Phase):

  • 当事件到达目标节点时,事件在该节点上被触发,并执行该节点上绑定的事件处理函数。
  • 这个阶段没有冒泡或捕获的概念,只是简单地处理目标节点上的事件。

冒泡阶段(Bubbling Phase):

  • 事件从目标节点开始,沿着DOM树向上传播,经过所有祖先节点,直到到达文档的根节点。
  • 在这个过程中,事件会触发每个经过的节点上设置的事件监听器(默认是冒泡阶段)。
  • 如果没有在捕获阶段或目标阶段被阻止,事件将继续冒泡。

图片来源黑马pink老师

三、事件处理

在DOM事件流中,每个元素都可以有自己的事件处理程序,这些处理程序被称为事件监听器或事件处理函数。可以通过以下方式向元素添加事件监听器:

  • 对象属性绑定:如element.onclick = function() {...}。这种方式只能绑定一个事件处理函数,重复绑定会覆盖之前的函数。
  • addEventListener()方法:如element.addEventListener('click', function() {...}, [useCapture])。这种方式可以绑定多个事件处理函数,且可以指定事件是在捕获阶段还是冒泡阶段触发(通过useCapture参数,true为捕获阶段,false为冒泡阶段,默认为false)。

捕获阶段:第三个参数是true

javascript">    //DOM事件流的验证://捕获顺序:window -> document -> body -> div.father -> div.son//冒泡顺序:div.son -> div.father -> body -> document -> window//先执行father的click事件,然后执行son的click事件,最后执行window的click事件。
var son=document.querySelector('.son');
son.addEventListener('click',function(e){alert('捕获阶段2');
},true);var father=document.querySelector('.father');father.addEventListener('click',function(e){alert('捕获阶段1');},true);

冒泡阶段:第三个参数是false或者省略

javascript">   //冒泡阶段var son=document.querySelector('.son');
son.addEventListener('click',function(e){alert('son');
},false);var father=document.querySelector('.father');father.addEventListener('click',function(e){alert('father');},false);document.addEventListener('click',function(){alert('document');});

 四、阻止事件冒泡

在事件冒泡的过程中,可以通过调用事件对象上的stopPropagation()方法来阻止事件继续向上冒泡。此外,在Internet Explorer中,还可以通过设置事件对象的cancelBubble属性为true来达到同样的效果。

五、应用与注意事项

1. JS代码中只能执行捕获或者冒泡其中的一个阶段。
2. onclick 和attachEvent 只能得到冒泡阶段。
3. addEventListener (type, listener [, useCapture] )第三个参数如果是true ,表示在事件捕 获阶段调用事件处理程序;如果是false (不写默认就是false ) , 表示在事件冒泡阶段调用事件处理程序。
4.实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
5.有些事件是没有冒泡的,比如onblur、onfocus、 onmouseenter、 onmouseleave

事件对象

一、定义

  •  et就是一个对象,包含了事件的所有信息,包括事件类型、事件源、事件目标等。当形参来看
  •   事件对象有了事件才会存在,否则不存在
  • 事件对象可以自己命名event \e\eve
  • IE678通过window.event获取事件对象
  • 兼容性写法:e=e||window.e;
javascript">    <div>111</div><script>var div=document.querySelector("div");div.addEventListener("click", function(e){div.style.backgroundColor="blue";console.log(e);});</script>

输出: 

 

二、事件对象常见的方法和属性

常见属性
常见属性说明
type返回事件的类型,如click、keydown、mouseover等
target返回触发事件的元素
currentTarget返回其事件监听器触发该事件的元素
eventPhase返回事件传播的当前阶段,返回的值含义(0,表示事件不在传播过程中)、(1,表示事件正在捕获阶段传播)、(2,表示事件到达目标元素)、(3,表示事件正在冒泡阶段传播)
bubbles返回一个布尔值,指示事件是否冒泡
cancelable返回一个布尔值,表示事件是否可以取消只有可以取消的事件(如submit事件)的preventDefault()方法才会起作用
timeStamp返回事件发生的时间戳(自1970年1月1日00:00:00 UTC起计算的毫秒数)
clientX/clientY返回鼠标事件发生时,鼠标指针相对于浏览器窗口可视区的水平/垂直坐标
pageX/pageY返回鼠标事件发生时,鼠标指针相对于整个文档的水平/垂直坐标(包括滚动的偏移量)

代码示例

javascript">       div.addEventListener("click", function(e){div.style.backgroundColor="blue";console.log(e);console.log(e.target);console.log(this);console.log(e.type);console.log(e.eventPhase);});
常见方法
方法说明
preventDefault()阻止事件的默认行为,例如,阻止链接的默认跳转行为或表单的默认提交行为
stopPropagation()阻止事件进一步传播(冒泡或捕获)
stopImmediatePropagation():除了调用stopPropagation()的方法外,stopImmediatePropagation还会阻止相同事件的其他监听器被调用(如果它们绑定在当前元素上)
composedPath()返回一个数组,包含事件传播路径上的所有DOM节点
1.preventDefault() 方法示例
javascript"><form id="myForm" action="/submit-form">  <input type="submit" value="提交">  
</form>  <script>  document.getElementById('myForm').addEventListener('submit', function(event) {  event.preventDefault(); // 阻止表单的默认提交行为  console.log('表单提交被阻止');  });  
</script>
2. stopPropagation() 方法示例
javascript"><div id="parent" style="padding: 20px; border: 1px solid #000;">  <button id="child">点击我</button>  
</div>  <script>  document.getElementById('parent').addEventListener('click', function(event) {  console.log('Parent clicked');  });  document.getElementById('child').addEventListener('click', function(event) {  event.stopPropagation(); // 阻止事件冒泡  console.log('Child clicked');  });  
</script>
拓展this和target的区别

1.this返回的是绑定是按的对象(元素)      ///    e.target返回的是触发事件的对象(元素)

2.代码示例

javascript">        var ul=document.querySelector('ul');ul.addEventListener('click', function(e){//this指向ulconsole.log(this);//e.target指向li触发事件的对象console.log(e.target);console.log(e.target.tagName);console.log(e.target.parentNode);console.log(e.target.nextSibling);})

结果:

事件委托 

事件委托的步骤
  • 确定事件绑定在哪个父元素上:这个父元素需要包含所有目标子元素,且最好在DOM结构中位于一个较低层次
  • 编写事件处理函数:在这个函数中,通过event.target属性来获取实际触发事件的元素(即事件的目标元素)。event.target始终指向触发事件的元素,即使在事件冒泡过程中。
  • 检查event.target是否符合预期:在事件处理函数中,可以通过比较event.target的某些属性(如id、class、tagName等)来确定是否需要对该事件进行响应。
  • 执行相应的操作:如果event.target符合条件,则执行相应的操作。

代码

javascript">    <ul><li>希望在于自己</li><li>希望在于自己</li><li>希望在于自己</li><li>希望在于自己</li></ul><script>var ul=document.querySelector("ul");ul.addEventListener("click",function(e){//判断是否为li标签//toLowerCase() 用于将字符串中的所有大写字母转换为小写字母if(e.target.tagName.toLowerCase() === "li"){e.target.style.backgroundColor = "pink";alert("点击了"+e.target.innerHTML);}});</script>


http://www.ppmy.cn/embedded/100442.html

相关文章

守护核心命脉:国家网络安全战略下的关键基础设施保护

在数字化浪潮席卷全球的今天&#xff0c;网络空间已成为国家发展和社会生活的新疆域。关键信息基础设施&#xff0c;作为这一领域的核心支柱&#xff0c;其安全性直接关系到国家安全、社会稳定及经济发展。因此&#xff0c;将关键基础设施保护纳入国家网络安全战略的核心环节&a…

【C语言】浮点型数据在内存中的储存

浮点型数据在内存中的储存 文章目录 浮点型数据在内存中的储存引例概念提出浮点型数据储存规定对于有效数字M的特别规定对于指数E的特别规定指数E的储存指数E的读取 利用规则解释原因 在之前学习过整形数据在内存中的储存后&#xff0c;浮点型数据在内存中的储存又会怎样呢&…

llamaindex+Internlm2 RAG实践 #书生谱语大模型实战营#

1.打卡任务&#xff1a; 本次的打卡任务是llamaindexInternlm2 RAG实践&#xff0c;我们需要基于 LlamaIndex 构建自己的 RAG 知识库&#xff0c;寻找一个问题 A 在使用 LlamaIndex 之前InternLM2-Chat-1.8B模型不会回答&#xff0c;借助 LlamaIndex 后 InternLM2-Chat-1.8B 模…

WPF如何获取DataGrid的选中行

在DataGrid中加入这一行 <MouseBindingCommand"{Binding OpenWindowCommand}"CommandParameter"{Binding ElementNameNewPlanDataGrid, PathSelectedItem}"Gesture"LeftDoubleClick" /> </DataGrid.InputBindings> 然后ViewModel中…

Ruby Web服务开发:构建高效RESTful API的秘诀

标题&#xff1a;Ruby Web服务开发&#xff1a;构建高效RESTful API的秘诀 Ruby作为一种灵活、高效的编程语言&#xff0c;通过其丰富的库和框架&#xff0c;为开发Web服务提供了强大的支持。本文将深入探讨如何在Ruby中开发Web服务&#xff0c;特别是RESTful API。我们将从基…

大模型日报 2024-08-22

大模型日报 2024-08-22 大模型资讯 大模型产品 D-ID视频翻译&#xff1a;一键多语言转换 摘要: D-ID视频翻译工具可将视频即时转换为多种语言&#xff0c;翻译文本、克隆声音并完美对口型。限时免费&#xff01; TubeOnAI - 提高效率&#xff0c;节省时间 摘要: 即时总结YouTub…

零基础5分钟上手亚马逊云科技-利用MQ为应用解耦

简介&#xff1a; 欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列&#xff0c;适用于任何无云计算或者亚马逊云科技技术背景的开发者&#xff0c;通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。 我会每天介绍一个基于亚马逊云科技…

python爬虫源码:selenium+browsermobproxy实现浏览器请求抓取

前言 如上篇博客所述&#xff1a;为了抓取所有&#xff0c;通过浏览器F12可以看到的资源&#xff08;静态资源和接口调用&#xff09;&#xff0c;我使用了seleniumbrowsermobproxy的方案来处理。 这是两个模块的安装方案&#xff0c;没有看过的朋友可以去了解一下&#xff1a;…