JavaScript：相关事件操作

事件对象

利用e,target，e是写在事件函数中的形参，是可以自己取名的

可以得到事件触发的对象是谁

    <ul>
        <li class="w1">1</li>
        <li class="w2">2</li>
        <li class="w3">3</li>
        <li class="w4">4</li>
    </ul>

    <script>
            var ul1 = document.querySelector('ul');
            ul1.addEventListener('click',function(e){
                console.log(e.target);
            })


    </script>

 一般的运用场景是，当有多个子元素时，只需要给父元素指定事件触发，再通过e.target获取事件对象就好。

阻止默认行为

例如，对于一个a元素，我希望点击时暂时不进行跳转：

    <a href="http://www.baidu.com">baidu</a>

    <script>

            var aa = document.querySelector('a');
            aa.addEventListener('click',function(e){
                e.preventDefault()
                
            })


    </script>

注意，这里不能用aa.preventDefault()

阻止事件冒泡

对于这样的一个案例:

    <div class="box1">
        <div class="box2">

        </div>
    </div>


    <script>
        var box1 = document.querySelector('.box1');
        var box2 = document.querySelector('.box2');
        box1.addEventListener('click',function(){
            console.log(1);
        })

        box2.addEventListener('click',function(){
            console.log(2);
        })


    </script>

由于box2是包含在box1中的，所有我点击box2时，先会弹出 2 再弹出 1，这是冒泡过程的结果

若要阻止这种冒泡，只需加入 e.stopPropagation();

        box2.addEventListener('click',function(e){
            console.log(2);
            e.stopPropagation();
            
        })

阻止鼠标右键

可以让鼠标在页面中不能右键：

        document.addEventListener('contextmenu',function(e){
            e.preventDefault();
        })

阻止鼠标选中

        document.addEventListener('selectstart',function(e){
            e.preventDefault();
        })

获取鼠标位置：