js事件绑定

第一种

html绑定：

    <button onclick="clickTest()">test</button>
    <script type="text/javascript">
        function clickTest(){
            console.log("test");
            console.log(this);
        }
        </script>

注意this绑定的window；

第二种

js中通过onclick

    <button id="button">test</button>
    <script type="text/javascript">
        var button = document.getElementById("button");
        button.onclick = function(){
            console.log("test");
            console.log(this);
        };
        </script>

因为是html中button调用的onclick，所以this指向button ；
再来考虑下面的一段代码

    <button id="btn3" onclick="change()">dd</button> 
    <button id="btn4">ee</button>
    <script type="text/javascript">
        var $ = function(id){
            return document.getElementById(id);
        };
        (function(){ 
            $("btn4").click(function(){ 
            $("btn3").click(); //会执行change
            }); 
        })(); 
        function change(){ 
        alert("onclick"); 
        } 
        </script>

click是一个方法，onclick是一个事件。
1.方法是程序员写语句直接调用，即显示调用；【可以触发onclick事件】　　
2.事件不需程序员调用，但是，必须由程序员写一个函数且将该函数赋值给相应的事件，其调用是在相应的事件触发时。【告诉浏览器在鼠标点击时候要做什么】所以调用顺序是：首先方法其次事件。

<script type="text/javascript"> 
$(function(){ 
$("#btn3").click(function(){ 
alert("aa"); 
}); 
}); 
function change(){ 
alert("bb"); 
} 
</script> 
<button id="btn3" onclick="change()">dd</button>

不过这个就是change完在执行click，相当于追加事件；

第三种

绑定事件:

addEventListener(type, listener, useCapture); 
// type:事件类型,不含"on",比          如"click"、"mouseover"、"keydown";  
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";  
// listener:事件处理函数  
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型    

    <button id="button">test</button> 
    <script type="text/javascript">
        var $ = function(id){
            return document.getElementById(id);
        };
        $("button").addEventListener("click",function(){
            console.log('test');
            console.log(this);
        },false);
        $("button").addEventListener("click",function(){
            console.log('test');
            console.log(this);
        },true);//执行
        $("button").addEventListener("click",function(){
            console.log('test');
            console.log(this);
        },true);//执行
        $("button").addEventListener("click",function(){
            console.log('test');
            console.log(this);
        },true);//执行
        $("button").addEventListener("click",test,true);//执行
        $("button").addEventListener("click",test,true);//不执行
$("button").addEventListener("click",test,false);//执行
        function test(){
            console.log(1);
        }
        </script>

把function写成函数形式调用，则只掉用一次，但是绑定不同事件模式可以，
IE中用attachevent