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

今天聊聊DOM事件传播机制

要实现和网页互动,就需要通过 JavaScript 里面的事件来实现。 每次用户与一个网页进行交互,例如点击链接,按下一个按键或者移动鼠标时,就会触发一个事件。...> 如果单击了页面中 div 元素,那么这个 click 事件沿 DOM 树向上传播,在每一级节点上都会发生,按照如下顺序进行传播: div body...也就是说,我们可以为整个页面指定一个 onclick 事件处理程序,而不必给每个单击元素分别添加事件处理程序。...虽然上面的例子中好像问题也不大,但是想象一如果这个列表有 100 个元素,那我们就需要添加 100 个事件监听器,这个工作量还是很恐怖。 这个时候我们就可以利用事件代理来帮助我们解决这个问题。...也就是说,我们可以为整个页面指定一个 onclick 事件处理程序,而不必给每个单击元素分别添加事件处理程序。

96420

3 个 React 状态管理规则

同样,`state.count 包含一个表示计数器数字,例如,用户单击按钮次数。...单击 Add 按钮时,将调用 addNewProduct() 事件处理程序。 在 addNewProduct() 内部,用 Set 对象来保持产品名称唯一。组件是否应该关注这个实现细节?不需要。...以同样方式,当单击 Delete 按钮时,处理程序将调用 dispatch({ type: 'delete', name })。remove 操作将产品名称从名称状态中删除。...有趣是,reducer 是命令模式特例。 总结 状态变量应只关注一个点。 如果状态具有复杂更新逻辑,则将该逻辑从组件提取到自定义 hook 中。...这 3 个简单规则能够使你状态逻辑易于理解、维护和测试。 原文链接 https://dmitripavlutin.com/react-state-management/

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

24 事件绑定、事件修饰符与事件三阶段

这个示例运行效果是,当单击内部链接a时,只执行一个doThis函数;而如何将stop修饰符去了,doThat也会派发。 2,多个修饰符串连 事件修饰符可以串连并用,例如: prevent只有修饰符,没有事件监听 这种情况,只是阻止表单中submit按钮单击默认提交行为,但是并不监听任何事件...>阻止事件默认行为 运行效果: ? 在这个示例中,当单击发生在内部灰色区域上时,如果加了stop,只响应外部监听;只有去掉stop,单击内部才有两个响应。...以js方式实现同样效果,需要启用捕捉阶段监听,并判断当前事件对象是不是这个div,远不如加一个self修饰符简单。 6,once 只监听一次,例如: <!...$once具有同样功能。 7,passvie 使用passive修饰符,提高渲染效率 <!

1.3K10

前端成神之路-WebAPIs03

DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击div父元素,甚至整个页面。...那么是先执行父元素单击事件,还是先执行div单击事件 ??? ?...比如:我们给页面中一个div注册了单击事件,当你单击div时,也就单击了body,单击了html,单击了document。 ? 当时2大浏览器霸主谁也不服谁!...常情况terget 和 this是一致, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...console.log(this); }); 事件冒泡e.target和this abc

2.9K20

「Web编程API」- 03

DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击div父元素,甚至整个页面。...那么是先执行父元素单击事件,还是先执行div单击事件 ???...比如:我们给页面中一个div注册了单击事件,当你单击div时,也就单击了body,单击了html,单击了document。 当时2大浏览器霸主谁也不服谁!...常情况terget 和 this是一致,但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件单击子元素,父元素事件处理函数也会被触发执行),这时候this指向是父元素,因为它是绑定事件元素对象...事件冒泡e.target和this abc abc abc var ul = document.querySelector

1.4K50

事件高级

DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击div父元素,甚至整个页面。 ​...那么是先执行父元素单击事件,还是先执行div单击事件 ??? 事件流描述是从页面中接收事件顺序。 事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中一个div注册了单击事件,当你单击div时,也就单击了body,单击了html,单击了document。 ?...常情况terget 和 this是一致, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...console.log(e.target);            console.log(this); ​       });     事件冒泡e.target和this

1.3K20

事件高级

DOM事件流 html中标签都是相互嵌套,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击div父元素,甚至整个页面。 ​...那么是先执行父元素单击事件,还是先执行div单击事件 ??? 事件流描述是从页面中接收事件顺序。 事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中一个div注册了单击事件,当你单击div时,也就单击了body,单击了html,单击了document。 ?...常情况terget 和 this是一致, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件单击子元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象...console.log(this); ​ }); 事件冒泡e.target和this abc

1.5K41

jQuery (二)

使用jQuery处理事件 事件处理 一个栗子,单击p时背景变成灰色 由于es6箭头函数不支持this绑定,所以无法使用箭头函数,只能使用匿名函数 html <!...').unbind('.myMod'); // 取消同时绑定在ns1和ns2命名空间单击处理程序 $('a').unbind('click.ns1.ns2') 使用命名空间达到模块化目的 // 使用函数名...; // 触发没有命名空间单击处理程序 或者如下 // 单击一将会触发二上事件 $('#button1').click((e) => {$('#button2').trigger('button2'...parent(); // 列表元素父元素 $('a[href]').parents('p'); // 选择含有链接p元素 $('a[href]').closest('div'); //...选择包含链接最里层div元素 恢复到之前选中元素 end()弹出栈 // 寻找所有div元素,然后在其中寻找p元素,高亮显示p元素,然后给div加边框 $('div').find('p').addClass

9.3K30

web前端常见面试题

但还是得网站访问性,保证用户在任何环境都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等),并为他们提供当前条件最好体验,这就是渐进增强得核心思想。...,是独立分配复用结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交评论、交互式组件,或者其他独立内容项目; nav 描述一个含有多个超链接区域,该区域包含跳转到其他页面或页面内部其他部分链接列表...:link 表示未访问链接状态; :visited 表示已访问状态;:active 表示激活状态(鼠标按);:hover 表示悬停状态。...,并做同样事情,然后是下一个,等等,直到它到达元素; 而现代浏览器在默认情况,所有事件处理程序都在冒泡阶段进行注册。...stopImmediatePropagation 方法时,点击 div 元素时,后面注册 click 将不会被触发,而且还会阻止事件冒泡; 比如下面的例子,给 p 绑定多个 click 事件,在第二个事件函数中调用

2.3K20

移动开发实用

原因就出在浏览器需要如何判断快速点击上,当用户在屏幕上单击某一个元素时候,例如跳转链接, 此处浏览器会先捕获该次单击,但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...,所以,捕获第一次单击后,浏览器会先Hold一段时间t,如果在t时间区间里用户未进行下一次点击,则浏览器会做单击跳转链接处理,如果t时间里用户进 行了第二次单击操作,则浏览器会禁止跳转,转而进行对该部分区域页面的缩放操作...造成后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说 是,页面js捕获click事件回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑处理。...《无法自动播放audio元素》 摇一摇功能 HTML5 deviceMotion:封装了运动传感器数据事件,可以获取手机运动状态运动加速度等数据。...默认触摸事件 winphone默认触摸事件事件使用e.preventDefault是无效 目前解决方法是使用样式来禁用 html{-ms-touch-action: none;}/* 禁止winphone

6.4K30

js事件防止冒泡

jQuery对这个事件对象进行了必要扩展,从而在不论什么浏览器中都能够使用这个属性。通过.target,能够确定DOM中首先接收到事件元素(即实际被单击元素)。... ,而不是其它后代元素。...单击样式转换器其它地方则能够折叠和扩展整个区域。 3. 默认操作 假设我们把单击事件处理程序注冊到一个锚元素,而不是一个外层上,那么就要面对另外一个问题:当用户单击链接时。...这样行为与我们讨论事件处理程序不是同一个概念,它是单击锚元素默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单submit事件,在此事件发生后,表单提交才会真正发生。...在这样情况,.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件环境中完毕了某些验证之后,一般会用到.preventDefault()。比如。

2.5K40

如何使用纯前端控件集 WijmoJS 中可视化在线设计器

日历控件现在显示当年月份全名 单击“属性”选项卡右侧箭头图标以显示“事件”窗格,该窗格显示所选控件公开每个事件切换按钮。对于打开每个事件,WijmoJS 设计器将自动生成事件Java代码。...如下图,打开valueChanged事件前端控件。 您可以通过单击页面右边缘箭头来折叠属性/事件侧栏。 设计表面支持具有顺序布局多个纯前端控件。...在“属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现链接。...单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目”链接以将新图表系列添加到集合末尾。...单击新添加项目右边缘向下箭头,然后从可用系列类型列表中选择TrendLine。 新添加项目现在显示为[趋势线]。 将鼠标悬停在括号内文本上,然后单击出现链接

5.8K20

Python爬虫基础:常用HTML标签和Javascript入门

例如,把下面的代码保存为index.html文件并使用浏览器打开,单击按钮“保存”,网页会弹出提示“保存成功”。...但有些JavaScript代码需要在特定时机才可以运行,例如本节第一段代码,只有单击面的按钮之后才会执行okClick属性指定JavaScript代码,这种机制叫做事件驱动。...得益于事件驱动机制,我们可以指定某段代码在什么情况才会运行,例如页面加载时(onLoad事件)、鼠标单击时(onClick事件)、键盘按键时(onkeypress事件)等等。...例如,下面的代码演示了在链接标签中使用href属性指定JavaScript代码用法。...例如,把下面的代码保存为文件index.html,此时页面上会显示图像文件1.jpg内容,单击该图像时会切换成为2.jpg内容。

1.8K10

杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

事件,而不触发 和元素上 click事件.当单击 元素时,只触发 元素上click事件, 而不触发元素上click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上click事件,而不会触发 div元素和body元素click事件....可以用同样方法解决 元素上问题 阻止默认行为 网页中元素都有自己默认行为,例如:单击链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素默认行为 在jquery中,提供了preventDefault...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘按键....A标签添加事件,之后再追加a标签都具有相同事件

8.2K20

学习jQuery这一篇就够了

注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当单击按钮时候,隐藏 div,再次单击按钮时候,显示 div .hide { width: 100px; height...() 方法描述:.after () 和.insertAfter () 实现同样功能。...需求描述:为按钮添加单击事件,当按钮单击时候,向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...需求描述:为 ul 所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li 时,所对应 li 背景变为红色 1111 2222</...event.target 触发事件 DOM 元素。 event.pageX 相对于页面的左上角。 event.pageY 相对于页面的顶部。 event.clientX 相对于视口左上角。

80950
领券