首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端系列第2集-如何让事件先冒泡获取?

事件冒泡是指当一个元素上的事件被触发,该事件会元素开始向上冒泡,直到传播到文档对象,并且可以被其他元素捕获。默认情况下,事件是先捕获冒泡。...例如,如果有一个包含多个按钮的列表,并且希望在单击每个按钮时执行相同的操作,可以将单击事件监听器添加到列表元素上,并使用事件对象来获取单击的按钮。...这个方法可以确保事件先冒泡获取,因为事件处理程序在一小段时间执行,以便事件有时间传播到父元素。...如果是,我们就会在控制台中记录被单击的按钮的文本内容。由于我们使用了事件委托,因此无论用户单击哪个按钮,事件处理程序都会在 myList 元素上执行,并且事件对象中包含有关被单击的按钮的信息。...这确保了事件先冒泡获取,因为我们将监听器添加到父元素上,而不是每个子元素上。 总结 在事件处理中,事件冒泡和事件捕获是两种常见的事件传播机制。默认情况下,事件先捕获冒泡。

16920
您找到你想要的搜索结果了吗?
是的
没有找到

事件高级

那么是先执行父元素单击事件,还是先执行div的单击事件 ??? 事件流描述的是页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...IE 提出目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。 Netscape(网景公司)提出最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。 ​...>        abc        abc        abc                var ul...以上案例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li ,因为点击li,事件会冒泡到ul上, ul有注册事件,就会触发事件监听器。...动态新创建的子元素,也拥有事件。            知否知否,点我应有弹框在手!        知否知否,点我应有弹框在手!

1.3K20

AJAX培训笔记_js基础笔记

"li:gt(2)").addClass("highlight"); //$("li:lt(2)").addClass("highlight"); //获取所有的h标签 //var hs = $("h1...ul节点任何位置都会触发click事件 完善点2:为二级菜单添加连接,单击将相关页面在类似与iframe中显示 jQuery(function() //$(document).ready(function...; //找到当前ul下所有li元素集合 toggle() 切换的显示和隐藏 //ulNode.children("li").toggle("slow"); //完善点一 方法一、nextAll() prevAll...()所有li兄弟元素 ulNode.nextAll("li").toggle("slow"); //方法二、parent() 父元素 //ulNode.parent().children("li").toggle...将临时变量的赋给input输入域的value 7、将该input元素插入到当前td中 8、取消绑定到该td上的click事件 完善点1:修改单击回车键,修改过的写入td,input消失, 重新单击

6.5K10

JS事件篇

属性可以获取到当前元素所有子元素,不包括文本节点 区分概念: 节点包括文本节点,而元素不包括文本节点 firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素...抽离出按钮点击函数的小案例 parentNode :获取一个元素的父元素 innertext :获取到一个标签里面的文本内容 获取兄弟节点,也可能会获取到空白节点 获取兄弟元素 节点的属性 通过nodevalue...,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素,不包括文本节点 ---- 区分概念: 节点包括文本节点,而元素不包括文本节点 ---- firstChild获取当前元素第一个子节点...等,尽管解决了返回顶部的问题但仍存在其他缺陷 (3)事件处理函数的工作机制中,在给某元素添加事件处理函数,一旦事件发生,相应JavaScript代码就会执行,所调用的JavaScript代码的返回被传递给事件处理函数...>新增超链接"; } //为ul绑定一个单击响应函数 u.onclick=function(event

12.6K10

自写JQ控件-树状菜单控件

/* 子菜单项 */ .st_tree ul ul li a{ font-size: 17px; } /* 子子菜单项 */ .st_tree ul ul ul li a{ font-size: 16px...).parent("li").click(); return false; }); /* 菜单项 接受单击 */ this.find("li"...(1)比如一些位置的知识: jquery获取元素位置的方法有两个: position方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。...使用: $("#target").position().left; $("#target").position().top; offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于...使用: offset方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相对于document对象的偏移位置。 使用: (2)CSS 伪元素 ?

1.9K30
领券