jq 获取dom对象this和event.target
几天学习Ajax,看别人在点击事件获取dom时用event.target获取,发现很多不知道的地方。
一、先说说区别
1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);
比如：event.target和$(event.target)的使用：
先上我用来测试的html
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq 获取dom对象this、event.target</title>
<script type="text/javascript" src="../js/jquery1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".box1").on("click",function(event){
$("#temp1").html("clicked: " + event.target.nodeName);
$(event.target).css("color","#FF3300");
})
});
$(function(){
$(".box2").on("click",function(event){
$("#temp2").html("clicked: " + this.nodeName);
$(this).css("color","#FF3300");
event.stopPropagation();
})
});
</script>
</head>
<body>
<div id="temp1"></div>
<ul class="box1" style="padding:20px; background:#FFFFFF">
<li>第一行
<ul>
<li>这是公告标题1</li>
<li>这是公告标题2</li>
<li>这是公告标题3</li>
<li>这是公告标题4</li>
</ul>
</li>
</ul>
<div id="temp2"></div>
<ul class="box2" style="padding:20px; background:#FFFFFF">
<li>第一行
<ul>
<li>这是公告标题1</li>
<li>这是公告标题2</li>
<li>这是公告标题3</li>
<li>这是公告标题4</li>
</ul>
</li>
</ul>
</body>
</html>
在同操作的时候，this和event.terget的表现形式不一样。(
event.stopPropagation(); 阻止js事件冒泡)
二、我还发现一个有趣的是on 和 link 、live、delegate的用法也有很多说法
.bind()是直接绑定在元素上 .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。 .delegate()则是更精确的小范围使用事件代理，性能优于.live() .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制，而且。on.可以方法连缀，用着很方便。所以，现在用.on是最好的。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
