事件1

1-2-3

 <div style="width:100px;height:100px;background-color:tomato;"></div> 
 
<!-- 句柄写法 -->
<div style="width:100px;height:100px;background-color:tomato; "onclick="console.log('a')"></div>

<!-- li例子 -->
         <ul>
             <li>a</li>
             <li>a</li>
             <li>a</li>
             <li>a</li>
         </ul>
        <script type="text/javascript">

1--ele.onxxx = function(event){}. 一个对象的一个事件只能绑定一个处理函数，基本等同于写在html行间上，兼容性很好

例1

     var div  = document.getElementsByTagName('div')[0];
       div.onclick = function(){//事件触发的处理函数
         console.log('a');
          this.style.backgroundColor ="skyblue";
      }
    可以直接写到html行间div里面，执行语句console.log...//句柄写法

2.obj.addEventListener(事件type,fn,false);事件监听机制-可以为一个事件绑定多个处理函数，IE9以下不兼容(w3c标准)

例2.绑定click类型的函数

     var div  = document.getElementsByTagName('div')[0];
     div.addEventListener('click',function(){//函数引用，和外面定义一个function test(){}再把名test写里面一样的
         console.log('a');
     },false);
     div.addEventListener('click',function(){
         console.log('a');
     },false);

即使打印一样的东西也会输出两次，地址不一样，但不能给一个函数绑定多次

例3

    var div  = document.getElementsByTagName('div')[0];
    div.addEventListener('click',test,false);
    div.addEventListener('click',test,false);
     function test(){
         console.log('xz');
     }

3.obj.attachEvent('on'+type,fn);IE9独有--> ('on'+事件类型type,处理函数fn)。少了一个形式参数false

可以为一个事件绑定多个处理函数，并且可以给一个函数绑定多次

使用原生js，addEventListener,给每一个li元素绑定一个click事件，并输出顺序

 var liCol =document.getElementsByTagName('li');
    len = liCol.length;

 for(var i =0; i<len; i++){
     (function(i){
         liCol[i].addEventListener('click',function(){
         console.log(i);
     },false);
     }(i))
 }

绑定事件时，事件出现在循环里面要考虑是否形成了闭包