代码试验
当函数当做方法使用时,this指向直接对象。
target 事件属性返回触发事件的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-常见事件属性和方法</title>
<style>
div {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div>123</div>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象(元素)
// this 返回的是绑定事件的对象(元素)
var div = document.querySelector('div')
div.addEventListener('click', function(e){
console.log(e.target);
console.log(this);
})
</script>
</body>
</html>
在此程序中暂无明显差别
都是指向了同一个
不过当我们在列表下使用时,就明显有区别了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-常见事件属性和方法</title>
<style>
ul {
width: 100px;
height: 120px;
background-color: yellowgreen;
}
ul li {
margin-bottom: 5px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>zxc</li>
<li>asd</li>
<li>qwe</li>
</ul>
<script>
// 常见事件对象的属性和方法
// 1. e.target 返回的是触发事件的对象(元素)
// this 返回的是绑定事件的对象(元素)
var ul = document.querySelector('ul')
ul.addEventListener('click', function (e){
console.log(this);
console.log(e.target);
})
</script>
</body>
</html>
此时看图,当点击了ul标签时this 和 e.target都指向ul。这是正常的
不过当点击ul的某个li标签时,e.target指向则是被点击的li标签。this仍是ul。因为我们知道的this取决于谁调用,谁调用我,this就指向谁,跟如何定义无关。而e.target触发事件的对象的引用(某个dom元素)。当事件处理程序在事件的冒泡或捕获阶段被调用。
this和e.target的区别
this 与 e.target区别:
js中事件是会冒泡的,故this会冒泡而 e.target 不冒泡,它就是指向事件触发的dom。所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素。
最最最简单直白的区分:
就是this在事件中看它绑定的是哪个元素,指向的就是谁。
e.target触发了哪个元素就是哪个元素。