JavaScript 基础 学习 （四）
解绑事件
dom级 事件解绑
元素.on事件类型 = null
因为赋值的关系，所以给事件赋值为 null 的时候
事件触发的时候，就没有事件处理函数执行了
dom2级 事件解绑
元素.removeEVentListener（'事件类型'，要移出的事件处理函数）
元素.detachEvenbt('on事件类型', 要移除的事件处理函数)
事件的传播
当你在一个元素上触发行为的时候
你这个行为会按照元素 结构父级 的顺序, 逐层 向上 传播
就相当于在父级身上也触发了这个行为
就相当于在父级的父级身上也触发了这个行为
直到 window 为止, 都触发了同样的行为
事件的 目标
目标: 当事件触发, 事件处理函数执行的时候, 准确触发事件的那个元素
当 window 的点击事件触发的时候
是因为点击了谁, 而触发的
是因为点击自己触发的, 还是因为点击某一个子元素, 通过传播来触发的
准确触发事件的元素, 我们叫做事件的 目标
获取事件的目标, 在 事件对象 里面有记录
事件对象就是一个对象数据结构, 里面记录了本次事件的信息
事件目标的获取
在事件对象里面通过一个属性来获取
target 目标 ---- 标准浏览器
srcELement 目标 ---- IE 低版本
兼容的写法
var target = e.target || e.srcElement
事件的冒泡和捕获
就是事件触发的顺序
冒泡: 按照从 目标 到 window 的顺序来执行所有的同类型事件
捕获: 按照从 window 到 目标 的顺序来执行所有的同类型事件
我们怎么让事件按照冒泡或者捕获的顺序执行
IE 低版本只能按照冒泡的顺序执行, 没有办法设置捕获
标准浏览器, 通过 addEventListener 的第三个参数来决定是冒泡还是捕获
第三个参数, 是 布尔值
默认是 false, 表示冒泡
选填是 true, 表示捕获(一般很少使用)
阻止事件传播
例子:
确实有一个 html 嵌套的结构
我点击里面元素的时候, 需求打印 需要做的事情1
我点击外面元素的时候, 需求打印 需要做的事情2
现在当我点击里面元素的时候, 回把两个事件处理函数都执行了
但是我并不需要, 我就是点击谁触发谁的事件就好
分析问题:
当你点击 inner 元素的时候, 因为事件的传播
导致你也是点击在了 center 元素身上
所以 center 身上的点击事件也会触发
解决问题:
只要我不让事件传播, 那么我点击在 inner 身上的时候
因为禁止了事件的传播, 那么就相当于没有传播
那么就不会触发 center 身上的点击事件了
怎么阻止事件传播 - 利用事件对象里面的内容
e.stopPropagation() 停止传播 ---- 标准浏览器
e.cancelBubble = true 确认取消冒泡 ---- IE 低版本
兼容处理
如果两个都是属性, 我们可以使用 或 运算符兼容
如果一个属性一个方法, 或者两个都是方法, 那么我们就要用 if 条件来写
判断事件对象里面有没有 e.stopPropagation 这个函数, 有就执行, 没有就用另一个
if (e.stopPropagation) {
e.stopPropagetion()
} else {
e.cancelBubble = true
}
e.stopPropagation 肯定是一个函数才能 e.stopPropagetion()
判断 e.stopPropagetion 是不是一个函数就完了
在标准浏览器下他是一个函数, 你把他写在 if 条件里面就是 true
在 IE 低版本没有这个东西, 他是 undefined, 你把他写在 if 条件就是 false
事件委托
把我自己的事件, 委托给别人帮我干
我的事件交给别人来干, 那么我就不用在自己身上绑定事件了
例子: 按照目前的 页面结构
我点击每一个 li 都会因为事件冒泡而触发 ul 的点击事件
现在, 我只要给 ul 绑定一个点击事件, 那么我点击每一个 li 的时候都会触发
mouseover 和 mouseenter 的区别
mouseover 和 mouseout 的移入移出会向上传播
mouseenter 和 mouseleave 的移入移出不会向上传播
浏览器默认行为
不需要绑定, 浏览器天生自带的一个行为
表单提交: 不需要绑定提交时间, 只要点击 submit 按钮, 会自动提交跳转页面
a 超链接: 不需要绑定点击事件, 只要点击 a 标签就会跳转连接
鼠标右键: 不需要绑定右键单击事件, 只要你单击鼠标右键, 就会出现一个菜单
文本选中: 不需要绑定选中事件, 只要你框选, 就会选中页面中的文本内容
阻止浏览器默认行为
1. e.preventDefault() 标准浏览器
2. e.returnValue = false IE 低版本
3.通用的方法 return false