oDiv.onclick = function () {
console.log("第一个事件");
};
oDiv.onclick = function () {
console.log("第二个事件");
};
我们这种绑定方式, 只会执行第二个, 第一个就没了
如果想要两个都存在, 我们可以使用 事件监听的方式 去给元素绑定事件
使用 addEventListener 的方式添加
在 IE 中要使用 attachEvent
三、事件监听
1、addEventListener (非 IE7 8 下使用)
语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)
js复制代码
oDiv.addEventListener(
"click",
function () {
console.log("我是第一个事件");
},
false
);
oDiv.addEventListener(
"click",
function () {
console.log("我是第二个事件");
},
false
);
点击 div 时, 两个函数都会执行, 并且会按照你书写的顺序执行
先打印 我是第一个事件, 然后打印 我是第二个事件
注意: 事件类型不要写 on, 点击事件就是 click, 不是 onclick
1)案例-选项卡（用let版本）
js复制代码
/**
* 给 header 内的 三个 li 添加点击事件
*
* 当点击到 header 内的 li 的时候, 将 content 内对应顺序的 li 展示
*/
// var lis = document.querySelectorAll('li') // 错误写法: 会获取到页面所有的 li
// console.log(lis)
var lis = document.querySelectorAll('.header li')
var lis_c = document.querySelectorAll('.content li')
// 这个循环只是为了给 每一个 header 内的 li 添加一个 事件, 其他没有任何用处
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
// 1. 取消 header 和 content 内 所有 li 的类名
for (var k = 0; k < lis.length; k++) {
lis[k].className = ""
lis_c[k].className = ""
}
// 2. 给点击的 header 内的 li 添加类名
lis[i].className = "active"
// 3. 给对应顺序的 content 内的 li 添加类名
lis_c[i].className = "active"
})
}
2)案例-选项卡（why版本）
js复制代码
var header = document.querySelectorAll('.header li')
var content = document.querySelectorAll('.content li')
for (var i = 0; i < header.length; i++) {
header[i].dataset.index = i
header[i].onclick = function () {
var index = this.dataset.index
for (var k = 0; k < header.length; k++) {
header[k].classList.remove('active')
content[k].classList.remove('active')
}
header[index].classList.add('active')
content[index].classList.add('active')
}
}
2、attachEvent (IE 7 8 下 使用)
语法: 元素.attachEvent('事件类型', 事件处理函数)
js复制代码
oDiv.attachEvent("click", function () {
console.log("我是第一个事件");
});
oDiv.attachEvent("click", function () {
console.log("我是第二个事件");
});