本篇文章是本人学习之后的总结文章, 如有不妥请各位大佬指正, 谢谢大家!!!
我们先来思考一下
什么是捕获? 什么是冒泡?
- 点击一个div, div里面有button....., 两个DOM元素上面都有各自的绑定事件
- 先调用哪个?
- IE说: "我要先调用 button的事件, 在调用div的事件"
- 网景: "不行, 我要和IE对着干, 先调用 div的, 在调button的"
- IE的就是 冒泡
- 网景就是 捕获
- W3C说: "别吵吵, 我都能提供, 给你们个addEventLisenter(), 第三个是bool, true就是捕获, false就是冒泡"
- W3C又说: "IE这回干了件人事, 这个 冒泡 是挺好, 我默认是 false"
怎么阻止冒泡?
e.stopPropagation() // 后续将不再执行
那什么叫做事件委托呢?
首先我们要明白为啥要委托?
举个栗子:
- 一个div里面有10个button, 要绑定10个事件
- 每个事件内容不确定
- 没有事件委托, 就要一个一个的绑定事件了
- 我现在将div上面绑定一个事件
- 根据点击的button不同进行判断, 操作后续
- 这就像是我将10个button事件委托给了div父元素去做, button上面啥事也不做
- 这就是事件委托了
事件委托的好处是啥?
- 节省内存
- 可以监听动态元素
你又要问我, 啥是动态元素???
- 比如我1秒后添加一个button元素
- 这就是动态元素
- 事件委托就能监听到这个动态元素, 然后进行操作
你又要说, 那我div的直接子级不是button, 外面有个span咋办?
建议是递归查找, 是否是你想要的元素, 不是怎么处理, 找不到怎么处理, 随便你喽
什么是默认事件? 怎么取消?
- 一个a标签, 点击了就会跳转其它页面, 这就是默认事件
- 咋阻止默认事件呢?
-
e.preventDefault()