每一個點擊事件都會有一個event對象,每一個event對象都有一個target和currentTarget屬性,它們有什么區(qū)別呢?
上代碼
// html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
padding-left: 200px;
}
div {
border: 1px solid #777;
height: 300px;
width: 300px;
}
button {
margin: 100px;
}
</style>
</head>
<body>
<button onclick="clickFun1();">click</button>
<div onclick="clickFun2();">
<button>click2</button>
</div>
</body>
</html>
// js代碼
<script>
function clickFun1() {
console.log('target', event.target);
console.log('currentTarget', event.currentTarget);
}
function clickFun2() {
console.log('target', event.target);
console.log('currentTarget', event.currentTarget);
}
</script>
- 點擊button1時,target和currentTarget都指向了button按鈕
- 點擊button2時,target指向button標簽,currentTarget指向了div標簽
- 點擊button2所在div時,target和currentTarget都指向了div標簽
總結(jié)
- target指向的是你點擊的標簽
- currentTarget指向的是你綁定事件的標簽
- 當綁定事件的標簽和點擊的標簽一致時,target和currentTarget指向了同一個標簽
