DOM 事件源对象

2020-01-21  本文已影响0人  ticktackkk
<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

上一篇下一篇

猜你喜欢

热点阅读