事件顺序
先执行捕获事件,然后目标阶段,再执行冒泡事件
addEventlistener('',fn,false);//冒泡事件,默认是冒泡
addEventlistener('',fn,true);//捕获事件
给一个dom即绑定了捕获,又绑定了冒泡,那么先绑定什么事件,就先执行什么。
事件代理
代理的意思就是只监听父节点的事件触发,用来代理对其后代节点的监听,而你需要做的只是通过currentTarget
和target
属性得到事件绑定的dom和事件触发的dom,并作出回应。
使用事件代理意味着你可以节省大量重复的事件监听,以减少浏览器资源消耗。当你需要给动态生成的dom绑定监听事件的时候,就可以通过事件代理。
常用事件
-
load
资源加载完成时触发。这个资源可以是图片、CSS 文件、JS 文件、视频、document 和 window 等等。 -
DOMContentLoaded
DOM构建完毕的时候触发, jQuery的ready方法包裹的就是这个事件。 -
beforeunload
当用户准备离开这个页面的时候触发,用户点击关闭页面或者进行其他关闭页面的操作。 -
resize
当节点尺寸发生变化时,触发这个事件。通常用在 window 上,这样可以监听浏览器窗口的变化。出于对性能的考虑,你可以使用函数 throttle 或者 debounce 技巧来进行优化,throttle 方法大体思路就是在某一段时间内无论多次调用,只执行一次函数,到达时间就执行;debounce 方法大体思路就是在某一段时间内等待是否还会重复调用,如果不会再调用,就执行函数,如果还有重复调用,则不执行继续等待。 -
error
当我们加载资源失败或者加载成功但是只加载一部分而无法使用时,就会触发 error 事件,我们可以通过监听该事件来提示一个友好的报错或者进行错误上报服务器等其他处理。比如 JS 资源加载失败,则提示尝试刷新;图片资源加载失败,在图片下面提示图片加载失败等。该事件不会冒泡。因为子节点加载失败,并不意味着父节点加载失败,所以你的处理函数必须精确绑定到目标节点。一般绑定在window上