Do not use jQuery to trigger native events

 

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:

// Listen to the click Event jQuery ('. tabs '). on ('click', function () {// execute some operations, such as switching the interface and loading content ..}); // trigger the click Event jQuery ('. tabs '). 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:

// Listen to all click events inside 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:

 

// When listening for the click event, bring the Custom Event jQuery ('. tabs '). on ('click tabs-click', function () {// switch the tab, load the content, and so on ...}); // trigger the false event jQuery ('. tabs '). 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!