JS事件委托和事件分派
文章目录
JS事件委托
<body>
<ul class="wrap">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let oWrap = document.querySelector(".wrap")
oWrap.addEventListener("click", function (e) {
if (e.target.tagName.toLowerCase() === "li") {
console.log(e.target.innerText);
}
},false)
</script>
</body>
JS事件分派
<body>
<div class="wrap">1</div>
<script>
let oWrap = document.querySelector(".wrap")
let assignObj = {
mousedown: function (e) {
console.log("我是mousedown");
},
mousemove: function (e) {
console.log("我是mousemove");
},
mouseup: function (e) {
console.log("我是mouseup");
},
}
oWrap.addEventListener("mousedown", assignTask, false)
oWrap.addEventListener("mousemove", assignTask, false)
oWrap.addEventListener("mouseup", assignTask, false)
function assignTask(e) {
if (assignObj[e.type] && typeof assignObj[e.type] === "function") {
assignObj[e.type]()
}
}
</script>
</body>
