java基础学习-事件对象

DOM事件对象

在DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为event 的对象中。

这个对象包含了一些基本信息，比如导致事件的元素、发生的事件类型，以及可能与特定事件相关的任何其他数据。

例如，鼠标操作导致的事件会生成鼠标位置信息，而键盘操作导致的事件会生成与被按下的键有关的信息。

event常用公共属性和方法

属性/方法	类型	读/写	说明
currentTarget	元素	只读	当前事件处理程序所在的元素
target	元素	只读	事件目标
bubbles	布尔值	只读	表示事件是否冒泡
type	字符串	只读	被触发的事件类型
cancelable	布尔值	只读	表示是否可以取消事件的默认行为
preventDefault()	函数	只读	用于取消事件的默认行为。只有cancelable 为true 才可以调用这个方法
stopPropagation()	函数	只读	用于取消所有后续事件捕获或事件冒泡。只有bubbles为true 才可以调用这个方法

在事件处理程序内部，this 对象始终等于currentTarget 的值，而target 只包含事件的实际目标。
this、currentTarget 和target 的值一样

let btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log(event.currentTarget === this); // true
console.log(event.target === this); // true
};

this、currentTarget 和target 的值不一样

document.body.onclick = function(event) {
console.log(event.currentTarget === document.body); // true 注册事件处理程序的元素
console.log(this === document.body); // true
console.log(event.target === document.getElementById("myBtn")); // true  click 事件真正的目标
};

stopPropagation()方法用于立即阻止事件流在DOM结构中传播，取消后续的事件捕获或冒泡。

//添加到按钮的事件处理程序中调用stopPropagation()，可以阻止document.body 上注册的事件处理程序执行
let btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log("Clicked");
event.stopPropagation();
};
document.body.onclick = function(event) {
console.log("Body clicked");
};

说明：如果这个例子中不调用stopPropagation()，那么点击按钮就会打印两条消息。但这里由于click事件不会传播到document.body，因此onclick 事件处理程序永远不会执行。

IE事件对象

与DOM 事件对象不同， IE 事件对象可以基于事件处理程序被指定的方式以不同方式来访问。

• 如果事件处理程序是使用DOM0 方式指定的，则event 对象只是window 对象的一个属性

var btn = document.getElementById("myBtn");
btn.onclick = function() {
let event = window.event;
console.log(event.type); // "click"
};

• 如果是使用HTML 属性方式指定的事件处理程序，则event 对象同样可以通过变量event 访问（与DOM 模型一样)

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event) {
console.log(event.type); // "click"
});

event常用公共属性和方法

属性/方法	类型	读/写	说明
cancelBubble	布尔值	只读	默认为false，设置为true 可以取消冒泡（与DOM 的stopPropagation()方法相同）
returnValue	布尔值	只读	默认为true，设置为false 可以取消事件默认行为（与DOM 的preventDefault()方法相同）
srcElement	元素	只读	事件目标（与DOM 的target 属性相同）
type	字符串	只读	被触发的事件类型

跨浏览器事件对象

var EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};

这里一共给EventUtil 增加了4 个新方法。
首先是getEvent()，其返回对event 对象的引用。
第二个方法是getTarget()，其返回事件目标。

let btn = document.getElementById("myBtn");
btn.onclick = function(event) {
console.log("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event) {
console.log("Body clicked");
};