版权声明:个人笔记,不喜勿喷 https://blog.csdn.net/qq_39571197/article/details/88096567
对象形式的handler、对象形式的EventListenerOptions
window.addEventListener(type,handler,EventListenerOptions)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
[hide] {
display: none;
}
</style>
</head>
<body>
<h1>
<a id="aHello" href="#hello">hello</a>
</h1>
<button name="submit">提交<span hide>*</span></button>
<button name="warning">警告<span hide>*</span></button>
<button name="delete">删除<span hide>*</span></button>
<button name="confirm">确定<span hide>*</span></button>
<script>
// 特性一,对象形式的第三个参数 {capture,once,passive}
aHello.addEventListener('click', function () {
console.log(this.textContent);
});
window.addEventListener('click', function otherHandler1() {
console.log('otherHandler1');
}, true); // useCapture 捕获true、冒泡false(默认)
window.addEventListener('click', function (evt) {
console.log('我只触发一次,开启passive时观察锚点');
evt.preventDefault();
}, {
capture: true, // 同useCapture
once: true,
passive: true, // 被动模式,提升性能,
/**
* 核心原理:内部无法使用evt.preventDefault()
* 浏览器不需要再等待回调执行完成之后,才执行默认行为。
* 抛出错误:Unable to preventDefault inside passive event listener invocation.
*/
}
);
// 特性二,对象形式的handler
window.addEventListener('click', {
handleEvent: function entry(evt) {
if (evt.target.nodeName.toUpperCase() !== 'BUTTON') return;
let handler = this[evt.target.name]; // 'on' + evt.target.name
if (handler) {
handler.call(event.target, evt);
}
},
delete(evt) {
console.log(this.textContent, this.innerText, this.innerHTML);
console.log(this.nodeValue); // null,因为只能用于文本节点
console.log(this.childNodes[0].nodeValue); // button标签里,第一个文本节点
this.textContent += 1;
},
confirm(evt) {
// innerText会受样式影响,textContent不会
console.log(this.textContent, this.innerText, this.innerHTML);
console.log(this.nodeValue); // null,因为只能用于文本节点
console.log(this.childNodes[0].nodeValue); // button标签里,第一个文本节点
this.textContent += 1;
},
});
</script>
</body>
</html>