4月12日学习笔记——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”。

2. 统一了事件名称

添加多播事件委托时,ie 中是事件名称前面有"on"。但是使用 bind()函数我们不用区分 ie 和 dom,因为内部 jQuery 已经帮我们统一了事件名称。

3. 可以将对象行为全部用脚本控制

让 HTML 代码部分只注意"显示"逻辑.现在的趋势是将 HTML 的行为,内容与样式切分干净.其中用脚本控制元素行为,用 HTML 标签控制元素内容,用 CSS 控制元素样式.使用 jQuery 事件处理函数可以避免在 HTML 标签上直接添加事件.

---

下面是基础的 jQuery 事件处理函数 Event Handling:

---

• 使用 jQuery 事件对象

使用事件自然少不了事件对象。因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象。

jQuery 中统一了事件对象,当绑定事件处理函数时,会将 jQuery 格式化后的事件对象作为唯一参数传入:

 $("#testDiv").bind("click", function(event) { });

下面是 jQuery 事件对象可以在浏览器中支持的属性:

事件对象除了拥有属性,还拥有事件。有一些是一定会用到的事件比如取消冒泡 stopPropagation() 等。下面是 jQuery 事件对象的函数列表: