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>