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