onclick和addEventListener以及jquery里面的的整理

1.jquery里面的click

定义和用法

当点击元素时，会发生 click 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

 $(document).ready(function(){
	$("#div1").click(function(){
    	alert(1)
	})

    $("#div1").click(function(){
    	alert(2)
	})

	$("#div1").click(function(){
		alert(3)
	})
  })

结果：依次弹出1,2,3

2.addEventListener

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持，可以使用 attachEvent() 方法来添加事件句柄 （移除事件使用detachEvent()）。

语法：

element.addEventListener(event, function, useCapture)

参数表

参数	描述
event	必须。字符串，指定事件名。如：click,blur,mousedown等。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。  提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

window.onload=function(){
     document.getElementById("div1").addEventListener('click',function(){
        	alert(1)
     },false)
     document.getElementById("div1").addEventListener('click',function(){
         	alert(2)
     },false)
     document.getElementById("div1").addEventListener('click',function(){
     		alert(3)
     },false)
}

结果：依次弹出1,2,3

为什么用 addEventListener

• 可以对同一物件的同一事件绑定多个事件处理程序。
• 可以通过事件流三个阶段更好地控制何时触发事件处理程序。
• 工作于 DOM 元素，而不仅是 HTML 元素。 

在解决问题的时候，不要简单地就事论事，比如这篇文章讨论的就是如何添加事件监听器，那就不妨写一个适用于所有浏览器的方法：

window.onload=function(){
       function addEvent(el,event,func){
        	if(el.attachEvent){
        		return el.attachEvent("on"+event,func)
        	}else{
        		return el.addEventListener(event,func,false)
        	}
        }
        
//调用		
        addEvent(document.getElementById("div1"),"click",function(){
        	alert('1')
        })
        addEvent(document.getElementById("div1"),"click",function(){
        	alert('2')
        })
        addEvent(document.getElementById("div1"),"click",function(){
        	alert('3')
        })
}

 依次弹出1,2,3

3.onclick

定义和语法

onclick 事件会在元素被点击时发生。

语法

HTML 中:           <element οnclick="SomeJavaScriptCode">

JavaScript 中:    object.οnclick=function(){SomeJavaScriptCode};

window.onload=function(){
        document.getElementById("div1").onclick=function(){
   			alert(100)
   		}
      	document.getElementById("div1").onclick=function(){
           alert(200)
      	}
      	document.getElementById("div1").onclick=function(){
      		alert(300)
      	}
}

结果：点击弹出300

这个方法能实现相同的效果，并且有更多的控制域（因为是 JS 脚本，而不是 HTML 代码），当然了，也能使用匿名函数、构造函数、闭包。

原生的onclick绑定事件其实是赋值操作，onclick中只能保留一个值，再次对onclick赋值会覆盖上次的值。所以如果为同一个事件绑定了多个处理程序，那么最后一个处理程序会覆盖之前的程序。