中英文网站建设,做试试彩网站,网站建设预算申请,微信ios分身版下载[转载] 1.this和event.target的区别#xff1a; js中事件是会冒泡的#xff0c;所以this是可以变化的#xff0c;但event.target不会变化#xff0c;它永远是直接接受事件的目标DOM元素#xff1b; 2.this和event.target都是dom对象#xff0c;如果要使用jquey中的方法可…[转载] 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.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 meta http-equivContent-Type contenttext/html; charsetutf-8 /5 titleevent.target/title6 script typetext/javascript srcjs/jquery.js/script7 script typetext/javascript8 $(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 idtemp/div
19 ul classJQ-content-box stylepadding: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.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 meta http-equivContent-Type contenttext/html; charsetutf-8 /5 titleevent.target/title6 script typetext/javascript srcjs/jquery.js/script7 script typetext/javascript8 $(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 idtemp/div
20 ul classJQ-content-box stylepadding: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 xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-8 /
title无标题文档/title
link hrefcss/admin.css relstylesheet typetext/css /
script typetext/javascript srcjs/jquery.js/script
style typetext/css
body {background:#EBF4F9 url(images/sellcard1_03.jpg) repeat-x;
}
.nowa{ color:#000;} //ie6不支持子选择符
/style
/head
body
div classsidesectionh2 classsideh2a href#img srcimages/sellcard1_06.jpg alt返回我的工作台 //a/h2
/div
div classsidesectionh2 classsideh2img srcimages/sellcard1_09.jpg alt功能权限 //h2ul classsideulli classtitlelia targetmain href订单服务.html订单服务/aulli classtitlelia targetmain href处理中订单.html处理中订单/a/lili classtitlelia targetmain href已完结订单.html已完结订单/a/li/ul/li/ul
/div
script typetext/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
