JQuery-3. Event Post---Custom events

jquery Custom Event Trigger Event

It is well known that events of this type, such as MouseDown, click, KeyDown, and so on, are provided by the browser and are popularly called native events, and this type of event is required to have interactive behavior to be triggered.

Bind a native event in jquery by the on method

$ (' #elem '). On (' click ', Function () {    alert ("Trigger System Event")});

Alert needs to be executed: a user must click on it. If a different user interaction can trigger the event automatically at some point? Normally it is not possible, but jquery solves this problem by providing a trigger method to trigger browser events

So we can do this:

$ (' #elem '). Trigger (' click ');

On the binding on the event element, through the trigger method can be called to alert, very simple!

Take a look. What is trigger?

In simple terms, all handlers and behaviors are executed based on the given event type bound to the matching element.

Trigger, in addition to being able to trigger browser events, also supports custom events, and custom time also supports passing parameters

$ (' #elem '). On (' Aaron ', function (EVENT,ARG1,ARG2) {alert ("Touch Custom Time")}), $ (' #elem '). Trigger (' Aaron ', [' Parameter 1 ', ' parameter 2 '])

Trigger trigger browser Events to differ from custom events?

• Custom Event object, which is a native implementation of the jquery simulation
• Custom events can pass parameters

<div class= "Left" >
<div><span></span><span>0</span> clicks </div>
<button> Direct Click </button>
<button> by customizing Click </button>
</div>
<script type= "Text/javascript" >

Click Update Count
$ ("Button:first"). Click (function (event,bottonname) {
Bottonname = Bottonname | | ' First ';
Update ($ ("Span:first"), $ ("Span:last"), bottonname);
});

By custom event invocation, number of updates
$ ("Button:last"). Click (function () {
$ ("Button:first"). Trigger (' Click ', ' last ');
});

function Update (first,last,bottonname) {
First.text (Bottonname);
var n = parseint (Last.text (), 10);
Last.text (n + 1);
}
</script>

jquery Custom Event Triggerhandler Event

The trigger event also features a feature that bubbles on the DOM tree , so if you want to block bubbling you need to return false in the event handler or call the. Stoppropagation () method in the event object to stop the event bubbling

The trigger event is capable of triggering native and custom, but there is an unavoidable problem : Event object events cannot be implemented perfectly , after all, one is a browser, and one is its own simulation. Although. Trigger () Simulates the event object, it does not perfectly replicate events that occur naturally, to trigger event handlers that are bound by jQuery, without triggering native events, using. Triggerhandler () instead

The use of Triggerhandler and trigger is the same, focusing on the difference:

• Triggerhandler does not trigger the default behavior of the browser, the. Triggerhandler ("submit") will not invoke the. Submit () on the form.
• . Trigger () affects all elements that match the JQuery object, whereas. Triggerhandler () affects only the first matched element
• Events that are triggered by using. Triggerhandler () do not bubble up in the DOM tree. If they are not triggered directly by the target element, then it will not do any processing
• In contrast to the normal method of returning a JQuery object (so that you can use chained usage),. Triggerhandler () returns the return value of the last processed event. If no events are triggered, the undefined is returned

<div class= "Left" >
<div id= "Accident" >
<a>triggerhandler Events </a>
<input type= "Text" >
</div>
<button> event bubbling, triggering browser default focus behavior </button><br><br>
<button> does not bubble, does not trigger browser default focus behavior </button>
</div>
<script type= "Text/javascript" >

Binding a focus event to input
$ ("input"). On ("Focus", function (Event,title) {
$ (this). Val (title)
});

$ ("#accident"). On ("click", Function () {
Alert ("Trigger triggered events will bubble up in the DOM tree");
});
Trigger Trigger focus
$ ("Button:first"). Click (function () {
$ ("a"). Trigger ("click");
$ ("input"). Trigger ("focus");
});

Triggerhandler Trigger Focus
$ ("Button:last"). Click (function () {
$ ("a"). Triggerhandler ("click");
$ ("input"). Triggerhandler ("Focus", "no default focus event triggered");
});



</script>

JQuery-3. Event Post---Custom events