每一個點選事件都會有一個event對象,每一個event對象都有一個target和currentTarget屬性,它們有什麼差別呢?
上代碼
// 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标簽
總結
- target指向的是你點選的标簽
- currentTarget指向的是你綁定事件的标簽
- 當綁定事件的标簽和點選的标簽一緻時,target和currentTarget指向了同一個标簽
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)