Home > Developer > Web Develop
Transferred from: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html
The difference between 1.this and Event.target:
JS event is bubbling, so this is changeable, but event.target will not change, it is always directly accept the event of the target DOM element;
Both 2.this and Event.target are DOM objects, and if you want to use the methods in Jquey, you can convert them to jquery objects: $ (this) and $ (event.target);
For example: Event.target and $ (event.target) use:
< ! DOCTYPEHTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><Scripttype= "Text/javascript"src= "Http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></Script><Scripttype= "Text/javascript">$(function(){$("Li"). Live ("Click",function(Event) {$ ("#temp"). HTML ("clicked:" +event.target.nodeName); $ (event.target). CSS ("Color","#FF3300");})});</Script></Head> <Body><DivID= "Temp"></Div><ulclass= "Jq-content-box"style= "padding:20px; background: #FFFFFF"><Li>First line<ul><Li>This is the announcement Heading 1.</Li><Li>This is the announcement Heading 2.</Li><Li>This is the announcement heading 3.</Li><Li>This is the announcement heading 4.</Li></ul></Li></ul></Body></HTML>
If the above example is changed to use this:
< ! DOCTYPEHTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><Scripttype= "Text/javascript"src= "Http://www.css88.com/tool/css3Preview/jquery-1.4.2.min.js"></Script><Scripttype= "Text/javascript">$(function(){$("Li"). Live ("Click",function(Event) {$ ("#temp"). HTML ("clicked:" +event.target.nodeName); $ ( This). CSS ("Color","#FF3300"); Event.stoppropagation ();});</Script></Head> <Body><DivID= "Temp"></Div><ulclass= "Jq-content-box"style= "padding:20px; background: #FFFFFF"><Li>First line<ul><Li>This is the announcement Heading 1.</Li><Li>This is the announcement Heading 2.</Li><Li>This is the announcement heading 3.</Li><Li>This is the announcement heading 4.</Li></ul></Li></ul></Body></HTML>
Notice the event.stoppropagation here (); This is to stop the event bubbling!
Disclaimer: This document is licensed using the BY-NC-SA protocol | Web Front-end development
Reprint please indicate the use of event.target in "jquery"
[Some points of using Event.target in]jquery
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
