Do not use jQuery to trigger native events

Do not use jQuery to trigger native events

This article mainly introduces how to avoid using jQuery to trigger native events. For more information, see

The JavaScript framework provides so many functions that they will fall into the trap accidentally. The more dependent the tool library, the slight changes made during modification or maintenance may affect other functions (commonly known as mines everywhere, exercise caution when walking ), especially when the legacy code is maintained many years ago. I often see an error about jQuery trigger, which allows developers to manually trigger certain events. This feature is really powerful and useful, but please follow the conventions and do not trigger the native event names in JS!

Note: I know that other JS frameworks also provide this feature-I only use jQuery as an example, because I have seen its popularity and recently encountered this problem. All tool libraries may cause the same problem. For example, fireEvent used by MooTools.

The following is a typical example of using a trigger to complete a task:

Copy the Code as follows:

// Listen to the click Event

JQuery ('. tabs A'). on ('click', function (){

// Perform some operations, such as switching the interface and loading content ..

});

 

// Trigger the click event on the last a tag

JQuery ('. tabs A'). last (). trigger ('click ');

 

The above code will open the tab label for the given index. I fully understand the reasons why developers use triggers to deal with these things. It is usually because the function to be triggered is unavailable globally, and it is easy and always available to trigger events. The problem is that the native event name is used to trigger the possible... trigger... some unspeakable injuries. Let's take a look at the content added elsewhere on the website:

Copy the Code as follows:

// Listen to all click events in the body

JQuery ('body'). on ('click', 'A', function (){

// Here you can perform some business logic processing...

 

// If the Condition met is met, perform other operations!

If (conditionMet ){

// Refresh the page?

// Open the sub-menu?

// Submit the form?

//... Lamps, Intel

}

});

 

Now there is a problem-the tab click event may be listened to by other completely independent parts, which is troublesome to handle. The best solution is to use a Custom Event name following the native event:

Copy the Code as follows:

// When listening for click events, bring custom events

JQuery ('. tabs A'). on ('click tabs-click', function (){

// Switch the tab, load the content, and so on...

});

 

// Trigger the "false" event on the last tag

JQuery ('. tabs A'). last (). trigger ('tabs-click ');

 

Now, your event trigger will no longer conflict with other listeners on the page. Conservative developers told me that you may want to avoid using trigger (the same is true for other tool libraries), but you should also add a Custom Event name!