事件之行为

e.target和this区别

 <ul>
        <li>abc</li>
    </ul>
    <script>
        //e.target返回的是触发事件的对象（元素）  this返回的是绑定事件的对象（元素）
        var div = document.querySelector('div');
        div.addEventListener('clcik',function(e){
            console.log(e,target);
            console.log(this);
        })

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

区别：

• e.target。点击了那个元素，就返回哪个元素
• this哪个元素绑定了事件就返回哪个元素
• e.currentTarget和this非常相似，兼容性

阻止默认行为

    <a>biadu</a>
    <script>
        var a= document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();//dom标准写法
        })

        //3.传统的注册方式:return后面的代码不执行了，只限于传统的注册方式
        a.onclick =function(e){
            return false;
            alert(不执行)；
        } 
    </script>

阻止冒泡

• 事件冒泡：开始由最具体的元素接收，然后逐级向上传递到DOM的最顶层节点
• e.stopPropagation();//stop 停止，Propagation 传播
• e.cancelBubble = true;//取消泡泡

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

考虑兼容性

事件冒泡之事件委托

• 事件委托也称为事件代理，再jq中称为事件委派
• 原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡哦原理影响设置每个子节点
• 举个栗子：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li；因为点击li；事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
• 事件委托的作用：我们只操作了一次DOM，提高了程序的性能。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        //事件委托的核心原理，给父元素节点添加监听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(){
            alert('lala');//点击每一个li都可以有弹框弹出
            e.target.style.backgroundColor = 'pink';//点击哪一个变粉
        })
        

    </script>

捞一波阻止鼠标事件

<script>
        //1.禁用鼠标右键
        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

        //2.禁止鼠标选中
        document.addEventListener('selectstart',function(e){
            e.preventDefault();

        })
    </script>