A summary of JavaScript event Learning (ii) JS event handler _javascript Skills

Related reading:

JavaScript Event Learning Summary (v) Event type mouse events in JS

Http://www.jb51.net/article/86259.htm

JavaScript Event Learning Summary (i) Event flow

Http://www.jb51.net/article/86261.htm

A summary of JavaScript event Learning (iv) Public members of events (properties and methods)

Http://www.jb51.net/article/86262.htm

A summary of JavaScript event Learning (ii) JS event handler

Http://www.jb51.net/article/86264.htm

JavaScript Event Learning Summary (iii) JS event object

First, event handlers

As mentioned earlier, an event is an action performed by the user or the browser itself, such as Click,load and mouseover are the names of the events. The function that responds to an event is called an event handler (also called an event handler function, an event handle). The name of the event handler begins with "On", so the event handler for the Click event is the OnLoad event handler for the Onclick,load event.

There are 3 main ways to specify event handlers for an event.

1. HTML Event handlers

First of all, this method is out of date. Because actions (JavaScript code) and content (HTML code) are tightly coupled. But you can still use it when you write a small demo.

There are two ways to do this, both of which are simple:

First: Define the event handlers and the actions contained in HTML directly.

Copy Code code as follows:

<input type= "button" value= "click me!" />

Second: An event handler is defined in HTML, and an action is executed to invoke a script defined elsewhere.

Copy Code code as follows:

<input type= "button" value= "click me!" /><script>function ShowMessage () {alert ("clicked!");} </script>

Note

1 through the event variable can directly access the events themselves, such as onclick= "alert (Event.type)" will pop the Click event.

2) This value equals the target element of the event, where the target element is input. For example, onclick= "alert (this.value)" Can get the value of the INPUT element.

2, DOM0 level event handler

This approach is simple and cross-browser, but it can only add an event handler for one element.

Because this method adds multiple event-handling functions to an element, the latter overrides the preceding one.

To add an event handler:

<input type= "button" value= "click me!" onclick= "showmessage ()"/>
<script>
function ShowMessage ( ) {
 alert ("clicked!");
}
</script>

To delete an event handler:

Copy Code code as follows:

Mybtn.onclick=null;

3, DOM2 level event handler

DOM2-level event handlers can add multiple event handlers for an element. It defines two methods for adding and removing event Handlers: AddEventListener () and RemoveEventListener ().

Both methods require 3 parameters: The event name, the event handler function, and the Boolean value.

This boolean value is true, processing the event in the capture phase, false, handling the event in the bubbling phase, and default to False.

Add Event handler: Now add two event handlers for the button, one pops up "Hello" and one pops up "world".

<input id= "mybtn" type= "button" value= "click me!" />
<script>
 var mybtn=document.getelementbyid ("Mybtn");
 Mybtn.addeventlistener ("click", Function () {
  alert ("Hello");
 },false);
 Mybtn.addeventlistener ("click", Function () {
  alert ("World");
 },false);
</script>

Delete event handler: an event handler added through AddEventListener must be deleted by RemoveEventListener with a consistent parameter.

Note: Anonymous functions added through AddEventListener will not be deleted. The following code will not work!

Copy Code code as follows:

Mybtn.removeeventlistener ("click", Function () {Alert ("World");},false);

It seems that the removeeventlistener is consistent with the AddEventListener parameter above, but the anonymous function in the second argument is completely different.

So in order to be able to delete an event handler, the code can write this:

<input id= "mybtn" type= "button" value= "click me!" />
<script>
 var mybtn=document.getelementbyid ("Mybtn");
 var handler=function () {
  alert ("Hello");
 }
 Mybtn.addeventlistener ("click", Handler,false);
 Mybtn.removeeventlistener ("click", Handler,false);
</script>

Second, ie event handling procedures

1, the actual application scene

IE8 and the following browsers do not support AddEventListener, in actual development if you want to be compatible to IE8 and the following browsers. If you need to do compatibility with native binding events, you can use jquery's bind instead.

2. IE8 Event Binding

IE8 and the following versions of browsers implement two methods similar to the DOM: Attachevent () and DetachEvent ().

Both methods require two parameters: an event handler name and an event handler function.

Note

IE11 only supports addeventlistener!

Ie9,ie10 to attachevent and AddEventListener support!

TE8 and the following versions only support attachevent!

You can use the following code in the IE versions of the browser to test.

<input id= "mybtn" type= "button" value= "click me!" />
<script>
 var mybtn=document.getelementbyid ("Mybtn");
 var handlerie=function () {
  alert ("Helloie");
 }
 var handlerdom= function () {
  alert ("Hellodom");
 }
 Mybtn.addeventlistener ("click", Handlerdom,false);
 Mybtn.attachevent ("onclick", Handlerie);
</script>

Add Event handler: Now add two event handlers for the button, one pops up "Hello" and one pops up "world

<script>
 var Mybtn=document.getelementbyid ("Mybtn");
 Mybtn.attachevent ("onclick", function () {
  alert ("Hello");
 });
 Mybtn.attachevent ("onclick", function () {
  alert ("World");
 });
</script>

Note : The effect here is worth noting:

IE8 the following browser to eject "world", and then pop "Hello". In contrast to the sequence of event triggers in the DOM.

IE9 and above browser pop-up "Hello", and then Pop "world". Is the same as the sequence of event triggers in the DOM.

Visible IE browser slowly also on the right track ...

Delete event handlers: event handlers added through Attachevent must be deleted by the DetachEvent method with the same parameters.

As with DOM events, the added anonymous function cannot be deleted.

So in order to be able to delete an event handler, the code can write this:

<input id= "mybtn" type= "button" value= "click me!" />
<script>
 var mybtn=document.getelementbyid ("Mybtn");
 var handler= function () {
  alert ("Hello");
 }
 Mybtn.attachevent ("onclick", handler);
 Mybtn.detachevent ("onclick", handler);
</script>

Note: There is one more place in the IE event handler that needs attention: scope.

Using the Attachevent () method, the event handler runs in the global scope, so this is equal to window.

The DOM2 or Dom0-level method scope is within the element, and the This value is the target element.

The following example pops up true.

<input id= "mybtn" type= "button" value= "click me!" />
<script>
 var mybtn=document.getelementbyid ("Mybtn");
 Mybtn.attachevent ("onclick", function () {
  alert (This===window);
 });
</script>

Remember this when you're writing Cross-browser code.

Ie7\8 Detection:

Determine ie7\8 compatibility detection
   var isie=!! Window. ActiveXObject;
   var Isie6=isie&&!window. XMLHttpRequest;
   var isie8=isie&&!! Document.documentmode;
   var isie7=isie&&!isie6&&!isie8;
   if (isIE8 | | isIE7) {
    li.attachevent ("onclick", function () {
     _marker.openinfowindow (_IW);
    }) 
   } else{
    li.addeventlistener ("click", Function () {
     _marker.openinfowindow (_IW);
    })
   }

The above is a small set to introduce the JavaScript Event learning Summary (ii) JS event handling procedures related knowledge, hope to help everyone!