jQuery高级事件

学习要点：

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

一、模拟操作

1.trigger 方法

<div style="width:200px;height:200px;background:red;">
    <input type="button" value="点击"/>
</div>

$("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()会

<form action="http://www.baidu.com">
    姓名: <input type="text" name="username"/>
    <input type="submit" name="sub"/>
</form>

$("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()会影响所有

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

$("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()不会冒泡。

<div style="width: 300px; height: 300px; background: red;">
    <div style="width: 200px; height: 200px; background: green;">
        <div class="inner" style="width: 100px; height: 100px; background: blue;">inner</div>
    </div>
</div>
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()来进行事件委派

<div style="background:red;width:200px;height:200px;" id="box">
    <input type="button" value="按钮" class="button" />
</div>

进行事件委派

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

取消事件委派

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

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

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