事件源 事件处理函数 事件
- 事件源：谁触发了这个事件谁就是事件源 e.target获取事件源
- 事件处理函数：触发事件后会进行什么操作
事件监听
- addEventListener 同一个元素可以添加一个或者多个相同的事件
- 注意也可以是添加不同事件但是就失去了添加事件监听的意义
- 与一般的onclick事件不同后一个相同事件会把前面的事件覆盖
- false代表的是事件冒泡
- true代表的的是事件捕获
事件冒泡 事件捕获
- 事件冒泡：从里向外触发事件
- 事件捕获：从外向里触发事件
- 当同时存在事件冒泡和事件捕获时，向进行时间捕获然后再进行事件冒泡
- stopPropagation()阻止事件冒泡
- 嵌套关系时，如果父子都绑定了点击事件，那么子点击事件触发后，父元素的点击事件也会被触发
oParent.onclick = function(){
console.log("hasduifi")
}
oParent.onclick = function(){
console.log("123456")
}
oChild.onclick = function(){
console.log("11dsf5555sdfs")
}
- 无论是冒泡还是捕获都是点击子元素或触发父元素的事件
需求：
- 向li中动态插入随机数，并在点击的时候在控制台上输出
步骤：
- 因为for循环要点击事件先进行，所以点击随机数时并不会在控制台输出
- 解决办法是利用ul进行事件委托，也就是将li的点击委托给他的父元素
- 动态数据无法为其添加事件，一般采用事件委托的方法
代码
<!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>
ul{
background: powderblue;
}
li{
background: salmon;
}
</style>
</head>
<body>
<button>点击</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var aul = document.getElementsByTagName("ul")[0];
var ali = document.getElementsByTagName("li");
var oBtn = document.getElementsByTagName("button")[0];
for(var i =0;i<ali.length;i++){
ali[i].onclick = function(){
console.log(this.innerHTML);
}
}
oBtn.onclick = function(){
var oli = document.createElement("li");
oli.innerHTML = Math.random();
aul.appendChild(oli);
}
aul.onclick = function(e){
console.log(e.target);
if(e.target.nodeName == "LI"){
console.log(e.target.innerHTML);
}
}
// 为什么新插入的随机数并不在控制台显示？
// 因为在还没有对button进行点击事件时，for循环就已经执行完成了
// 解决办法：利用事件委托动态插入随机数，并在控制台上显示出来
</script>
</body>
</html>
效果
