原声JavaScript中,事件是不可缺少的,HTML就是通过事件才能与JavaScript进行交互。其实事件流就是当你点击一个按钮的时候,这个按钮是在HTML和body上的,自然的,点击按钮的时候相当于点击了HTML和body,如果按钮放在一个div里面,那么点击按钮的时候相当于点击了div,这样就会出发一系列的事件,这就是事件流。事件具有冒泡流和捕获流,两者刚好是反着来。
JavaScript原声监听事件addEventListener,接收两个参数,一个是方法,一个是布尔值,指定事件是否在捕获或冒泡阶段执行。所以我们可以很直观的打印输出事件的冒泡和捕获两个过程。
由此可以看出,事件都是从最外层开始捕获,层层递进,然后找到目标函数,也就是button所在位置,然后开始层层往外冒泡。
当我们增加了目标函数的点击事件,那么事件就不会遵守先发生捕获后再发生冒泡这一规则
stopPropagation既可以阻止事件的捕获还能阻止事件的冒泡,如果我在test冒泡阻止了事件的冒泡,那么就不会输出body冒泡。
事件委托是什么,我相信很多用jQuery添加元素的时候(append),,都遇见过添加的元素点击事件无法响应,其实这就是事件的委托。我们一般会用on方法或者绑定在body上面来达到append的元素的点击方法可以执行。一般我们给li添加点击事件是这样的
对于事件,在事件捕获或者事件冒泡阶段处理并没有明显的优劣之分,但是由于事件冒泡被所有主流的浏览器兼容,从兼容性角度来说还是建议大家使用事件冒泡模型。这就是事件的捕获、冒泡、委托。
欢迎关注 Coding 个人笔记 公众号