jQuery 事件-CSDN博客

什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常见 DOM 事件：

事件绑定

文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用on()方法来对被选元素及子元素上添加一个或多个事件处理程序。

注意：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

提示： 如需移除事件处理程序，请使用Off()方法。

提示：如需添加只运行一次的事件然后移除，请使用one()方法。

语法

    $(selector).on(event,childSelector,data, 
   function,map) 
  

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

范例代码

 
  View Code

移除事件

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

    $(selector).off(event,selector, 
   function(eventObj),map) 
  

事件对象的属性和方法

方法	描述
event.currentTarget	在事件冒泡阶段内的当前 DOM 元素
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget	返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented()	返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped()	返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped()	返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace	返回当事件被触发时指定的命名空间
event.pageX	返回相对于文档左边缘的鼠标位置
event.pageY	返回相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认行为
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation()	阻止其他事件处理程序被调用
event.stopPropagation()	阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target	返回哪个 DOM 元素触发事件
event.timeStamp	返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type	返回哪种事件类型被触发
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下