其他分享
首页 > 其他分享> > 13.3 事件对象

13.3 事件对象

作者:互联网

一、DOM 中的事件对象

event 对象会传入事件处理函数中

var btn = document.getElementById('myBtn');
btn.onclick = function(event) {
    console.log(event.type);
};
btn.addEventListener('click',function(event) {
    console.log(event.type);
},false);

通过 HTML 特性指定时,event 对象保存在 event 变量中

<input type='button' value='click me' οnclick='alert(event.type)' />

所有事件的 event 对象都包含以下属性和方法

属性/方法 说明
bubbles 表示事件是否冒泡
cancelable 表示是否可以取消事件的默认行为
currentTarget 事件处理程序正在处理事件的元素
defaultPrevented 是否调用了 preventDefault()
detail 与事件相关的细节信息
eventPhase 调用事件处理程序的阶段:1.捕获阶段2.处于目标3.冒泡阶段
preventDefault() 取消事件的默认行为
stopImmediatePropagation() 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3 中新增)
stopPropagation() 取消事件的进一步捕获或冒泡
target 事件的目标
trusted true 为浏览器生成,false 为开发人员创建的事件(DOM3 中新增)
type 事件的类型
view 与事件关联的抽象视图,等同于发生事件的 window 对象

对于处理程序来说,this 指向 currentTarget,不一定等于 target
例如将 click 事件添加到包含多个 img 的 div 上时,this 指向 div,但是 target 为 img,因为需要被点击并进行处理的是图像

在需要通过一个函数处理多个事件时,可以使用 type 属性

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

二、IE 中的事件对象

使用 DOM0级方法添加时,event 对象作为 window 对象的属性存在

var btn = document.getElementById('myBtn');
btn.onclick = function() {
    var event = window.event;
    console.log(event.type);
};

使用 attachEvent 添加时,event 对象会传入事件处理函数中

btn.attachEvent('onclick',function(event) {
    console.log(event.type);
});

通过 HTML 特性指定时,event 对象保存在 event 变量中

<input type='button' value='click me' οnclick='alert(event.type)' />

所有事件的 event 对象都包含以下属性和方法

属性/方法 说明
cancelBubble 默认为 false,表示是否可以取消事件冒泡,设置为 true 时可以取消(同 DOM 中的stopPropagation())
returnValue 默认为 true,表示是否可以取消事件的默认行为,设置为 false 时可以取消(同 DOM 中的 preventDefault() )
srcElement 事件的目标(同 DOM 中的 target)
type 事件的类型

三、跨浏览器的事件对象

在 EventUtil 对象中添加新的方法,用于确定 event 对象、target、取消默认行为和冒泡的方法,类似于跨浏览器的事件处理程序,进行判断-不同的执行方式

糖小昔 发布了54 篇原创文章 · 获赞 0 · 访问量 755 私信 关注

标签:target,对象,13.3,事件,btn,type,event
来源: https://blog.csdn.net/weixin_44774877/article/details/104089136