关于事件的其他一些知识点
Posted 鱼鱼疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于事件的其他一些知识点相关的知识，希望对你有一定的参考价值。
作业：
1.写出焦点事件，并应用
焦点事件分为获得焦点 onfocus,失去焦点 onblur，
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" class="input"/>
</body>
<script>
var input=document.querySelector(".input");
input.onfocus=function(){
console.log("获得焦点");
};
input.onblur=function(){
console.log("失去焦点");
};
</script>
</html>
最简单的应用，当鼠标点击文本框后即可获得焦点，离开则失去焦点。
2.解释target对象
答：target对象指的是目标真正的事件触发者，可以理解他是事件方法中，event中的一个属性，专门用来明确真正触发事件的究竟是哪一个元素
代码举例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="out">
<li class="pos1"><a href="" id="1">点击1</a></li>
<li class="pos2"><a href="" id="2">点击2</a></li>
<li class="pos3"><a href="" id="3">点击3</a></li>
<li class="pos4"><a href="" id="4">点击4</a></li>
</ul>
</body>
<script>
var out=document.querySelector(".out");
out.addEventListener("click",function(e){
if(e.target.innerHTML=="点击1"){
console.log("我是点击1");
console.log(e.target);
}else if(e.target.innerHTML=="点击2"){
console.log("我是点击2");
console.log(e.target);
}else if(e.target.innerHTML=="点击3"){
console.log("我是点击3");
console.log(e.target);
}else if(e.target.innerHTML=="点击4"){
console.log("我是点击4");
console.log(e.target);
}else {
console.log(e.target);
}
},false)
</script>
</html>
在上面的代码中，并没有给每一个li或者a标签添加onclick监听，而是通过了事件的代理为其父元素ul标签设置了点击事件。因为监听的冒泡原理，所有的子元素都会触发父元素的监听事件，但此时
真正触发监听的元素，我们就可以通过target来进行获取。如果我们点击的是a标签，也就是“点击1”时，会正常触发并输出“我是点击1”，同时，通过e.targer，我们可以知道真正触发这个监听事件
的是id=1的 a标签。如果并没有点击到a标签，而是点击了 “点击1”之后的空白处，此时e.target的输出则为 class="pos1"的 i标签，由此可知，此时触发监听事件的真正元素是i标签，以上就是我对
target的理解。
3.描述事件代理的原理以及使用的原因。
答：事件的代理原理是通过监听事件的冒泡，让父元素完成子元素所需要执行的监听事件。具体的代码可以参考上一题，之所以使用事件代理，是可以避免重复的为子元素添加监听事件，从而达到性能的
优化。
4.解释target和currenttarget的区别
答：target和currenttarget的区别 target指的是事件的真正触发者，currenttarget指的是事件的监听者，当不存在冒泡或者捕获的情况下，通常两者指向的对象为同一个，但是如果存在冒泡或者捕获，
就会指向各自所产生的对象
代码举例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#out{
width: 400px;
height:400px;
background-color:yellow;
}
#in{
width: 200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="out">
<div id="in"></div>
</div>
</body>
<script>
var out=document.getElementById("out");
var inner=document.getElementById("in");
out.addEventListener("click",function(e){
console.log("我在外面");
console.log(e.target);
console.log(e.currentTarget);
},false);
inner.addEventListener("click",function(e){
console.log("冒泡了");
console.log(e.target);
console.log(e.currentTarget);
},false);
此时点击out元素时，因为不触发冒泡事件，所以e.target和e.currentTarget的输出结果均为id=out的div，也就是大盒子触发了监听事件。
但是当点击in元素的时候，测触发冒泡，此时in元素的 e.target和e.currentTarget相同（因为原本点击的就是In元素）,但因为冒泡，其父元素out也会产生监听事件
而此时 out元素的 e.target 为 in 元素，因为确实点击的是 in元素(target指向真正的触发元素),而e.currentTarget输出则为out元素（产生监听的事件的元素）。
稍微自己总结了下，也不知道对不对：在通常情况下 e.target和e.currentTarget相同而在产生了冒泡或者捕获的元素中，非点击元素的 e.target和e.currentTarget不同，
e.target指向被点击的子类对象，e.currentTarget则指向其父元素。
5.描述this关键字的使用
this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象
最简单的例子
var test={
x:10,
y:15,
sum:function (){
console.log(this.x+this.y);
}
};
test.sum();
在这里this指的是函数本身，也就是test，this.x也就是test.x既test函数下的x属性（y同理）,这是最简单的一种理解。也就是说this就是为了调用其本身的数据而存在。
以上是关于关于事件的其他一些知识点的主要内容，如果未能解决你的问题，请参考以下文章