E.tar get is the target object, E. event is the event of the target, and event. srcelement captures the object of the current event.
1.
1 $ (function () {2 $ ("Li: Has (UL )"). click (function (e) {3 if(this==e.tar get) {4 $ (this ). children (). toggle (); 5 Border (this).css ("list-style-image", ($ (this ). children (). is (": hidden ")? "Url(plus.gif)": "url(minus.gif)") 6} 7 return false; // avoid unnecessary event obfuscation. CSS ("cursor", "Pointer "). click (); // triggered when loading event 9 10 // For menus without subitems, set 11 $ ("Li: Not (: Has (UL )) "2.16.css ({12" cursor ":" default ", 13" list-style-image ":" NONE "14}); 15 });
Specific problem analysis; current goal
Indicates the clicked object in the event;
Loader event: loads objects;
E is only a parameter. Any value can be set;
1 $(function(){2 $(document).bind("click", function (e) {3 $(e.target).closest("p").css("color","red");4 })5 });
E.tar get is the event source. For example, if you click <input type = 'button 'value = 'true'/>, the event source is the button. Upload (e.tar get) indicates passing in the event source to obtain the object "button", which is equivalent to methods such as document. getelementbyid.
2.
Similar to flex, events in Javascript also exist. Capture, trigger, and bubble three nodes. A common situation is that when a sub-Div triggers an event, if the parent Div listens to similar events, it will also trigger together and bubble up
Jquery will pass a parameter to the event listening function by default, which is generally named event or E (optional or any name)
E. The event parameter supports the following attributes:
Event. stoppropagation (); Method for stopping event bubbling
Event. preventdefault (); default organizational behavior, for example, jump to a hyperlink
Simpler Method:
Return false, which has the same effect on both of the above
Event. Type --- event type, such as click
Event.tar get --- HTML Element Object of the event
Event. relatedtarget () -- for example, when a Mouseover event is triggered, related elements, such as another mouseout Element
Event. pagex ()/event. Pagey () -- relative to the X and Y coordinates of the page
Event. Which () -- get the keyboard or mouse key value related to the event
Event. metakey () -- determines whether the event contains the ctrl key.
Event. originalevent () -- point to the original event object
3. event. srcelement can capture the objects of the current event. For example, event. srcelement. tagname can capture the activity tag name.
Note that all obtained tags are expressed in uppercase, such as "TD", "TR", and ".
<SCRIPT type = "text/JavaScript"> function tdclick () {If (event. srcelement. tagname. tolowercase () = 'td ') Alert ("row:" + (event. srcelement. parentnode. rowindex + 1) + "column:" + (event. srcelement. cellindex + 1) ;}</SCRIPT>
In ie, the event object has the srcelement attribute, but does not have the target attribute. In Firefox, the event object has the target attribute, but does not have the srcelement attribute. but their role is equivalent. Solution: Use OBJ (OBJ = event. srcelement? Event. srcelement: event.targettoken used to replace event.tar get under firefox.
Event. srcelement. selectedindex is generally used on the select object:
<Input type = button value = go Title = "? Page = 1 "> <script language =" JavaScript "> function f () {alert ('index. ASP '+ event. srcelement. title) location. href = 'index. ASP '+ event. srcelement. title} </SCRIPT> <a Title = "A test"> A test </a> <br> <Table border = 1 width = "200"> <tr Title =" tr test "> <TD> tr </TD> </tr> </table> <Table border = 1 width =" 200 "> <tr> <TD Title =" TD test "> TD </TD> </tr> </table> <SELECT> <option value =" 1 "> 1 </option> <option value =" 2 "> 2 </option> <option value = "3"> 3 </option> <option value = "4"> 4 </option> <option value = "5"> 5 </option> </SELECT>
Child and parent tags of event. srcelement:
The first sub-tag is
Event. srcelement. firstchild
The last one is
Event. srcelement. lastchild
You can also use
Event. srcelement. Children [I]
Event. srcelement. childnode [I]
As for event. srcelement. parentelement, it refers to the previous object of the object where the mouse is located.
E.tar get and E. Event and event. srcelement