Don't use jQuery to trigger native events

Don't use jQuery to trigger native events_jquery

WBOY

Release： 2016-05-16 16:57:20

Original

1129 people have browsed it

JavaScript frameworks provide so many features that it’s easy to fall into them if you’re not careful. The more you rely on tool libraries, a small change during modification or maintenance is likely to affect other functions (commonly known as there are mines everywhere, so you need to be careful when walking), especially when maintaining legacy code many years ago. One mistake I often see is about jQuery's triggers, which allow developers to manually trigger certain events. This function is really powerful and easy to use, but please abide by the convention and do not trigger those native event names in JS!
Note: I know that other JS frameworks also provide this function - I only use jQuery as an example , because I saw its popularity and just ran into this problem recently. All tool libraries may cause the same problem. For example, MooTools uses fireEvent, etc.
The following is a typical example of using trigger to complete a task:

Copy the code The code is as follows:

 
// Listen for click events 
jQuery('.tabs a').on('click', function() { 
// Perform certain operations, such as switching interfaces, loading content, etc. 
}); 

// Trigger the click event on the last a tag 
jQuery('.tabs a').last().trigger('click'); 

The above code will open the tab tag of the given index. I completely understand why developers use triggers to handle these things, usually because the function to be triggered is not available globally, whereas triggering an event is easy and always available. The problem is, using native event names to trigger can... trigger... some unspeakable harm. Let’s take a look at the content added elsewhere on the site:

Copy the code The code is as follows:

 
// Listen to all click events inside the body 
jQuery('body').on('click', 'a', function() { 
// Some business logic processing can be performed here.. . 

// If the condition met (Condition met) is met, perform other operations! 
if(conditionMet) { 
// Refresh the page? 
// Open the submenu? 
 // Submit the form? 
// ... Deng Deng Deng, Intel 
} 
}); 

Now there is a problem - the tab click event may Being monitored by other completely independent parts makes it more troublesome to deal with. Haha, the best solution is to use a custom event name following the native event:

Copy the code The code is as follows:

 
// When listening for click events, bring custom events 
jQuery('.tabs a').on('click tabs-click', function() { 
 // Switch tabs, load content, etc... 
}); 

// Trigger "false" event on the last tab 
jQuery('.tabs a' ).last().trigger('tabs-click'); 

Now your event trigger will no longer conflict with other listeners on the page. Conservative developers say to me that you may want to avoid using trigger (same with other libraries), but you should add a custom event name anyway!