jQuery事件简介

jQuery事件绑定

jQuery提供了几种不同的事件绑定方式，随着jQuery的版本的不同这几种方式也在发生改变

1. jQuery封装的事件函数
   最基本的事件绑定方式是直接使用jQuery封装的事件函数进行绑定事件。

<div class="box></div>
$(".box").click(function(){
console.log("基础事件绑定")
});

由此可见这种方式可以绑定事件，并且比较简单
该方式的优点：

1. 简单，查找到元素后直接使用事件函数就行
2. 绑定多个事件且不冲突

$(".box").click(function(){
	console.log("第二个click事件");
})

由此可见绑定同名事件并且不会覆盖，而是依次执行。
该方法的缺点：不能动态绑定事件，不支持同时绑定事件，如果在页面中动态渲染元素，想给新添加的元素绑定事件必须在渲染之前给元素绑定事件，才能生效。

<input type="button" value="添加元素" class="add">
    <ul class="list">
        <li></li>
        <li></li>
    </ul>
     var template = "<li>新添加的元素</li>";

    $(".add").click(function() {
        $(".list").append($(template));
    });
    $(".list li").click(function() {
        console.log("测试")
    });

当我点击前两个元素时事件能够正常触发，当我点击新添加的元素时并不能触发事件，因此，该方法不能动态添加事件
2. 使用bind添加事件

$(".box").bind("click", function () {
       console.log("使用bind绑定事件");
    });

该方法的优点：能够同时绑定多个事件

$(".box").bind("click mouseover", function () {
       console.log("使用bind绑定事件");
    });

当点击元素和鼠标放在元素上都能触发事件
由此也可以发现该方法的缺点：当同时绑定多个事件时触发的都是同一个事件处理函数，并且该方法也不支持动态绑定事件
3. 使用delegate绑定事件
该方法是可以委托注册事件的

$("body").delegate(".box",{
       click: function () {
         console.log("使用delegate绑定事件");
       }
       }

即使通过body给div绑定事件也能正常触发
该方法可以动态绑定事件，并且也支持如同时绑定多个事件

var template = "<li>新添加的元素</li>";
    $(".add").click(function() {
        $(".list").append($(template));
    });
    $(".list").delegate("li", {
        click: function() {
            console.log("第一个click事件")
        },
        mouseenter: function() {
            console.log("第二个mouseenter事件")
        }
    });

由此可见，即便是新添加的元素也能绑定事件并且能够被触发
4. 使用on绑定事件
该方法支持同时绑定多个事件

 $(".box").on({
        click: function() {
            console.log("使用on绑定click事件");
        },
        mouseenter: function() {
            console.log("使用on绑定mouseenter事件");
        }
    });

效果如下

该方法也支持委托绑定事件

 var template = "<li>新添加的元素</li>";
    $(".add").click(function() {
        $(".list").append($(template));
    });
    $(".list").on("click", "li", function() {
        console.log("使用on动态绑定事件");
    });

当点击先添加的元素时能够触发事件，由此可见该方法也能委托注册事件

事件解绑

jQuery中解绑事件使用off方法解绑

 $(".box").on({
        click: function() {
            console.log("使用on绑定click事件");
        },
         mouseenter: function() {
            console.log("使用on绑定mouseenter事件");
        }
    });
    //解绑指定事件
$("#hide").click(function() {
        $(".box").off("click");
    })

效果如下

由此可以看出，off方法可以指定解绑的事件名进行解绑，没有被解绑的事件仍然会正常触发
如果不穿参数则表示解绑所有事件

 $(".box").on({
        click: function() {
            console.log("使用on绑定click事件");
        },
        mouseenter: function() {
            console.log("使用on绑定mouseenter事件");
        }
    });
    //解绑所有事件
    $("#hide").click(function() {
        $(".box").off();
    })

效果如下

当点击解绑按钮后所有事件都不会被触发

总结

支持委托注册事件的方法有：on()、delegate()
支持动态注册事件的方法有：delagate()
能够同时绑定多个事件的有：bind()、delegate()、on()
解绑事件：off()如果不穿参数表示解绑所有事件，如果传入事件名表示解绑指定事件。