event_4：事件对象
官方解释
Event 对象 代表事件的状态
比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
简单理解
事件发生后，跟事件相关的一系列信息数据的集合都存放在这个对象event里面
event对象有很多属性和方法
如果是鼠标事件 event记录了鼠标事件的信息
如果是键盘事件 event记录了键盘的基本信息
1）基本语法
eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
// event 是个形参 系统帮我们设定为事件对象 不用传递实参
// 当我们注册事件时 event对象就会被系统自动创建 并依次传递给事件监听器( 事件处理函数 )
代码范例
<dav id="div">事件对象</dav> <script> var div = document.getElementById('div'); div.onclick = function (event) { console.log(event);//MouseEvent {isTrusted: true, screenX: 40, screenY: 120, clientX: 40, clientY: 17, …} } </script>
2）兼容性问题
box.onclick = function (e) { //兼容写法 e = e || window.event; } // ie6 7 8 不能支持形参的方式
二 常见的属性和方法
1_1）获取事件触发对象
e.target; 属性
1_2）e.target 和 this的区别
<ul id="ul"> <li>1</li> </ul> <script> var ul = document.getElementById('ul'); ul.onclick = function (e) { e = e || window.event;//兼容ie 6 7 8 var target = e.target || e.srcElement;//兼容ie 6 7 8 console.log(e.target);//返回 li console.log(this);//返回 ul } </script> // e.target 返回的是 触发事件的对象元素 // this 返回的是 绑定事件的对象元素
// e.currentTarget这个属性和this很相似 都是返回 绑定事件的对象元素 ie678 不支持 [ 做了解 ]
2）返回事件类型 e.type
返回事件的类型 不带on
3）阻止事件默认行为
//需求：让链接不跳转 让提交按钮不提交 //1 在addEventListener里面只能使用 e.preventDefault() //2 在传统方式里面可以使用三种 e.preventDefault();//高版本浏览器 e.returnValue;//低版本浏览器ie678 return false;//高低都可以用 只是return后面的代码不执行了
代码范例
<a href="https://www.baidu.com/" target="_blank">百度</a> <script> var a = document.querySelector('a'); a.onclick = function (e) { e.preventDefault(); } </script>
//现在a链接点击不了
4）阻止冒泡 [ 解决冒泡的麻烦 ]
e.stopPropagation()//高版本浏览器
e.cancelBubble; //兼容IE678
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>e.stopPropagation()阻止冒泡</title> </head> <body> <div id="div">div</div> <script> var div = document.getElementById('div'); div.onclick = function (e) { alert('div'); e.stopPropagation();//高版本浏览器 //stop 停止 Propagation 传播 e.cancelBubble;//兼容低版本 ie6 7 8 //cancel 取消 bubble 泡泡 } document.documentElement.onclick = function () { alert('html'); } document.onclick = function () { alert('document'); } </script> </body> </html>
兼容写法
if (e && e.stopPropagation()) { e.stopPropagation(); } else { window.event.cancelBubble; }
5 事件委托代理 [ 使用冒泡的好处 ]
5_1）基本概念
// 事件委托也称事件代理 jquery里面称为事件委派
作用：只操作一次DOM 提高了程序执行效率
5_2）核心原理
// 1 不给每个子元素添加侦听器 // 2 而是在父元素身上设置侦听器 // 3 利用冒泡原理影响设置每个子节点
5_3）代码范例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>事件委托|事件代理</title> </head> <body> <ul id="ul"> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> </ul> <script> var ul = document.getElementById('ul'); ul.addEventListener('click',function (e) { alert('你好'); e.target.style.backgroundColor = 'pink'; //e.target 可以得到触发事件的元素 }) </script> </body> </html>
