addEventListener 事件监听器
添加事件监听
target.addEventListener(type, listener[, options|useCapture])
参数:
- type 事件类型 (click、mouseover等,注意这里不加on)
- listener 事件处理函数
可选参数:
options 配置对象
- capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
- once: Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。
- passive:Boolean,设置为true时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
- useCapture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
第三个参数不设置时,默认执行的是 useCapture 为 false 也就是在冒泡阶段执行
事件监听和事件绑定的区别(尽量用事件监听)
事件捕获
当事件发生时,最先得到通知的是window,然后是document,由上至下逐级依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获。
事件冒泡
接下来,事件会从目标元素开始起泡,由下至上逐级依次传播,直到window对象为止,这个过程就是冒泡。
事件流:事件冒泡 小到大
第三个参数 还可以 传递对象:{}
capture:true/false 是否在捕获阶段执行
once:true/false 只执行一次事件
passive:false/true 阻止取消默认事件 true(不允许阻止) 、 false (允许阻止)
preventDefault 阻止默认行为
removeEventListener 取消事件监听 (不能用匿名函数)
removeEventListener(event,fn)
绑定的事件函数-必须是命名函数!
Event 事件对象
Event.target 事件触发的目标源元素
Event.currentTarget 事件绑定的元素
事件委托(事件代理)
事件代理(事件委托):利用冒泡机制将事件统一委托在父级上执行,在通过事件源获取到相关元素
优点:
1.减少事件注册,节省内存
2.可以给将来的元素添加事件(在不刷新页面的情况下)
缺点:
1.建议就近委托,否则会导致浏览器频繁的调用处理函数
2.祖父级和事件源之间不能有阻止冒泡,容易出现误判,所以写好相应判断
加个判断,这样点击的如果是p,不变化
e.bubbles 是否冒泡
e.stopPropagation() 和 e.cancelBubble 取消事件冒泡