事件

事件顺序

先执行捕获事件,然后目标阶段,再执行冒泡事件

addEventlistener('',fn,false);//冒泡事件,默认是冒泡
addEventlistener('',fn,true);//捕获事件

给一个dom即绑定了捕获,又绑定了冒泡,那么先绑定什么事件,就先执行什么。

事件代理

代理的意思就是只监听父节点的事件触发,用来代理对其后代节点的监听,而你需要做的只是通过currentTargettarget属性得到事件绑定的dom和事件触发的dom,并作出回应。

使用事件代理意味着你可以节省大量重复的事件监听,以减少浏览器资源消耗。当你需要给动态生成的dom绑定监听事件的时候,就可以通过事件代理。

常用事件

  • load 资源加载完成时触发。这个资源可以是图片、CSS 文件、JS 文件、视频、document 和 window 等等。
  • DOMContentLoaded DOM构建完毕的时候触发, jQuery的ready方法包裹的就是这个事件。
  • beforeunload 当用户准备离开这个页面的时候触发,用户点击关闭页面或者进行其他关闭页面的操作。
  • resize 当节点尺寸发生变化时,触发这个事件。通常用在 window 上,这样可以监听浏览器窗口的变化。出于对性能的考虑,你可以使用函数 throttle 或者 debounce 技巧来进行优化,throttle 方法大体思路就是在某一段时间内无论多次调用,只执行一次函数,到达时间就执行;debounce 方法大体思路就是在某一段时间内等待是否还会重复调用,如果不会再调用,就执行函数,如果还有重复调用,则不执行继续等待。
  • error 当我们加载资源失败或者加载成功但是只加载一部分而无法使用时,就会触发 error 事件,我们可以通过监听该事件来提示一个友好的报错或者进行错误上报服务器等其他处理。比如 JS 资源加载失败,则提示尝试刷新;图片资源加载失败,在图片下面提示图片加载失败等。该事件不会冒泡。因为子节点加载失败,并不意味着父节点加载失败,所以你的处理函数必须精确绑定到目标节点。一般绑定在window上
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 之前写过一篇浏览器事件的相关操作和事件运行的原理——JavaScript浏览器事件解析。这一篇主要写一些常用的事件...
    faremax阅读 1,648评论 0 0
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    周花花啊阅读 597评论 0 3
  • 事件基本概念 事件类型:用来说明发生什么类型事件的字符串,即事件名。事件目标:发生事件的对象。当谈论事件时,会同时...
    留七七阅读 1,050评论 0 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,064评论 1 10
  • 时间过得飞快,大三上学期就快结束了,好快好快,真的好快,好像刚被人推推搡搡的拉进大学,就不得不面对自己快要离开...
    Elvn阅读 450评论 0 1