事件对象

壹小楷

于 2019-09-22 09:54:54 发布

阅读量56

点赞数

分类专栏： JavaScript 文章标签：事件对象 JavaScript

本文链接：https://blog.csdn.net/weixin_44582681/article/details/101147079

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

让学习“上瘾”，成为更好的自己！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件对象</title>
    <script>
        /*
        在触发DOM上的某个事件时，会产生一个事件对象event
        这个对象包含了所有与事件有关的信息，包括导致事件的元素、事件的类型和其他与特定事件相关的信息
            
           
        */
    </script>
</head>

<body>
    <button id="myBtn">点我吧！</button>

    <a href="https://www.baidu.com" id="myLink">百度一下</a>





    <script>
    
    // 1, DOM中的事件对象

    // 兼容DOM的浏览器会将一个event对象传入到事件处理程序中，无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象
    // event对象包含与创建他的特定事件有关的属性和方法

    // 事件处理程序内部，对象this始终等于currentTarget的值

    // var btn = document.getElementById('myBtn');
    // btn.onclick = function(){
        // alert(event.type);
        // alert(event.detail);
        // alert(event.bubbles);
        // alert(event.target);  // 事件的目标
        // alert(event.currentTarget);  // 其事件处理程序当前正在处理事件的那个元素
        // alert(this);
        // alert(event.currentTarget == this);  // true
        // alert(event.target == this);  // true

    // }
    // 如果事件处理程序存在于按钮的父节点中（例如document.body），那么这些值是不相同的

    // document.body.onclick = function(){
    //     // this and event.currentTarget都等于document.body，因为事件处理程序是注册在这个元素上的
    //     alert(event.currentTarget == document.body); // true
    //     alert(this == document.body); // true
    //     // target元素等于按钮元素，因为他是click事件的真正目标
    //     alert(event.target == document.getElementById('myBtn'));   // true
    // }

    // 一个函数处理多个事件时，使用type属性

    var btn = document.getElementById('myBtn');
    var handler = function(event){
        switch(event.type){
            case 'click':
                alert('clicked');
                break;
            case 'mouseover':
                event.target.style.backgroundColor = 'red';
                break;
            case 'mouseout':
                event.target.style.backgroundColor = '';
                break;
        }
    }
    // btn.onclick = handler;
    // btn.onmouseover = handler;
    // btn.onmouseout = handler;

    // preventDefault()：阻止特定事件的默认行为，可以使用preventDefault()方法
        // var link = document.getElementById('myLink');
        // link.onclick = function(event){
        //     event.preventDefault();
        // }
        // 只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为

    // stopPropagation()：立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或者冒泡
        // var btn = document.getElementById('myBtn');
        // btn.onclick = function(event){
        //     alert('clicked');
        //     event.stopPropagation();

        // }
        
        // document.body.onclick = function(){
        //     alert('body clicked');
        // }

    // eventPhase属性：确定事件当前正位于事件流的哪个阶段
    //  “事件捕获”  --> 1
    //  “处于目标”  --> 2
    //  “事件冒泡”  --> 3
    // var btn = document.getElementById('myBtn');
    // btn.onclick = function(event){
    //     alert(event.eventPhase);
    // }  // 2
    
    // document.body.addEventListener('click',function(event){
    //     alert(event.eventPhase);
    // },true);  // 1

    // document.body.addEventListener('click',function(event){
    //     alert(event.eventPhase);
    // },false);  // 3

    // 【注意】 只有在事件处理程序执行期间，event对象才会存在；
    //          一旦事件处理程序执行完毕，event对象就会被销毁


    // 2, IE中的事件对象
    // 要访问IE中的event有几种方式，取决于事件处理程序的方法

    // (1)DOM0级，event作为window对象的一个属性
    // var btn = document.getElementById('myBtn');

    // btn.onclick = function(){
    //     var event = window.event;
    //     alert(event.type);
    // }

    // (2)通过HTML特性指定的时间处理程序，那么还可以通过一个名为event的变量来访问event对象（与DOM中的事件模型相同）
    // <input type="text" name="" id="" onclick="alert(event.type)">

    // (3) 事件处理程序的作用域是根据指定他的方式来确定的，所以不能认为this会始终等于事件目标！！
    // var btn = document.getElementById('myBtn');
    // btn.onclick = function(){
    //     alert(window.event.srcElement == this);  // true

    // }
    // btn.attachEvent('onclick', function(event){
    //     alert(event.srcElement == this );  // false  this等于window对象
    // })


    // (4) returnValue属性相等于DOM中preventDefault()方法，设置为false, 即可以取消给定事件的默认行为
    //  var link = document.getElementById('myLink');
    //     link.onclick = function(){
    //         window.event.returnValue = false;
    //     }

    // (5) cancelBubble属性相等于DOM中stopPropagation()方法，设置为true, 是用来停止事件冒泡的
    //  IE 不支持事件捕获，因而只能取消事件冒泡，而stopPropagation()方法可以同时取消事件冒泡和捕获


    // 3, 跨浏览器的事件对象
    var EventUtil = {
            addHandler:function(element, type, handler){
               // 省略的代码
            },
            getEvent:function(event){
                return event ? event : window.event;
            },
            getTarget:function(event){
                return event.target || event.srcElement;
            },
            preventDefault:function(event){
                if(event.preventDefault){
                    event.preventDefault();
                }else {
                    event.returnValue = false;
                }
            },

            removeHandler:function(element, type, handler){
                // 省略的代码
            },
            stopPropagation:function(event){
                if(event.stopPropagation){
                    event.stopPropagation();
                }else {
                    event.cancelBubble = true;
                    }
            }
        };
    
    
        // 使用
        var btn = document.getElementById('myBtn');
        btn.onclick= function(){
            alert('clicked');
            event = EventUtil.getEvent(event);
            EventUtil.stopPropagation(event);
            // 先使用EventUtil.getEvent()取得event对象，然后将其传入EventUtil.stopPropagation().
        }

        document.body.onclick = function(){
            alert('body clicked');
        }


    
    
    </script>





</body>

</html>

壹小楷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件对象

让学习“上瘾”，成为更好的自己！！！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
复制链接

扫一扫

专栏目录