JS事件的绑定

JS事件的绑定

• 使用 对象.事件 = 函数 的形式绑定响应函数，不能绑定多个，如果绑定了多个，后边的会覆盖掉前面的。

如：给button绑定点击事件

<script type="text/javascript">
    window.onload = function () {
        var btn1 = document.getElementById("btn1");
        btn1.onclick = function() {
            alert(1);
        }
        btn1.onclick = function() {
            alert(2);
        }
    }
</script>

btn1在绑定两个点击事件时，后者覆盖了前者，前者不触发。

使用addEventListener()

• 通过这个方法也可以为元素绑定响应函数

• 参数：

  1. 事件的字符串，不要on
  2. 回调函数，当事件触发时该函数会被调用
  3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false

  如：btn1.addEventListener(“click”, function(){ alert(1); }, false);

<script type="text/javascript">
    window.onload = function () {
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click", function(){ alert(1); }, false);
        btn1.addEventListener("click", function(){ alert(2); }, false);
        btn1.addEventListener("click", function(){ alert(3); }, false);
    }
</script>

btn1绑定的三个函数都触发。

• 使用**addEventListener()**可以同时为一个元素的相同事件同时绑定多个响应式函数，这样当事件被出发时，响应函数都会依照函数的绑定顺序执行
• 该方法不支持IE8及以下浏览器。可以用 btn1.attachEvent();

IE8及以下：attachEvent()

• 参数：
  1. 事件的字符串：要on
  2. 回调函数
• 触发顺序是倒序，后绑定先执行

btn1.attachEvent(“onclick”, function(){ alert(1); });

定义一个函数适应浏览器

• addEventListener() 中的 this 是绑定事件的对象
• **attachEvent() **中的 this 是window
• eventStr 事件字符串不写on （加上去容易）

function bind(obj, eventStr, callback) {
    if(obj.addEventListener) {
        //大部分浏览器
       obj.addEventListener(eventStr, callback, false);
    }else {
        //IE8及以下
        obj.attachEvent("on"+eventStr, callback);
    }
}

bind(btn1, "click", function(){
    alert(this);//IE8是window
});

解决IE8方法的this，修改浏览器的调用权，使用匿名函数调用回调函数：

function bind(obj, eventStr, callback) {
    if(obj.addEventListener) {
        //大部分浏览器
       obj.addEventListener(eventStr, callback, false);
    }else {
        //IE8及以下
        obj.attachEvent("on"+eventStr, function(){
            callback().call(obj);
        });
    }
}

bind(btn1, "click", function(){
    alert(this);
});