浅谈this和e.target的异同

转载自品略图书馆 http://www.pinlue.com/article/2020/04/1905/5210196513749.html

每次触发DOM事件时会产生一个事件对象(也称event对象),此处的参数e接收事件对象。而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示该DOM元素,然后在获取其相应的属性值。

this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;

.this和event.target都是dom对象

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>e.target</title>

<script src="js/jquery-1.11.3.js"></script>

</head>

<body>

<div id="temp"></div>

<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">

<li>第一行

<ul>

<li>这是公告标题1</li>

<li>这是公告标题2</li>

<li>这是公告标题3</li>

<li>这是公告标题4</li>

</ul>

</li>

</ul>

<script>

$(function(){

$("li").on("click",function(e){

console.log(e.target);

console.log(this);

$("#temp").html("clicked: " + e.target.nodeName);

$(e.target).css("color","#FF3300");

})

});

</script>

</body>

</html>

发布了60 篇原创文章 · 获赞 61 · 访问量 15万+

猜你喜欢

转载自blog.csdn.net/yihuliunian/article/details/105633953