Understanding DOM Event _javascript techniques in JavaScript

First of all, this article does not discuss the tedious details, but in view of the reader's feelings, in a positive attitude, this will still enumerate examples.

The title is to understand DOM events, so take a simple click event here for example, hoping that you can see this example analogy.
Initially we clicked on the page, just like the following simple operation.
First define a block such as <div id= "Weiyuzhou" > Micro universe </div>, after <script type= "Text/javascript" ></script> A click event with an internal implementation ID of Weiyuzhou, as shown in the following code:

var Wyz = document.getElementById (' Weiyuzhou ');
Wyz.onclick = function () {
confirm (arguments.length)
}

Make sure that the above steps are OK, we can continue to go down, and then we see in IE browser (lower version) of the pop-up 0, exactly, IE8 below (including IE8) of the pop-up 0, on the contrary Pop 1. Then I see a pop-up 1 in the Firefox browser. That is, the trigger for the following version of the event does not exist within the scope of the function, and it is not that the event triggers below IE8 occur in the global scope, leaving a suspense here, but it is certain that the method of IE8 the following event does not have this event parameter, IE8. That means the length of the arguments is 0, as shown in view 5 below:

So, we look at the Firefox browser window pops up 1, shows that the event exists inside the function, proves again that the method's internal array arguments length is 1 and is an enumerable variable, or writable, as shown in the following view.

If you still do not understand the principle, you may not go to see the "Web front-end development of the road," the 169th page of the book, and then go back to look at the article summary, it might give you a deeper understanding of the contents of the book.

Next, we must not let IE and Firefox return the event output is not the same, then how to let IE and Firefox pop-up content is the same.

The link to a section of content, below the click function to set an internal parameter, parameter name E, and then in IE and Firefox browser at the same time trigger the Click event, we see Firefox below show E for mouse events [OBJECTMOUSEEVENT],IE8 under the error, The pop-up error message does not define undefined. Now you're going to ask me what's wrong, let's go back to the words we just said ' Leave a suspense here ' for analysis, IE8 the following browser event is not occurring in the global scope, as shown in view 5-02, there is a global globally object, we can expand the search to the global, the method of the global inheritance has an event event, found the IE8 proprietary event Method window event, so we set the parameter E to window.event for a debug, and now we see the return of an event [objectevent] under IE8, as shown in the figure.

You must have noticed. The event return values for the dialog box in IE8 and Firefox browsers are different, and the IE8 dialog box is [Objectevent],firefox dialog is [objectmouseevent]. So how do we make IE8 and Firefox return the same value?

See here, your heart is not a little frustrated, digging pit dug for so long, how has not seen the water out, don't worry, the subject has just begun, we do not chat, continue to focus on the analysis, through just the return value, We continue to use breakpoints to find common ground for the return values of IE and Firefox.

Through the above analysis, we find the event under Firefox to find that we need the method name can be called, of course, we find IE8 below srcelement also have the method name we need can be called, so, hehe! See here your heart is not a little excited, step-by-step exclusion, and finally found that there is no difficulty. Back to the point, now we're declaring a variable vare_child=e.srcelement| | E.target and then we see the dialog box information on the IE8 and Firefox browsers as [Objecthtmldivelement], as shown in the figure.

Now we've solved the problem of different browsers ' return values, which means they solve the compatibility problem, which is just the corner of the ice.

Below we want to solve the implementation of the Window container trigger event, mainly based on the structure of the above analysis.

When you have the basics, the following are simpler than the above.

or the block of one of the above pages for example, now I continue to the block <divid= "Weiyuzhou" > Micro-universe </div> Add a child container, this child container for the inline element <spanid= ' coz ' >koringz </span>, take ID named Coz, and then give this element also add a click event code to the same function, in order to be able to distinguish between open text content differences.

When I click on the contents of the container under the IE8 and Firefox, there is a strange situation, in the Firefox browser window click, click on the Chinese Text Pop-up dialog box ' micro-universe ', I click on Koringz, found pop-up two times dialog box, pop-up content for ' Koringz ', that is because I click on the child container when the click of the trigger layer, how to solve the click Koringz Pop-up Two dialog box problem, know a little JS programmers know this is bubbling event.

So in Firefox to clear the bubble event is the stoppropagation, so we give the second click of the event function code block after the side of a line of code e.stoppropagation (); Then click Koringz to find a pop-up ' Koringz '. As shown in the figure

Next in the IE8 test, found in the IE8 browser Click also popped up two times to resolve IE8 stop bubbling event for cacelbubble, and we only need to set the cacelbubble to true.
Because IE8 under global contains the event attribute cacelbubble is not a method, but an object that outputs a Boolean value, so this is different from Firefox, but Firefox encapsulates this event as a method. OK, now we're going to add one line of code to the second click of the event code, then test it in the IE8 browser, and then click Koringz to E.cancelbubble=true. As shown in the figure

Note that the above stop bubbling event code can be written according to the different browser, how to write separately, we view the IE8 browser below the document found all the objects, while Firefox does not have this all attribute, This means that document.all is a unique attribute under the IE8 version. Through it we can differentiate between browser bubbling events.

So far, we've solved the bubbling events of the window, and next, we're going to solve a problem where an event overwrites the original function because it is defined by multiple people. It is also possible to say that a worker before a company added this event, and later the new employee took over the project and added a modification to the event that covered the issue of the execution of the original event. That is, adding such events multiple times to the current ID does not overwrite the original function execution of this event.

Windows under Firefox contain AddEventListener (Type,listener,usecapture) methods, and then we <scripttype= "Text/javascript" >< /script> internally defines this listener event Domelement.addeventlistener (' click ', Function (e) {Confirm (e+ ' e ')},false); Then in Firefox browser click on the content pop-up two times, the last pop-up as [Objectmouseevent]e, followed by an E, which I deliberately added to distinguish. As shown in the figure.

The next test found the AddEventListener error in IE8, but there was a way to see it under window (after a while, the original method could be supported in IE9 above), IE8 also had a attachevent (Event,pdisp), Then we set up the Listener event wyz.attachevent (' onclick ', function (e) {Confirm (e+ ' e ')}), note: "The event is ' onclick ', followed by the IE8 click found can pop up two times, the last time [ Objectmouseevent]e. At this point on (' click ', Pdisp) and attachevent (EVENT,PDISP) can be used together.

To sum up, we solved the compatibility of DOM events, the bubbling of DOM events, and the reuse of DOM events.