day 24
事件监听器
1.addEventListener:用于监听特定元素上的事件(如点击、输入、鼠标移动等),并在这些事件发生时执行相应的事件处理函数
格式(不带on事件名,事件处理函数,bool值)
oDiv.addEventListener("click", function () {
console.log("ok");
2.事件监听器和普通添加事件的区别
1)事件监听器可以给一个DOM对象同时添加多个相同事件名,当事件触发时,对应的事件处理函数都会执行,普通的添加方式后面的会覆盖前面的
outer.addEventListener("click", function () {
console.log(1);
});
outer.addEventListener("click", function () {
console.log(2);
});
2)事件监听器支持捕获
inner.addEventListener(
"click",
function () {
console.log("inner");
},
true
);
outer.addEventListener(
"click",
function () {
console.log("outer");
},
true
);
默认行为
1.一个事件没有给对应的事件处理函数,当这个事件触发时,默认呈现的效果,称为事件默认行为
2.阻止默认行为:e.preventDefault() /return false;
subNav.onclick = function (e) {
// e.preventDefault(); };
3.在事件监听器中return false无效
事件委托
1.事件委托:利用事件冒泡的原理,把本应该添加到某个DOM对象的事件,添加到它的父级元素上(外层)
2.目的:让新增的DOM对象具有相同的事件 好处:减少了事件添加的次数,提高了执行效率
oUl.onclick = function (e) {
if (e.target.tagName == "LI") {
console.log("ok");
}
};
oBtn.onclick = function () {
for (var i = 0; i < 5; i++) {
var oLi = document.createElement("li");
oUl.appendChild(oLi);
}
};