<!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>事件绑定</title>
<style>
div {
border: 5px red solid;
margin-bottom: 5px;
}
button {
margin-bottom: 5px;
}
</style>
</head>
<body>
<button onclick="handlerClick()">通过 onclick 属性直接绑定事件</button>
<br>
<button id="btn">通过 id 获取html元素，使用 onclick 属性绑定事件</button>
<br>
<div id="parentDelegate">
<button data-event="event1">用事件委托的方式绑定事件1</button>
<button data-event="event2">用事件委托的方式绑定事件2</button>
通过 id 获取父级元素的方式绑定事件
</div>
<div class="parentDelegate">
<button data-event="event1">用事件委托的方式绑定事件1</button>
<button data-event="event2">用事件委托的方式绑定事件2</button>
通过 class 获取父级元素的方式绑定事件
</div>
<br>
</body>
<script>
function handlerClick() {
console.log("--------handlerClick--------");
console.log(this);
console.log(Array.from(arguments));
}
document.getElementById("btn").onclick = handlerClick;
// 事件委托，利用冒泡原理，把事件添加到父元素上，触发执行
// 1. 通过ID获取父级元素的方式绑定事件
document.getElementById("parentDelegate").addEventListener("click", function (e) {
// debugger;
console.log("--------parentDelegate for ID--------");
console.log("this: ", this.valueOf());
console.log('arguments:', Array.from(arguments).valueOf());
var target = e.target,
attributeName = "data-event",
defaultAttributeValue = "";
console.log("event target: ", e.target);
/*
es6中的${}——用于字符串拼接
https://blog.csdn.net/weixin_43207791/article/details/82740557
*/
var attributeValue = target.getAttribute(attributeName) || defaultAttributeValue;
switch (attributeValue.toLowerCase()) {
case "event1":
console.log(`${attributeValue}被点击`)
break;
case "event2":
console.log(`${attributeValue}被点击`)
break;
default:
console.log("父级元素或未知子元素被点击")
break;
}
console.log("");
});
// 2. 通过class获取父级元素的方式绑定事件
for (const parent of document.getElementsByClassName("parentDelegate")) {
parent.addEventListener("click", function (e) {
// debugger;
console.log("--------parentDelegate for class--------");
console.log("this: ", this.valueOf());
console.log('arguments:', Array.from(arguments).valueOf());
var target = e.target,
attributeName = "data-event",
defaultAttributeValue = "";
console.log("event target: ", e.target);
/*
es6中的${}——用于字符串拼接
https://blog.csdn.net/weixin_43207791/article/details/82740557
*/
var attributeValue = target.getAttribute(attributeName) || defaultAttributeValue;
switch (attributeValue.toLowerCase()) {
case "event1":
console.log(`${attributeValue}被点击`)
break;
case "event2":
console.log(`${attributeValue}被点击`)
break;
default:
console.log("父级元素或未知子元素被点击")
break;
}
console.log("");
});
}
</script>
</html>
网友评论