Event Review in JavaScript

Event Review in JavaScript

In fact, when I first learned JavaScript, I came into contact with a very simple line of code.alert('Hello JavaScript!!!')It explains what an event is. What is an event? Events are a very important method in JavaScript, a browser-based programming language. What is an event? In JavaScript, events can be understood as one thing that happens. The event object records all the data in this process.

1. Event compatibility Processing

Many browsers are classified into standard browsers, such as Chrome and FireFox. Non-standard browsers are represented by IE. When writing code, always be careful about compatibility between them, this is a common practice. Events also need to handle these compatibility issues.

The most important thing to understand an event is that the event object mentioned above: IE/Chrome: event is a built-in object FireFox: The event object is passed in through the first parameter of the event function.

Document. onclick = function (ev) {// The content displayed in IE FireFox is completely different, so you need to process the event alert (event ); // to be compatible with various browsers, use the following syntax: var ev = ev | window. event; var str = ''; var I = 0; // stores all the information during the event occurrence in the ev event object and traverses the information in the event object, output all information to the page for (var attr in ev) {++ I; str ++ = I + '. '+ attr +' ---> '+ ev [attr] + '';} // Add the information to the document on the page. body. innerHTML = str ;}

In the above Codevar ev = ev || window.event ;One or more methods are used to solve Perfect compatibility problems. In fact, there is still a perfect method in JavaScript to solve the compatibility problem.if....else ...These two methods provide a very good solution to the problem of compatibility.

2. Event bubbling and Cases

1. Event bubbling

Event bubbling is a very classic case. I will not talk about it anymore. The previous piece of classic code on the Internet will directly look at the results to understand what is going on?

<Script type = text/javascript> window. onload = function () {// obtain the three element objects in the page var objDiv1 = document. getElementById ('div1 '); var objDiv2 = document. getElementById ('div2'); var objDiv3 = document. getElementById ('div3 '); // event function, which displays the current ID as function func () {alert (this. id);} // bind an event function objDiv1.onclick = func; objDiv2.onclick = func; objDiv3.onclick = func;} </script>
  

 

Three results are displayed when you click DIV3. In fact, only one event function is bound to DIV3. This is a typical event bubble. Some netizens said that the physical location of the DIV is related to the inclusion relationship between the DIV, and there is no relationship between the physical location and the half-cent relationship. Just do a test and you will know.

2. Use Case of event bubbling
The following example simulates the implementation of the webpage sidebar sharing function. When you move the cursor to the sidebar sharing, a DIV is displayed, which can be shared to the list on that website, you can put "share to" into the sub-DIV and use the event bubbling principle to process the event to the parent DIV. In this way, the following code is easily implemented:

<Script type = text/javascript> window. onload = function () {var objBox = document. getElementById ('box'); // move the cursor to the parent DIV to process the objBox. onmouseover = function () {objBox. style. left = '0';} // The mouse removal event is handed over to the parent DIV for objBox processing. onmouseout = function () {objBox. style. left = '-100px'; }}</script>
   

1. What is event binding? 3. Understanding of event binding and capturing

The section in the above CodeobjDiv1.onclick = func ;Event binding. However, this writing method has limitations, and there is no way to bind two events to an object. The following may overwrite the above.

Function fn1 () {alert (this); // alert ('javascript ');} function fn2 () {alert ('jquery ');} // The following event binding overwrites the binding event document above. onclick = fn1; document. onclick = fn2;

So the event binding function was born.AttachEvent () and addEventListener ()Why are there two functions? There are more browsers to deal with the binding events of browsers in the two camps. Therefore, we need to handle compatibility issues while dealing with compatibility issues, the differences between the two event binding functions should be clarified in the following code and analysis:

Function fn1 () {alert (this); // alert ('javascript ');} function fn2 () {alert ('jquery ');} // non-standard IE binding event function document. attachEvent ('onclick', fn1); document. attachEvent ('onclick', fn2); // The Event function document bound to the standard browser. addEventListener ('click', fn1, false); document. addEventListener ('click', fn2, false );

Observe the above execution results and summarize the following differences:

Non-standard IE attachEvent ('event name', 'event function '); when a higher version of IE is executed, when the Positive Sequence event name is preceded by an on event and the call is not captured, this points to the window (this pointer is often encountered) Standard: addEventListener (event name, event function, whether to capture); where whether to capture the default value is false: Bubble true: the capture event name is not on when the event is executed, the positive sequence event is captured.
At this time, you can encapsulate a function to agree to solve this compatibility problem as follows:

// EventObj indicates the object to bind the event, eventName indicates the name of The Bound event, and funName indicates the function bindEvent (eventObj, eventName, funName) {// standard browser if (eventObj. addEventListener) {eventObj. addEventListener (eventName, funName, false);} else {// non-standard browser eventObj. attachEvent ('on' + eventName, function () {// fixed this point to the problem funName. call (eventObj) ;}}} function fn1 () {alert (this) ;}// call test bindEvent (document, 'click', fn1 );

The call () function, which may be difficult to understand in the above section, means to call a function. It is the same as a normal call. In fact, call () is a method under the method object. Normally called functions can be called by adding brackets to the function name. Another method is function name. call (parameter 1, parameter 2, parameter 3 ...);

Parameter 1 indicates that after the method is called, this points to object parameter 2. parameters after the method is called are all input parameters of the function.

Function fn3 (arg1, arg2) {alert (this); alert (arg1 + arg2);} // The document parameter is the object to be returned after the function is executed, starting from the second parameter, fn3.call (document, 66,99) Is the function parameter );

2. Event capture
The function bound to the event above has a final parameter. The parameter indicates whether to capture the event. How can this problem be solved?

When set to false, the event bubbles outward.
When true is set, events are captured inwards.
One is to trigger the event function when the event comes in.
One is to trigger the event function when the event goes out.
The following code is easy to understand: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwcmUgY2xhc3M9 "brush: java;"> <Script type = text/javascript> window. onload = function () {var objDiv1 = document. getElementById ('div1 '); var objDiv2 = document. getElementById ('div2'); var objDiv3 = document. getElementById ('div3 '); // observe the program execution sequence objDiv1.addEventListener ('click', function () {alert (3) ;}, false); objDiv2.addEventListener ('click ', function () {alert (1) ;}, true) objDiv3.addEventListener ('click', function () {alert (2) ;}, false) ;}</script> 

Analyze the above Code.

4. Keyboard Events

Keyboard Events are often used in the following scenarios:

Onkeydown: triggers onkeyup when the keyboard is pressed: triggers ev. keyCode when the keyboard is lifted: value of the keyboard key, numeric type ctrlKey, altKey, shiftKey: returns a Boolean Value

Simulation of chat room cases:

<Script type = text/javascript> window. onload = function () {var objText = document. getElementById ('txt '); var objUl = document. getElementById ('ulone '); // triggers the objText when the key is lifted. onkeyup = function (ev) {var ev = ev | window. event; if (this. value! = '') {If (ev. keyCode = 13) {var objLi = document. createElement ('lil'); objLi. innerHTML = this. value; if (objUl. children [0]) {objUl. insertBefore (objLi, objUl. children [0]);} else {objUl. appendChild (objLi);} // clear the content in the text box this. value = '';}}}</script>

5. methods to prevent default events

Block the default behavior of events. For example, when you right-click a common browser, the context events bound to the browser are automatically displayed. Sometimes you do not need these default events to write programs, but define your own events, in this case, you can use the function to prevent default events.return false；

6. Drag case

It is often seen that the panel in the rich text frame can be scaled out or down, while dragging. What is the principle of drag? The onmousedown event occurs when you click the DIV, And the onmousemove event occurs when you move the mouse after you press the mouse. The onmouseup event occurs when you drag the cursor to the destination. This is the principle of the entire drag.

Var objDiv = document. getElementById ('box'); objDiv. onmousedown = function (ev) {// obtain the event object var ev = window. event | ev; // calculates the distance between the mouse and the edge of the DIV. var disX = ev. clientX-objDiv. offsetLeft; var disY = ev. clientY-objDiv. offsetTop; document. onmousemove = function (ev) {var ev = window. event | ev; objDiv. style. left = ev. clientX-disX + 'px '; objDiv. style. top = ev. clientY-disY + 'px';} document. onmouseup = function () {document. onmousemove = document. onmouseup = null ;}}