美文网首页
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 事件源对象

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

  • 事件

    事件三要素 事件源 (Dom对象)事件 (Type)事件处理函数 (functionHandler) 注册事件的方...

  • DOM事件对象与IE事件对象

    DOM 事件处理对象 IE事件对象 注意: DOM中事件处理对象中的 event.currentTarget 与 ...

  • JavaScript事件03——事件对象

    大纲:事件对象(DOM中的事件对象,IE中的事件对象,跨浏览器) 一、事件对象 什么是事件对象? 在触发DOM上的...

  • 原生事件对象

    事件对象: 每当触发事件时,就会产生一个事件对象(不管是DOM 0 还是DOM2 都有事件对象)[ 事件对象操作的...

  • 事件对象

    什么是事件对象?在触发DOM上的事件时都会产生一个对象 事件对象event DOM中的事件对象 (1) type属...

  • DOM事件(二)

    一、 事件对象 1.1 DOM中的事件对象 在触发DOM上的某个事件时,会产生一个事件对象event: event...

  • Dom事件

    基本概念 Dom事件级别 Dom事件模型 Dom事件流 描述Dom事件捕获的具体流程 Event对象的常见应用 自...

  • 网易微专业-DOM编程艺术 05 事件

    1、DOM事件⑴主要内容▪事件流▪事件注册▪事件对象▪事件分类▪事件代理 ⑵什么是DOM事件▪点击一个DOM元素▪...

  • DOM事件类

    基本概念:DOM事件的级别 DOM事件模型 DOM事件流 描述DOM事件捕获的具体流 Event对象的常见应用 自...

网友评论

      本文标题:DOM 事件源对象

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