jQuery学习笔记——事件处理

有了jQuery,  我们有了处理对象事件的一系列函数.  上面基础知识还是要懂, 但是再也不用自己去实现处理多播事件委托的函数了.  正所谓有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法举例:
$("#testDiv4").bind("click", showMsg);  我们为id是testDiv4的元素, 添加列click事件的事件处理函数showMsg.

使用jQuery事件处理函数的好处:

1. 添加的是多播事件委托.  也就是为click事件又添加了一个方法, 不会覆盖对象的click事件原有的事件处理函数.
            $("#testDiv4").bind("click", function(event) { alert("one"); });
            $("#testDiv4").bind("click", function(event) { alert("two"); });

单击testDiv4对象时, 依次提示"one"和"two".

bind( type, [data], fn )
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

当每个段落被点击的时候，弹出其文本:

$("p").bind("click", function(){
  alert( $(this).text() );
});
 

bind()是最常使用的函数,  注意方法签名上data参数, 可以在事件处理之前传递一些附加的数据:
function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

 

注意event参数的使用. jQuery中统一了事件对象, 将事件对象作为事件处理函数的唯一参数传递.

data参数我们也要通过event.data 进行访问.  为何要提供data参数呢?

因为我们经常碰到这样的问题: 希望在事件处理中根据事件源的某些数据进行特殊处理.

<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>

在事件处理函数中获取数据:

$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });

attr函数是上一讲中的知识, 用于获取元素的"元素属性", 而且可以获取自定义的元素属性. 单击div后将显示:

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

 

jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.
设置单击事件:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });
等效于: $("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

触发单击事件:
$("#testDiv").click();
等效于$("#testDiv").trigger("click");
 
注意这里等效的是trigger而不是triggerHandler.
此类方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻译方式, 所以按照功能称其为"快捷方法",  征集好的翻译名称!

jQuery中统一了事件对象,  当绑定事件处理函数时,  会将jQuery格式化后的事件对象作为唯一参数传入:
$("#testDiv").bind("click", function(event) {  });

关于event对象的详细说明, 可以参考jQuery官方文档: http://docs.jquery.com/Events/jQuery.Event