-
什么是事件对象?
-
就是当你触发了一个事件以后,对该事件的一些描述信息
-
例如:
-
你触发一个点击事件的时候,你点在哪个位置了,坐标是多少
-
你触发一个键盘事件的时候,你按的是哪个按钮
-
-
每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对象叫做 事件对象
-
浏览器给了我们一个 黑盒子,叫做
window.event
,就是对事件信息的所有描述-
比如点击事件
-
你点在了
0,0
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性 -
你点在了
10, 10
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性
-
oDiv.onclick = function () {
console.log(window.event.X轴坐标点信息)
console.log(window.event.Y轴坐标点信息)
}
目标
冒泡
捕获
14. 事件委托
冒泡和捕获的区别
事件触发
-
这个玩意很好用,但是一般来说,好用的东西就会有 兼容性问题
-
在
IE低版本
里面这个东西好用,但是在高版本IE
和Chrome
里面不好使了 -
我们就得用另一种方式来获取 事件对象
-
在每一个事件处理函数的行参位置,默认第一个就是 事件对象
oDiv.onclick = function (e) { // e 就是和 IE 的 window.event 一样的东西 console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
综上所述,我们以后在每一个事件里面,想获取事件对象的时候,都用兼容写法
oDiv.onclick = function (e) { e = e || window.event console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
冒泡、捕获、目标
-
我们刚才聊过了,每一个事件,都是有可能从自己到 window ,有可能要执行多个同类型事件
-
那么这个执行的顺序就有一些说法了
-
你是点击在哪个元素身上了,那么这个事件的 目标 就是什么
-
就是从事件 目标 的事件处理函数开始,依次向外,直到 window 的事件处理函数触发
-
也就是从下向上的执行事件处理函数
-
就是从 window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行
-
也就是从上向下的执行事件处理函数
-
就是在事件的传播中,多个同类型事件处理函数的执行顺序不同
-
就是把我要做的事情委托给别人来做
-
因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件
-
所以我们就可以把子元素的事件委托给父元素来做
-
点击子元素的时候,不管子元素有没有点击事件,只要父元素有点击事件,那么就可以触发父元素的点击事件
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { console.log('我是 ul 的点击事件,我被触发了') }) </script> </body>
-
像上面一段代码,当你点击 ul 的时候肯定会触发
-
但是当你点击 li 的时候,其实也会触发
-
target
-
target 这个属性是事件对象里面的属性,表示你点击的目标
-
当你触发点击事件的时候,你点击在哪个元素上,target 就是哪个元素
-
这个 target 也不兼容,在 IE 下要使用 srcElement
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { e = e || window.event var target = e.target || e.srcElement console.log(target) }) </script> </body>
- 上面的代码,当你点击 ul 的时候,target 就是 ul
-
当你点击在 li 上面的时候,target 就是 li
-