event.target【转载】

[转载]

1.this和event.target的区别：

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

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

比如：event.target和$(event.target)的使用：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>event.target</title>
 6     <script type="text/javascript" src="js/jquery.js"></script>
 7     <script type="text/javascript">
 8     $(function(){
 9         $("li").live("click",function(event){
10         $("#temp").html("clicked: " + event.target.nodeName);
11         $(event.target).css("color","#FF3300");
12         })
13     });
14     </script>
15     </head>
16
17     <body>
18         <div id="temp"></div>
19         <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
20             <li>第一行
21                 <ul>
22                     <li>这是公告标题1</li>
23                     <li>这是公告标题2</li>
24                     <li>这是公告标题3</li>
25                     <li>这是公告标题4</li>
26                 </ul>
27             </li>
28         </ul>
29     </body>
30     </html>

上面的例子如果改成使用this：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>event.target</title>
 6     <script type="text/javascript" src="js/jquery.js"></script>
 7     <script type="text/javascript">
 8     $(function(){
 9         $("li").live("click",function(event){
10         $("#temp").html("clicked: " + event.target.nodeName);
11         $(this).css("color","#FF3300");
12         event.stopPropagation();
13         })
14     });
15     </script>
16     </head>
17
18     <body>
19         <div id="temp"></div>
20         <ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
21             <li>第一行
22                 <ul>
23                     <li>这是公告标题1</li>
24                     <li>这是公告标题2</li>
25                     <li>这是公告标题3</li>
26                     <li>这是公告标题4</li>
27                 </ul>
28             </li>
29         </ul>
30     </body>
31     </html>

注意这里的event.stopPropagation();这个是阻止事件冒泡的！

若不加event.stopPropagation 将会出现下列效果

ie下不兼容 event.target || event.srcElement

案例：

<!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>无标题文档</title>
<link href="css/admin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
body {background:#EBF4F9 url(images/sellcard1_03.jpg) repeat-x;
}
.now>a{ color:#000;}   //ie6不支持子选择符
</style>
</head>
<body>
<div class="sidesection"><h2 class="sideh2"><a href="#"><img src="data:images/sellcard1_06.jpg" alt="返回我的工作台" /></a></h2>
</div>
<div class="sidesection"><h2 class="sideh2"><img src="data:images/sellcard1_09.jpg" alt="功能权限" /></h2><ul class="sideul"><li class="titleli"><a target="main" href="订单服务.html">订单服务</a><ul><li class="titleli"><a target="main" href="处理中订单.html">处理中订单</a></li><li class="titleli"><a target="main" href="已完结订单.html">已完结订单</a></li></ul></li></ul>
</div>
<script type="text/javascript">
$(function(){$('.titleli').click(function(event){event.stopPropagation();$('.sideul').find('li.now').removeClass('now');$(this).addClass('now');})
})
</script>
</body>
</html>

View Code

//ie6不支持子选择符

冒泡：点击 “已完结订单” 上面的 “订单服务” 也会选中，并且变黑

$(this)在冒泡的情况下会发生变化，使用$(event.target)代替$(this) 此时单击已完结订单项的时候event.target指向的是a。而不是li

本文转自《jquery中使用event.target的几点》

转载于:https://www.cnblogs.com/positive/p/3445577.html

event.target【转载】相关推荐

事件源event.target
今天在了解检测浏览器是否能播放不同类型的视频时发现以下代码 <script> function supportType(e,vidType,codType){ myVid=document ...
js中event，event.srcElement，event.target在IE和firefox下的兼容性
1.window.event对象 IE:有window.event对象 firefox:没有window.event对象.可以通过函数的参数传递event对象.例如:οnmοusedοwn=func ...
js 兼容event.target
function getEventTarget(e){e=window.event||e;return e.srcElement||e.target; } 转载于:https://www.cnblog ...
event.srcElement 与event.target
event.target event.srcElement 这两个是当事件发生时的那个对象引用,相当于JQuery里的this 火狐只能用 event.target,IE只能用event.srcE ...
给父元素添加点击事件时，获取到的 event.target 为子元素（point-events: none 的妙用）
目录场景分析解决场景使用 ion-select 组件时,点击下拉图标点击事件的 event.target,不是图标本身的 DOM,而是图标子元素的 DOM 这会导致 popover 无法计 ...
JavaScript中的Event.target
event.target 一般情况下我们获取目标事件源都是谁是调用者谁就是事件源,但是当有批量的DOM需要操作的时候,要判断哪一个dom是事件源就不是很明确了,使用e.target可以准确地获取事件源 ...
什么是 event.target ？
简单来说,event.target是发生事件的元素或触发事件的元素. 假设有如下的 HTML 结构: <div onclick="clickFunc(event)" styl ...
event.target与event.currentTarget的差异
event.target与event.currentTarget的差异(完整版) 1.什么是target?什么是currentTarget? event.target 是发生事件的元素或触发事件的元素 ...
event.target与event.currentTarget的区别
event.target事件和event.currentTarget事件,经常被人们混淆.因为它们两个有时候的返回值是完全一样的,因此很具有迷惑性.然而如果真的是一样的,那当初官方就不会做这样没有意义 ...

event.target【转载】

event.target【转载】相关推荐

最新文章

热门文章