JavaScript页面交互事件(下)

解绑事件
复习绑定事件
dom0级 事件
元素.on事件类型 = 事件处理函数
dom2级 事件
元素.addEventListener(‘事件类型’, 事件处理函数) - 标准浏览器
元素.attachEvent(‘on事件类型’, 事件处理函数) - IE 低版本
解绑事件
dom0级 事件解绑
元素.on事件类型 = null
因为是赋值的关系, 所以当我给一个事件赋值为 null 的时候
那么, 当事件触发的时候, 就没有事件处理函数执行了
那么就相当于没有绑定事件是一个道理的
dom2级 事件解绑
元素.removeEventListener(‘事件类型’, 要移除的事件处理函数)
元素.detachEvenbt(‘on事件类型’, 要移除的事件处理函数)
解绑 dom2级 事件
如果你要解绑某一个元素的 dom2级 事件
那么你必须在注册的时候就给他单独写成一个函数的形式
使用函数名去进行绑定
使用函数名去进行解绑
// dom2级 事件的 IE 低版本解绑
var box = document.getElementsByTagName(‘div’)[0]
function a() { console.log(‘点击 一号’) }
function b() { console.log(‘点击 二号’) }
// 1. 绑定事件
box.attachEvent(‘onclick’, a)
box.attachEvent(‘onclick’, b)
// 2. 解绑事件
box.detachEvent(‘onclick’, a)
box.detachEvent(‘onclick’, b)
// dom2级 事件在 标准浏览器里面的解绑
// 1. 给 div 绑定一个事件
// var box = document.getElementById(‘box’)
// function a() { console.log(‘点击 一号’) }
// 在第二个参数位置要写函数名, 不能写函数名()
// 因为 a 表示一个函数地址, a() 表示把这个函数执行了
// 我们绑定事件, 不是在绑定的时候就执行函数
// 而是等到事件触发的时候, 在执行函数
// 所以绑定的时候是给他一个函数地址, 当事件触发的时候, 执行这个地址的函数
// box.addEventListener(‘click’, a)
// box.addEventListener(‘click’, function b() { console.log(‘点击 二号’) })
// 2. 给 div 解绑事件
// 能不能解绑 ? 为什么不成功
// 就是因为 a 和 c 不是一个函数
// 函数就是在内存里面开辟一个空间
// 现在写了三个函数, 那么就是开辟了三个空间
// 所以现在我解绑的时候, 不是解绑之前的函数地址
// 解决问题 :
// 在绑定的时候, 就把函数单独书写出来, 写成一个独立的函数
// 在绑定和解绑的时候, 都是用的变量 a
// a 保存的是一个函数的地址, 那么此时就可以解绑成功了
// box.removeEventListener(‘click’, a)
// dom0级 事件解绑
// 1. 给 div 元素绑定一个 dom0级 事件
// var box = document.querySelector(‘div’)
// box.onclick = function () { console.log(‘我被点击了’) }
// 2. 给 div 元素解绑这个 dom0级 事件
// 当你给 onclick 赋值为 null 的时候
// 就把之前赋值的 函数 给覆盖了
// box.onclick = null
事件的传播
当你在一个元素上触发行为的时候
你这个行为会按照元素 结构父级 的顺序, 逐层 向上 传播
就相当于在父级身上也触发了这个行为
就相当于在父级的父级身上也触发了这个行为
直到 window 为止, 都触发了同样的行为
按照我们现在的页面结构来看
当我点击在 inner 元素身上的时候
因为事件的传播, 就相当于也点击在了 center 身上
因为事件的传播, 就相当于也点击在了 outer 身上
因为事件的传播, 就相当于也点击在了 body 身上
因为事件的传播, 就相当于也点击在了 html 身上
因为事件的传播, 就相当于也点击在了 document 身上
因为事件的传播, 就相当于也点击在了 window 身上
假如, 现在我给 window 上绑定一个点击事件
那么当我点击在 inner 元素身上的时候, 也会触发 window 的点击事件
假如, 现在我给 document 上绑定一个点击事件
那么当我点击在 inner 元素身上的时候, 也会触发 document 的点击事件
1. 给 window 绑定一个点击事件
// dom0级 和 dom2级 一样都会传播, 我们使用 dom2级 事件, 为了练习, 尽快熟悉
// window 身上的点击事件, 当你在 window 身上触发点击行为的时候, 就会执行事件处理函数
// 当我点击在 inner 身上的时候, 因为事件的传播, 就相当于在 window 身上触发了点击行为
// 所以 window 身上的点击事件的事件处理函数就执行了
window.addEventListener(‘click’, function () { console.log(‘window 身上的点击事件’) })
2. 给 document 绑定一个点击事件
document.addEventListener(‘click’, function () { console.log(‘document 身上的点击事件’) })
3. 给 html 绑定一个点击事件
var html = document.querySelector(‘html’)
html.addEventListener(‘click’, function () { console.log(‘html 身上的点击事件’) })
4. 给 body 绑定一个点击事件
var body = document.querySelector(‘body’)
body.addEventListener(‘click’, function () { console.log(‘body 身上的点击事件’) })
5. 给 outer 绑定一个点击事件
var outer = document.querySelector(’.outer’)
outer.addEventListener(‘click’, function () { console.log(‘outer 身上的点击事件’) })
6. 给 center 绑定一个点击事件
var center = document.querySelector(’.center’)
center.addEventListener(‘click’, function () { console.log(‘center 身上的点击事件’) })
7. 给 inner 绑定一个点击事件
var inner = document.querySelector(’.inner’)
inner.addEventListener(‘click’, function () { console.log(‘inner 身上的点击事件’) })
事件的 目标
目标: 当事件触发, 事件处理函数执行的时候, 准确触发事件的那个元素
按照现在的页面结构来看
当你点击 inner 的时候, 根据事件的传播, 会触发 window 身上的点击事件
当你点击 center 的时候, 根据事件的传播, 会触发 window 身上的点击事件
当你点击 outer 的时候, 根据事件的传播, 会触发 window 身上的点击事件
当 window 的点击事件触发的时候
是因为点击了谁, 而触发的
是因为点击自己触发的, 还是因为点击某一个子元素, 通过传播来触发的
准确触发事件的元素, 我们叫做事件的 目标
获取事件的目标, 在 事件对象 里面有记录
事件对象就是一个对象数据结构, 里面记录了本次事件的信息
事件目标的获取
在事件对象里面通过一个属性来获取
target 目标 ---- 标准浏览器
srcELement 目标 ---- IE 低版本
兼容的写法
var target = e.target || e.srcElement
// 1. 给 window 绑定一个点击事件
document.onclick = function (e) {
// 事件对象的兼容处理
e = e || window.event
// 事件目标的兼容处理
var target = e.target || e.srcElement
console.log(target)
}
事件的冒泡和捕获
就是事件触发的顺序
按照现在的页面结构来看
当我点击在 inner 身上的时候
会触发 inner 身上的点击事件
会触发 center 身上的点击事件
会触发 outer 身上的点击事件
会触发 body 身上的点击事件
会触发 html 身上的点击事件
会触发 document 身上的点击事件
会触发 window 身上的点击事件
但是, 是先触发自己身上的, 后触发 window 身上的
还是, 先触发 window 身上的, 后触发 自己 身上的
冒泡: 按照从 目标 到 window 的顺序来执行所有的同类型事件
捕获: 按照从 window 到 目标 的顺序来执行所有的同类型事件
我们怎么让事件按照冒泡或者捕获的顺序执行
IE 低版本只能按照冒泡的顺序执行, 没有办法设置捕获
标准浏览器, 通过 addEventListener 的第三个参数来决定是冒泡还是捕获
第三个参