jQuery高级事件

学习要点：

1.模拟操作 2.命名空间 3.事件委托 on、off和one

一、模拟操作

1.trigger 方法

$("input").click(function () { console.log($(this).val()); }); 自动触发点击事件

$("input").trigger("click");

简写

$("input").click(function () {
    console.log($(this).val());
}).trigger("click");

传递参数

$("input").click(function (e, data1, data2) {
    console.log(data1['name'] + ", " + data2[1]);
}).trigger("click", [{"name" : "zhang", "age" : 22}, ["lisi", 23]]);    // zhang, 23

也可以自动触发自定义事件 $(“input”).bind(“myClick”, function () { console.log(“自定义事件”); // 自定义事件 }).trigger(“myClick”); 下面来看看简写的方法，没事偷偷懒

$("input").bind("click", function () {
    console.log("简写的模拟事件");     // 简写的模拟事件
}).click();

2.triggerHandler 方法

在大都是情况下，trigger和triggerHandler两个方法的用法类似，但是也存在差异
第一种：.triggerHandler()方法并不会触发事件的默认行为，而.trigger()会

姓名:

$("input[name=sub]").trigger("click"); // 自动跳转到指定URL $("input[name=sub]").triggerHandler("click"); 如果你希望用trigger模仿triggerHander

$("input[name=sub]").click(function (e) {
    e.preventDefault();
}).trigger("click");

第二种：.triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有

• item1
• item2
• item3

$("ul li").click(function () { console.log($(this).text()); }); $("ul li").trigger("click"); // 3个li都会被触发 $("ul li").triggerHandler("click"); // 只有第一个li被触发 第三种：.triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined 而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)

alert($(document).click(function (){
    return "aaa";       // aaa
}).triggerHandler("click"));
alert($(document).click(function (){
    return "aaa";       // [object Object]
}).trigger("click"));

第四种：.trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是 jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。

var index = 1; $("div").bind("myEvent", function () { console.log("index = " + index++); }) $(".inner").trigger("myEvent"); // index = 1, index = 2, index = 3 $(".inner").triggerHandler("myEvent"); // index = 1

二、命名空间

有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，
这个时候，可以使用事件的命名空间解决。

$(document).bind("click.abc", function () {
    console.log("abc");
})
$(document).bind("click.123", function ()　{
    console.log("123");
});
$(document).unbind("click.abc");       // 点击只是触发click.123
$(document).trigger("click.123");

三、事件委派
让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行相关处理即可。
由于怕造成混乱，jquery先后使用和废弃了live()、die()和delegate()、undelegate()方法
统一由on()、off()和one()来进行事件委派

进行事件委派

$(".button").on("click", function () {
    $(this).clone().appendTo("#box");
});

取消事件委派

$(".button").off("click");

one 绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件

$(".button").one("click", function () {
    $(this).clone().appendTo("#box");
});