Trigger () The event object's pit

• Problem introduction, first put a piece of problematic code, if you do not understand trigger () This function, you really do not see the code is wrong. The completion of the function is a style converter, want to let the page after loading self-trigger Click event Hide three buttons, but the effect is not hidden buttons: The console will error: The target property is undefined , must be an event This event object did not get the problem, the program to 17 line error stop, which makes me wonder: The custom triggered event there is no event object?

1<div id= "switcher" class= "Switcher" >23<button id= "Switcher-default" >Default</button>4<button id= "Switcher-narrow" >Narrow</button>5<button id= "Switcher-large" >Large</button>6</div>7<script type= "Test/javascript" >8 functionfunc () {9     if(!$ (Event.target). Is (' button ')){Ten$ (' #switcher button '). Toggle (' slow ')); One     } A   } - functionSetbodyclass (classname) { -     //... the } -$ (' #switcher '). On (' click ',function(){ -     if($ (Event.target). Is (' button ')){ -       varClassbody=event.target.id.split ('-') [1]; + Setbodyclass (classbody); -     } +}). On (' click ', func); A$ (' #switcher '). Trigger (' click ')); at</script>

• Question and see if there are any event objects,undefinedDon't think jquery really does not support custom event objects In fact, this is the way code is written.undefined, there will be detailed code validation later!

  1$ (' #switcher '). On (' click ',function(){2     //if ($ (event.target). Is (' button ')) {3     //var classbody=event.target.id.split ('-') [1];4     //Setbodyclass (classbody);5     //}6 Console.log (event);7    });8  9$ (' #switcher '). Trigger (' click ');

  Puzzled I looked at the official document under jquery in the last sentence: "Although trigger () mimics the role of the activation event, complete with the synthetic event object, it does not completely replicate the natural occurrences of the event". Why does the document actually say that there is an event object, except that the event object is not the same as the natural event object? Before I thought that the manual trigger is not the event object, the manual trigger is only the undefined that is caused by the mechanical execution of the event handler ...

as of JQuery 1.3, .trigger() ed events bubble up the DOM tree; A event handler can stop the bubbling by returning from the handler or calling the .stopPropagation() method on the event object passed into the event. Although .trigger() simulates an event activation, complete with a synthesized event object, it does not perfectly replicate a Naturally-occurring event.

Since there is no event to execute, then create an event object, see the official website gave such an example, self-created an instance of jquery.event () Event object:

var event = jQuery.Event( "submit" ); $( "form:first" ).trigger( event ); if ( event.isDefaultPrevented() ) { // Perform an action... }

• Problem verification, the corresponding my code will be changed to: (This is also the creation of jquery.event Instance object mode one)

1$ (' #switcher '). On (' click ',function(event) {2     if($ (Event.target). Is (' button ')){3       varClassbody=event.target.id.split ('-') [1];4 Setbodyclass (classbody);5     }6 Console.log (Event)7}). On (' click ', func);8 9 varE=jquery.event (' click ');//You can omit the New keywordTen$ (' #switcher '). Trigger (e);

To see what this self-created event object is, the target property is finally what I want.

• 1. Use triggle () The problem should be noted that the custom trigger code for the same element is written after its bound event handler code, or the event handler cannot be found when executing the custom trigger code.

2. Create jquery.event Instance object mode two ele.trigger (' EventType ') directly created

//contains event handlers 1
1$ (document). Ready (function(){2$ (' #switcher '). Trigger (' click ');3 })
Contains event handlers 24$ (' #switcher '). On (' click ',function(){5 Console.log (event);6     if($ (Event.target). Is (' button ')){7       varClassbody=event.target.id.split ('-') [1];8 Setbodyclass (classbody);9     }Ten})

target is document , and you can see that trigger () If the event object is not passed, event handler 2 events is the last event object that executes $ (' # Switcher '). Trigger (' click '); Event object in the event handler 1. If the event object's arguments are passed, the default incoming event will be overwritten as the new event object triggered by trigger () (the document example above), or directly passed in by the events handler 2. Trigger () Event object triggered (event handler 2 does not have an event now so do not overwrite, the following example):

 1  $ (' #switcher '). On (' click ', function   2   Console.log (event);  3  if  ($ (Event.target). Is (' button '  4  var  classbody= Event.target.id.split ('-') [1 5   Setbodyclass (classbody);  6   7   8  $ (' #switcher '). Trigger (' Click '); 

This event object triggered by trigger () is an instance object of jquery.event () , and I am relieved to see that the target property is correct.

• Summary: There are two ways to create a custom event object, you can use ele.trigger (' EventType ') and a custom trigger event (which, of course, automatically constructs a jquery.event instance event object), You can also construct an event object with the new keyword. But it is not necessary to pass the arguments of this event object to your event handler, which means that the event handler is undefined (in the absence of the previous event object) or using the previous the event object, which is passed, means that the event object in the event handler is a jquery.event instance object that is derived from trigger () .
• Reference:http://api.jquery.com/trigger/

Trigger () The event object's pit