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