JQuery高级事件

1. 模拟操作

$("input").click(function(e, data1, data2) {

alert("click");

})

$("input").trigger("click");  //模拟点击事件

$("input").trigger("click", ["data", "123"]);  //模拟点击事件，可以传递数据

2. 自定义事件

$("input").bind("myEvent", function() {

});

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

$("input").click();  //相当于$("input").trigger("click");

$("input").triggerHandler("click");  //1) 不执行默认行为，2) 并且仅触发匹配的第一个元素, 返回值为事件处理函数返回结果，tigger返回jquery对象 3) trigger会冒泡，triggerHandler不会冒泡

3. 命名空间

$("input").bind("click.abc", function() {

});

$("input").unbind("click.abc");

$("input").unbind(".abc");

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

4. 事件委托

$(function() {

$(".button").live("click", function() {    //live绑定到document上，而且点击button其实冒泡到document上，并且验证event.type和event.target.

console.log("click");   //委托事件，事件绑定到document

$(this).clone().appendTo("#box");  //事件对新建元素依然有效

});

$(".button").die("click")   //取消委托

})   //已经过时

$("div").delegate(".button", "click", function() {

alert("delegate click");

])

$("div").undelegate(".button", "click");  //删除委托

5. on, off, one

//推荐使用

$(".button").on("click dbclick", data, function(e) {

alert("on");  //替代bind

})

$(".button").on({

mouseover: function(e) {

alert("mouseover");

},

mouseout: function(e) {

alert("mouseout");

}

}, false)  //false阻止默认行为和冒泡

$(".button").off("mouseover");  //取代unbind

$("div").on("click", ".button", function() {

$(this).clone().appendTo("#box");  //替换delegate.

})

$("div").one("click", function() {

alert("click");  //仅执行一次，执行完毕后移出事件

}