Web API --- DOM --- for the introduction of elements of the binding event, as elements bind multiple codes, code compatible

1. In order to introduce an element binding events:

Src bind directly with more to achieve only the last one (programmer2.js)

<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script src="programmer1.js"></script>
<script src="programmer2.js"></script>
<script>


  my$("btn").onclick=function () {
    console.log("</
  };);"Yang Shuaio Good
script>

2. Bind more events for the element

An element binding events (DOM): one of but are not compatible, you still have two

1. Object .addEventListener ( "event type", the event handler, false); -----> Google and Firefox support, IE8 does not support

2. Object .attachEvent ( "have on the type of event," event handler) -----> Google does not support, does not support Firefox, IE8 support

2.1 Object .addEventListener ( "event type", the event handler, false); -----> Google and Firefox support, IE8 does not support

Case: Bound for the button click event

Parameter 1: Name Type --- Event of the event, not on
Parameter 2: --- event handler function (named functions, anonymous functions)
Parameter 3: Boolean type, currently write false

    // binding a plurality of the same event for the same elements - 
    My $ ( "BTN") the addEventListener. ( "The Click", function () { 
      the console.log ( "Sue insignificant ah" ); 
    }, to false ); 
    $ My ( "BTN") the addEventListener. ( "the Click", function () { 
      the console.log ( "Sue ah dirty" ); 
    }, to false ); 
    My $ ( . "BTN") the addEventListener ( "the Click", function () { 
      the console.log ( "Sue ah evil" ); 
    }, to false ); 
    My $ ( . "BTN") the addEventListener ( "the Click",function () {
      console.log("Small Su ah dirty" ); 
    }, to false );

2.2 Object .attachEvent ( "have on the type of event," event handler) -----> Google does not support, does not support Firefox, IE8 support

Parameter 1: Event Type --- the name of the event, there is on
Parameter 2: --- event handler function (named functions, anonymous functions)

    $ My ( "BTN") the attachEvent ( "the onclick",. function () { 
      the console.log ( "Good Shuaio Yang. 1" ); 
    }); 

    My $ ( "BTN") the attachEvent ( "the onclick",. function () { 
      the console.log ( "good Shuaio Yang 2" ); 
    }); 

    My $ ( "BTN") the attachEvent ( "the onclick",. function {() 
      the console.log ( "good Shuaio Yang 3" ); 
    });

3. element binding event code compatible

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
  <Meta charset = "UTF-. 8"> 
  <title> title </ title> 

</ head> 
<body> 
<INPUT type = "Button" value = "button" ID = "BTN" /> 
<Script the src = "common.js"> </ Script> 
<Script> // arbitrary element. bind any event, any of the elements, type of event, the event handler function the addEventListener (Element, type, Fn) {
     // determines whether the browser supports this method of iF (element.addEventListener) { 
      element.addEventListener (type, Fn, to false ); 
    } the else iF (element.attachEvent) { 
      Element.attachEvent("on"+type,fn);
    }else{

  
  
     
      element["on"+type]=fn;
    }
  }

  addEventListener(my$("btn"),"click",function () {
    console.log("哦1");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦2");
  });
  addEventListener(my$("btn"),"click",function () {
    console.log("哦3");
  });


</script>
</body>
</html>