Home > Developer > JavaScript
Original http://www.cnblogs.com/yexiaochai/archive/2013/04/23/3037064.html
[A glimpse of the events of JavaScript's mysteries bubble] preface to the bubbles that we have taken together in those yearsIf I say this is another interview, I don't know how to describe my mood. It seems that all my motivation comes from the interview.
In fact, this is not the case. A project manager told me that after going out for an interview every one or two months, you will know your shortcomings and how to improve your skills, second, you will know that you have not increased the price.
In retrospect, he is right. In the face of this team disbanding, I am not so worried, because I am not afraid of interviews and can find a job wherever I go, of course, this does not mean to encourage everyone to go out for an interview.
When I returned to this Article, the interviewer asked me a question. At that time, I was unable to answer the question. In fact, if I think about it carefully, this question is a bit interesting:
Draw a div on a div (absolute positioning), and then draw a DIV in the div (which is more suitable). Drag it to the DIV, do you know which Div you drag?
It is not difficult to say this question. It is definitely a lie (I am a little confused today ...), it is difficult to say that he is not difficult to go anywhere. Everyone knows that it is related to event bubbles.
Knowing that sentence is not equal to understanding, understanding is not equal to in-depth understanding, and fur cannot clearly talk about things. Let's learn with questions today!
As this article is written while learning, it may be a bit messy. I may be confused. Please forgive me.
Basic knowledgeWe will ignore the attachevent of IE from the basics. The standard is, please refer to the following code (here I have no face to use jquery, native ):
Basic Event bindingAfter clicking the button, execute the click event, where this is the corresponding element, and E contains a lot of useful information such:
Blocking bubble (E. stoppropagation ();), blocking browser default events (E. preventdefault ();), current click element, mouse position ......
Well, we will make an extension based on this. We will add two more elements, bind events to the document, and finally see which one we click:
1 <body> 2 <Div id = "Div"> 3 <input id = "input" value = "click my" type = "button"/> 4 <ul> 5 <LI> <A> wet </a> </LI> 6 <li> <A> wet 1 </a> </LI> 7 <li> <A> wet 2 </a> </LI> 8 </ul> 9 <span> anneng identifies mE <B> Yes </B> female </span> 10 </div> 11 <script Type = "text/JavaScript"> 12 document. addeventlistener ('click', function (e) {13 var scope = This; 14 var cur_el = e.tar get. tagname; 15 var S = ''; 16}, false); 17 </SCRIPT> 18 </body>
Now, no matter which Tag I click, the tag name will be printed out. Set the breakpoint at S = ''To View:
So I suddenly felt that I knew something and I couldn't confirm it. So we didn't even try to answer the question:
1. We bind a click event for the root element. 2. After we click the button, the button does not handle events, so the event is passed up until the document
3. The document is bound to an event, so the event is triggered. This points to the document, but the currently clicked element in E is a button.
Okay. Pause everything first. Let's make a very earthy tab:
Ugly TabIf you need to complete a simple function now, click each tab, and the text in the content area will become the tab Text of the tab. What do you do?
Many years ago, I used jquery's tag selector to add events to each Li. I'm sure I will do this and there are several issues with doing so:
1. Too many event bindings
2. If the Li tag is dynamically added, the event is not available.
So here we can use the previous event bubble mechanism:
Full tab codeBased on this example, I believe that everyone has an understanding of event bubbling. Let's continue.
Absolute positioning-everything messyHere we will talk about absolute positioning, just because it is quite special. In fact, floating and overlapping elements may make our bubble more complicated. First we should go to the Code:
Complex situationsDo you still know what you are doing ??? This will complicate the situation, because we must clearly know who is closest to me.
Solve the problemIt's time to solve the problem. Do you want to solve the problem first? First, let's define the practice. We can only do this:
1. Click a button to allow the user to select whether to draw a rectangle or drag a rectangle.
2. Draw a DIV in a given Div (relative positioning). The Div (absolute positioning) will be appended to the parent Div.
3. Drag the DIV to the parent Div.
4. You cannot add an event for the DIV that the parent Div thinks!
5. You can use jquery without considering the scroll bar.
Let's do it:
In order to facilitate your drag-and-drop operations, I will first draw a picture and then come up with an ugly code:
Ugly codeLet's run it and you will find the problem:
When we drag 1, there is no problem, but when we drag it to 0, once it hits 1, it will happen !!!
This is because the mousedown event is bound to the parent Div. When we click the mouse, a sliding event is bound to an element,
Because he is close to us, we will not slide to 0 ,.... When sliding 0, 1 is reached, and the mouse is naturally located at 1.
Slide on, so the drag is 1 ....
I don't know whether you are dizzy or not. I may be a little dizzy. Today, it's so ....
Result of the discussionI just had a discussion with my brother on this issue. His opinion is still pertinent:
We get this element when mousedown, and then bind various events to the child element directly. After mouseup, the event is canceled and the above problems will not occur,
In addition, you may need to set the Z-index. I don't care about it here:
Senior suggestionsConclusion
The younger brother has a very simple understanding of the bubble mechanism. If your eldest brother sees any deficiencies or problems in this article, please make sure to point it out.
In addition, I suggest you write the code a little bit, and look forward to high-quality code ....
If you think this article is not bad, please click here for recommendations. Thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
