复习笔记之API(7) 事件对象常用属性和方法&&冒泡及带来的影

事件对象

event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等

• 简单的理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法
• 这个event是个形参，系统帮我们设定为事件对象，不需要传递实参
• 当我们注册事件(绑定事件时event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数))

<div></div>
<script>
    let div = document.querySelector('div');
    // 传统事件
    div.onclick = function(event) {
        console.log(event);
    }
    // 侦听函数事件
    div.addEventListener('click', function(event) {
        console.log(event)
    })
</script>

• event就是一个事件对象，写到侦听函数的小括号里面
• 事件对象只有有了对象才会存在，它是系统自动创建的，不需要我们传递参数
• 事件对象 是 事件的一系列相关数据的集合 跟事件相关的(比如鼠标点击事件里面就含有鼠标的相关信息，比如鼠标坐标；键盘事件里面就包含键盘事件的信息，比如用户按下了哪个键)
• 事件对象可以自己命名 比如 event、evt、e
• 事件对象也有兼容性问题 IE低版本浏览器必须通过window.event
• 兼容性写法e = e || window.event

事件对象常见的属性和方法(e是事件对象)

返回事件类型

• e.target返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素)
• e.target点击了那个元素，就返回那个元素，this那个元素绑定了这个点击事件，就返回那个元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    let ul = document.querySelector('ul'),
        li = document.querySelectorAll('li');
    ul.addEventListener('click', function(e){
        // 给ul绑定了点击事件，这里的this指向的是ul
        console.log(this);
        // e.target指向的是我们点击的那个对象，我们点击的是li，以是li触发了这个事件，所以e.target指向的就是li
        console.log(e.target);
    })
</script>

有一个和this非常相似的属性currentTarget,指向的都是绑定事件的元素(IE6~8不兼容)

阻止默认行为

<a href="https://www.baidu.com/">百度</a>
<script>
    // 阻止默认行为(事件) 让链接不跳转或者提交按钮不提交
    let a = document.querySelector('a');
    a.addEventListener('click',function(e){
        e.preventDefault();
    })
    // 传统的注册方式
    a.onclick = function(e) {
        // 普通浏览器 e.preventDefault(); 方法
        e.preventDefault();
        // 低版本浏览器 IE6~8 returnValue  属性
        e.returnValue
        // 利用return false 也能阻止默认行为，没有兼容性问题
        // return后面的代码不再执行，而且仅限于传统注册方式
        return false;
    }
</script>

阻止冒泡行为

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

• 标准写法：利用事件对象里面的stopPropagation()方法
• 非标准写法：IE6~8利用事件对象cancelBubble属性

<div class="father">
    <div class="son">子级盒子</div>
</div>
<script>
    let son = document.querySelector('.son');
    son.addEventListener('click', function(e) {
        alert('son');
        e.stopPropagation(); //stop 停止  Propagation 传播
        e.cancelBubble = true; // cancel 取消  bubble  泡泡
    }, false);
    let father = document.querySelector('.father');
    son.addEventListener('click', function() {
        alert('father');
    }, false);
    document.addEventListener('click', function() {
        alert('document');
    }) 
</script>

=============
阻止冒泡兼容解决方案

if(e && e.stopPropagation) {
    e.stopPropagation();
} else {
    window.event.cancelBubble = true;
}

事件委托(代理、委托)

事件冒泡本身的特性，会带来坏处，也会带来好处，需要灵活掌握

• 事件委托也称为事件代理，在jQuery里面称为事件委派
• 事件委托的原理：不是每个子节点单独设置监听器，而是事件监听设置在其父结点上，然后利用冒泡原理影响每个子节点
• 事件委托的作用：只操作了一次DOM，提高了程序性能

<ul>
    <li>我是第1个子节点</li>
    <li>我是第2个子节点</li>
    <li>我是第3个子节点</li>
    <li>我是第4个子节点</li>
    <li>我是第5个子节点</li>
</ul>
<script>
    // 事件委托的核心原理：给父元素添加侦听器，利用事件冒泡影响每一个子节点
    let ul = document.querySelector('ul');
    ul.addEventListener('click', function(e) {
        alert('我是弹框');
        e.target.style.backgroundColor = 'blue';
    })
</script>