第15章 jQuery事件处理
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
jQuery事件处理
jQuery绑定事件
jQuery解除事件绑定
jQuery事件对象 each方法 jQuery修改CSS
1
浏览器事件回顾
事件可分为以下几个类型： a) 键盘事件：keypress b) 鼠标事件:click，mouseover c) 表单事件:blur，focus，submit d) 文档事件:load e) 浏览器事件:scroll(滚动) 实际上浏览器任何一个部分都有可能产生事件
3
JavaScript事件处理回顾2
问题：使用addEventHandler为指定事件处理程 序，但在IE下，仍然不能工作。 原因：在IE中，事件处理函数中的this并不指向当 前发生事件的HTML元素。 解决方案： – 提供工具函数getActivatedObject（） 总结：因为不同浏览器的事件处理方式的不同， 直接使用JavaScript编写事件处理程序不是很方 便，而jQuery提供了跨浏览器的解决方案，使程修改CSS
我们经常需要在事件处理程序中改变元素的样式 ，最简单的方式是向元素添加或删除CSS类， jQuery提供了简便的方法来实现这一功能： 1. 添加/删除一个CSS类：
2. 添加/删除多个（用空格隔开）：
13
小结
• 在本章中，我们介绍了jQuery对JavaScript事件 处理的一些简化。我们还介绍了jQuery访问集合 的each方法。最后我们介绍了使用jQuery改变 CSS的方法。
2. 在body元素上触发事件e:
10
jQuery中访问一组元素的方法
上一章我们介绍了jQuery的几种选择器，它们返 回的值有可能是一个数组，jQuery里提供了一个 方便的方法each，让我们方便的实现数组的遍历 ，它接收一个函数作为参数，比如：
11
深入了解each方法
each方法中，作为参数的函数可以有两个参数（ index，value）,可以用这两个参数访问数组的元 素的索引和值，比如：
8
解除特定事件监听器的绑定
问题：如果我们为click事件注册了多个事件监听 器，该如何指定我们要删除的是哪一个呢？ 方法1：不使用匿名函数作为事件监听器、
方法2：绑定时给事件监听器命名：
9
创建与触发事件对象
问题：以上事件都是浏览器或者说是用户产生的 事件，那么可不可以使用JavaScript触发事件呢 ？ 答：可以按如下步骤编程触发事件 1. 产生一个Event对象，命名为e：
6
一次绑定多个事件
方法1：bind的第一个参数中，把多个事件用空 格隔开，例如：
方法2：传入一个JavaScirpt对象，构成一个事件 类型/事件处理程序组：
7
使用jQuery解除事件绑定
使用jQuery解除事件绑定非常简单，只需要调用 相应元素的unbind方法即可：
上面的代码可以解除myElement上的click事件的 绑定，假如不传参数，unbind可以解除所有事件 的绑定：
4
使用jQuery绑定事件
jQuery提供了一个简单的方式可以为页面上的任 意元素添加事件监听器，比如：
方法2：使用bind
5
匿名函数与$(this)
上一页的代码中我们使用到了匿名函数，我们可 以把它改写为普通的函数，并为它命名，然后作 为参数传递，其效果是一样的。但是因为这个函 数只使用一次，我们可以利用JavaScript的这种 语法简化代码。 上一页的代码中出现了$(this)，在事件处理中， 它同样也指向发生事件的HTML元素，但它与普 通的this不同之处在于，我们可以对它使用 jQuery提供的一些方法。
2
JavaScript事件处理回顾1
1. 通过属性指定事件处理程序： − currentBtn.onmouseover = showHint 缺陷：一次只能指定一个 2. 使用addEventListener方法，可以指定多个事 件处理程序，但只对支持DOM Level 2的浏览 器有效。 3. 使用attachEvent，可以实现与 addEventListener相同的功能，但只在IE中有 效。 解决方案：提供工具函数addEventHander()
jQuery绑定事件
jQuery解除事件绑定
jQuery事件对象 each方法 jQuery修改CSS
1
浏览器事件回顾
事件可分为以下几个类型： a) 键盘事件：keypress b) 鼠标事件:click，mouseover c) 表单事件:blur，focus，submit d) 文档事件:load e) 浏览器事件:scroll(滚动) 实际上浏览器任何一个部分都有可能产生事件
3
JavaScript事件处理回顾2
问题：使用addEventHandler为指定事件处理程 序，但在IE下，仍然不能工作。 原因：在IE中，事件处理函数中的this并不指向当 前发生事件的HTML元素。 解决方案： – 提供工具函数getActivatedObject（） 总结：因为不同浏览器的事件处理方式的不同， 直接使用JavaScript编写事件处理程序不是很方 便，而jQuery提供了跨浏览器的解决方案，使程修改CSS
我们经常需要在事件处理程序中改变元素的样式 ，最简单的方式是向元素添加或删除CSS类， jQuery提供了简便的方法来实现这一功能： 1. 添加/删除一个CSS类：
2. 添加/删除多个（用空格隔开）：
13
小结
• 在本章中，我们介绍了jQuery对JavaScript事件 处理的一些简化。我们还介绍了jQuery访问集合 的each方法。最后我们介绍了使用jQuery改变 CSS的方法。
2. 在body元素上触发事件e:
10
jQuery中访问一组元素的方法
上一章我们介绍了jQuery的几种选择器，它们返 回的值有可能是一个数组，jQuery里提供了一个 方便的方法each，让我们方便的实现数组的遍历 ，它接收一个函数作为参数，比如：
11
深入了解each方法
each方法中，作为参数的函数可以有两个参数（ index，value）,可以用这两个参数访问数组的元 素的索引和值，比如：
8
解除特定事件监听器的绑定
问题：如果我们为click事件注册了多个事件监听 器，该如何指定我们要删除的是哪一个呢？ 方法1：不使用匿名函数作为事件监听器、
方法2：绑定时给事件监听器命名：
9
创建与触发事件对象
问题：以上事件都是浏览器或者说是用户产生的 事件，那么可不可以使用JavaScript触发事件呢 ？ 答：可以按如下步骤编程触发事件 1. 产生一个Event对象，命名为e：
6
一次绑定多个事件
方法1：bind的第一个参数中，把多个事件用空 格隔开，例如：
方法2：传入一个JavaScirpt对象，构成一个事件 类型/事件处理程序组：
7
使用jQuery解除事件绑定
使用jQuery解除事件绑定非常简单，只需要调用 相应元素的unbind方法即可：
上面的代码可以解除myElement上的click事件的 绑定，假如不传参数，unbind可以解除所有事件 的绑定：
4
使用jQuery绑定事件
jQuery提供了一个简单的方式可以为页面上的任 意元素添加事件监听器，比如：
方法2：使用bind
5
匿名函数与$(this)
上一页的代码中我们使用到了匿名函数，我们可 以把它改写为普通的函数，并为它命名，然后作 为参数传递，其效果是一样的。但是因为这个函 数只使用一次，我们可以利用JavaScript的这种 语法简化代码。 上一页的代码中出现了$(this)，在事件处理中， 它同样也指向发生事件的HTML元素，但它与普 通的this不同之处在于，我们可以对它使用 jQuery提供的一些方法。
2
JavaScript事件处理回顾1
1. 通过属性指定事件处理程序： − currentBtn.onmouseover = showHint 缺陷：一次只能指定一个 2. 使用addEventListener方法，可以指定多个事 件处理程序，但只对支持DOM Level 2的浏览 器有效。 3. 使用attachEvent，可以实现与 addEventListener相同的功能，但只在IE中有 效。 解决方案：提供工具函数addEventHander()