美文网首页
DOM 事件源对象

DOM 事件源对象

作者: ticktackkk | 来源:发表于2020-01-21 19:48 被阅读0次
    <body>
    <div style="width: 300px;height: 300px;background: red;">
    </div>
    <script type="text/javascript">
     
    var div = document.getElementsByTagName('div')[0];
     
    div.onclick = function (e) {
     
    //处理函数中的形参会被系统传参事件对象
     
    console.log(e);
     
    }
     
    </script>
    </body>
    

    当 点击 div 的时候,会输出事件对象,IE9以下不兼容会输出undefined

    IE9以下的事件对象为 window.event

    兼容写法

    
    div.onclick = function (e) {
        
        var even = e || window.event;
            
        console.log(even);
        
    }
    

    事件源对象

    查看事件源对象

    事件对象.target 火狐只有这个

    事件对象.srcElement IE只有这个

    谷歌这两个都有

    低版本兼容写法:

    
    div.onclick = function (e) {
        
    var even = e || window.event;
            
    var target = event.target || event.srcElement;  
     
    }
    

    事件委托

    利用事件冒泡和事件源对象进行处理

    优点:

    1.不需要使用循环一个一个绑定事件

    2.当有新元素时不需要再次进行绑定
    ————————————————
    版权声明:本文为CSDN博主「活在童话里」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/dfggffdd/article/details/80150717

    相关文章

      网友评论

          本文标题:DOM 事件源对象

          本文链接:https://www.haomeiwen.com/subject/vkuezctx.html