Event对象常用方法
preventDefault
阻止默认行为,比如a标签就是阻止跳转行为.该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
stopPropagation
这是阻止事件的冒泡方法,不让事件向documen上层蔓延,但是默认事件任然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。
比如给子元素绑定一个点击事件,父元素绑定一个点击事件,那么当触发子元素的点击事件的时候,由于冒泡机制,会触发父元素的点击事件,这个时候我们可以用这个东西来阻止子元素的冒泡机制,从而使得父元素的点击事件不会被触发。这是阻止事件的冒泡方法,不让事件向documen上层蔓延,但是默认事件任然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开。
【本元素的默认事件依然会执行,只是不会向上冒泡而已】
stopImmediatePropagtion
对同一个元素注册了两个click事件,那么默认情况下,两个事件都会被执行。
用该方法,在A的click事件末尾加上该方法,可以组织B的click执行。
currentTarget和target
当我们去实现事件代理的时候,这两个属性就非常有必要知道了。比如我们想要去实现一个如下功能:1个父元素下面有1w个子元素,每次点击子元素,都需要触发某个事件,有个比较笨重的方法就是直接给1w个子元素加绑定事件,但是这样肯定不好。我们可以利用冒泡机制,每个子元素都会触发父元素的冒泡事件,从而实现这个功能。
currentTarget:指的是当前元素,比如冒泡到父元素,那么currentTarget就是指当前父元素
target:当前被点击的元素,比如事件代理中,在父元素里面用target可以获取被点击的子元素