JavaScript event handlers

An event is an action performed by the user or the browser itself, and the interaction between JavaScript and HTML is implemented through events. And the function of the corresponding event is called the event handler function. Includes the following:

1.HTML Event Handlers    

each event supported by an element can be specified using the same HTML attribute as an appropriate event handler. The value of this attribute can execute JavaScript code.

<input type= "button" value= "buttons" onclick= "ShowMessage ()" ><script>  function  showmessage () {    alert ("Hello")}</script>

The function that encapsulates the attribute value of an element has a local variable event, the event object, through which the event object can be accessed directly. The This value inside the function equals the target element of the event. The function can use the with extended scope

function () {       with(document) {       // accessible documentwith             (  This) {             // can access the attribute value of the element itself }}       }

Disadvantages:

(1) There is a time difference, the user may be in the HTML element just show the trigger event, but currently does not have the execution conditions, such as JS code is not downloaded to complete. You can use Try-catch to throw errors.

(2) The scope chain of an extended event handler can cause different results in different browsers.

(3) The HTML code is highly coupled to the JavaScript code. If you need to change the event handler, you need to change two places.

2.dom0 level Event handlers    

As with the HTML event handler, you add an event handler on the Element property. The difference is that the DOM0 level gets the element reference in the JavaScript code and adds an event handler on the Reference property.

<input type= "button" value= "buttons" id= "Btn" ><script>  var Btn = function  () {   alert ("Hello")}; </script>

This reference in the program refers to the scope of the current element .

Delete DOM0-level events

null;

3. DOM2 Level Event handlers

The "DOM2 level event" defines two methods for specifying and deleting event handlers: AddEventListener () and RemoveEventListener (). They all accept 3 parameters: event name, event handler function, and a Boolean value. The last Boolean value is true to indicate that the event handler is called during the capture phase, and False indicates that the event handler is called during the bubbling phase. The third parameter is optional, and the default value is False. As with the DOM0 level, T-his in the programrefers to the scope of the current element.

<input type= "button" value= "buttons" id= "btn" ><script>  var btn = document.getElementById (" Btn "); Btn.addeventlistener ("Click",function() {alert ("Hello")},false}; </script>

Multiple event handlers can be added, not overwritten, and executed from top to bottom .

The event handler is removed by RemoveEventListener () and cannot be removed for the added anonymous function.

4. IE Event handlers

The IE event handlers are used to specify and delete event handlers in the following ways: Attachevent () and DetachEvent (). Both methods accept two parameters: the event handler name and the event handler function name. Events added through Attachevent () are added to the bubbling phase by default.

<input type= "button" value= "buttons" id= "btn" ><script>  var btn = document.getElementById (" Btn "); Btn.attachevent ("onclick",function() {alert ("Hello")}}; </script>

Unlike the DOM0 level, the event handler runs in the global scope, that is, this points to the window.

Attachevent () can also add multiple event handlers, but the order of execution is bottom -up.

5. Cross-browser event handlers

The core, depending on the situation, handles DOM0, DOM2, and IE event handlers respectively.

Var EventHandler ={addHandler:function(element, type, handler) {if(Element.addeventlistener) {Element.addeventlistener (type, handler,false); }Else if(element.attachevent) {element. attachevent ("on"+type, handler); }Else{element["on"+type] =handler; }, RemoveHandler:function(element, type, handler) {if(Element.removeeventlistener) {element. RemoveEventListener (type, handler,false); }Else if(Element.detach event) {element. Detach event ("on"+type, handler); }Else{element["on"+type] =NULL; }}};

EventHandler accepts 3 parameters, namely, the reference to manipulate the element, the event name, and the event handler function.

Calling methods

var Btn = document.getElementById ("Btn"); var function () {  alert ("Hello")};eventhandler. AddHandler (Btn, "click", Handler); RemoveHandler. AddHandler (Btn, "click", handler);

JavaScript event handlers