事件、注册登录、Tab 切换效果

解释以下概念:事件传播机制、阻止传播、取消默认事件、事件代理

事件传播机制

事件传播机制分为三个阶段:
1、捕获阶段:先由文档的根节点往事件触发对象,从外向内捕获事件对象
2、目标阶段:到达目标事件位置,触发事件。
3、冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

阻止传播

可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在同一对象上定义了其他处理程序,剩下的处理程序将依旧被调用,但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用。

取消默认事件

可以通过调用事件对象的preventDefault()方法取消事件的默认操作

事件代理

事件代理利用了事件冒泡原理,将事件函数绑定在父元素身上,再指定需要执行函数的子元素,在触发事件时,事件会依次冒泡到父级元素,从而触发绑定在父级元素的事件函数。

写一个 Demo,演示事件传播的过程,演示阻止传播的效果

事件传播
阻止事件传播

实现页面

页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,361评论 3 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,203评论 1 10
  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 571评论 0 0
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    周花花啊阅读 725评论 0 3
  • 买台电脑主机 2000元 买笔记本 15元就够了吧, 钢笔10元 去看书两小时 去走走3小时
    呆头1988阅读 215评论 0 0

友情链接更多精彩内容