Event agents, those things.

Source: Internet
Author: User

Simply put.

Event agent, as the name implies, is to put this should be their own things to help you do, for example, you want to sell a house, you can not squat in the street all the way to see people ask to buy a house bar, so not only consumes energy, but also low efficiency, in JavaScript is also, if you need to bind events more elements, If you tie an event for each one, you suffer, the browser can't stand it, if it crashes, you're embarrassed, so it's a good idea to delegate the event to the parent of the element.

What the hell?

To understand how it started, first of all to know the secret behind, the secret of the event agent is very simple, that is event bubbling, event bubbling everyone must know, such as when you click on an element, the Click event will not be the end of this element, but will continue along its parent to upload until the HTML element , so if a parent is also bound to the Click event, it will trigger two events at the same time, which is not good in general, because the promotion of the line of their posts, so that the world will be harmonious forward development, so most of the time we will be to stop it, in my first learning JS, I was very depressed, Event bubbling this thing has what egg use, not only useless and trouble, so I am very annoying, but in my contact with the event agent, I found that it is useful, the role is quite large, so I have it black turn powder. But this is not enough, you can handle the elements of the event is bound to the parent element, but in the specific occurrence, you must know what the child element, in order to perform the corresponding operation, otherwise the parent element should not be directly ignorant.

Detect which element is specific, and later.

What's the benefit?

No good thing who do it is not, this is not public welfare, more than one thing for programmers, so the event agent is certainly a good thing, then the benefits of what is it, well, in fact, is very simple, not only reduce the code, back to the browser burden, browser but our Big Boss ah, without it we are unemployed , well, I haven't got a job yet, so being kind to the browser is good for us. In fact, a little example is clear, if a parent element has 1000 child elements, each of these 1000 child elements have bound events, then what do you do, for each element is to tie a, I go, directly resign not to do, so this time to proxy to the parent element, everything is perfect, sacrifice a parent element, Perfect for tens of thousands of child elements, immortalized, immortal ....

How does the code strike?

After all, said again more touching is no use, the key is to use code to knock out, so that the browser can understand, or not before swine. As the saying goes genius first step, Finch diapers. Then the first step of the event agent is how to get the specific child element of the event, and the code is:

function Gettarget (e) {   var e=e | | window.event;   return E.srcelement | | E.target;}

Why all have a | | It? No way, who let ie like to engage in special, people under the eaves, must bow, we can not change that will only be compatible, who let others use IE, through this function, you can get the target element of the event. The next step is to call it, or else it will be used.

function DoSomething (e) {           var target = Gettarget (e);           if (target.classname== ' yourname ')            {                //do anything you like          }}

Call is actually very simple, the key is to detect the difference of this goal, like our people, each person is a unique identity card, through this can distinguish a person, the event agent is so, the goal is transmitted, according to its different points to distinguish the specific is which, And then do the different things accordingly.

There are two sides to everything.

There are fewer event handlers that need to be created and reside in memory, so we can improve performance and reduce the risk of crashes, so the browser happy, we are happy, the user is happy, there are wood.
Furthermore, there is no need to rebind the event handler after DOM updates. If your page is dynamically generated, for example through Ajax, you no longer need to add or remove event handlers when the element is loaded or unloaded.

Not all events can bubble. Blur, focus, load, and unload cannot bubble like any other event. In fact blur and focus can be obtained using event capture rather than event bubbling (in browsers other than IE).
There are some things to be aware of when managing mouse events. If your code handles MouseMove events, you risk a performance bottleneck because the MouseMove event triggers very often. Mouseout, however, becomes difficult to manage with event proxies because of its bizarre behavior.

Summary Conference.

In general, the event bubble is very good, we must always think about it, need to use when the use, do not wronged themselves, hurt the body is not good.

Event agents, those things.

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.