Do not use jQuery to trigger native events

Source: Internet
Author: User

 

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.