点击事件
<div class=1>
<div class=2>
<div class=3>文字</div>
</div>
</div>
给三个div分别加上事件监听，点击文字，三个div都算点击了。
事件捕获与事件冒泡（取消冒泡）
- 事件捕获：当有事件监听时，先从祖先元素开始找监听函数（从外向内）；
- 事件冒泡：当有事件监听时，先从距离最近的元素开始找监听函数（从内向外）；
- W3C标准：.addEventListener(eventType,fn,bool),当bool的值不传或者值为fasly时，遵循让fn走冒泡；
- 取消冒泡：e.stoppropagation( )
function addE(div,n){
let an = n * 500
div.addEventListener('click', (e)=>{
let t = e.currentTarget
setTimeout(()=>{
t.classList.remove("x")
}, an)
}, true)
}
注：第一个参数是eventType，第二个参数是一个回调函数，第三个参数是事件模型
自定义事件
定义：开发者在自带事件之外定义一个事件；
过程：用new CustomEvent(事件名称，事件detail)构造一个自定义事件event，通过dispatchEvent(event)触发自定义事件；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<button id="b1">click</button>
</div>
</body>
</html>
const button = document.querySelector("#b1")
const event = new CustomEvent("frank",{detail:{name:"frank", age:18}})
button.addEventListener("click",()=>{
button.dispatchEvent(event)
console.log("触发了frank事件")
})
button.addEventListener("frank",(e)=>{
console.log(e.detail)
console.log("frank事件执行了")
})
事件委托
当需要监听很多元素或目前不存在的元素时可以用事件委托
方法：监听父元素，然后对元素标签进行判断，寻找你需要监听的元素或判断是不是我要监听的元素。
优点：省内存，还可以监听动态元素
- 监听多个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=wt>
<button id=1>click 1</button>
<button id=2>click 2</button>
<button id=3>click 3</button>
<button id=4>click 4</button>
<button id=5>click 5</button>
<button id=6>click 6</button>
<button id=7>click 7</button>
<button id=8>click 8</button>
<button id=9>click 9</button>
<button id=10>click 10</button>
</div>
</body>
</html>
const wt = document.querySelector("#wt")
wt.addEventListener("click",(e)=>{
const t = e.target//目标对象
if (t.tagName.toLowerCase() ==="button"){
console.log("button text是"+ t.innerText)
}
})
- 监听目前不存在的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=wt>
</div>
</body>
</html>
setTimeout(()=>{
const button = document.createElement("button")
button.textContent = "click"
wt.appendChild(button)
},1000)//一秒钟之后才有button
wt.addEventListener("click",(e)=>{
const t = e.target
if (t.tagName.toLowerCase() === 'button'){
console.log("button被执行了")
}
})
封装监听事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id=wt>
</div>
</body>
</html>
setTimeout(()=>{
const button = document.createElement("button")
button.textContent = "click"
wt.appendChild(button)
},1000)
function on(eventType,element,selector,fn){
let a = document.querySelector(element)
a.addEventListener(eventType,(e)=>{
const t = e.target
if(t.matches(selector)){
fn()
}
})
} //封装一个函数on
on("click","#wt","button",()=>{
console.log("button被点击了")
})
