事件是Web应用程序可以检测到的操作。
jQuery提供了将事件处理程序附加到选择的简单方法。
发生事件时,将执行提供的函数。
以下是示例事件:
网页加载
点击一个元素
将鼠标移到元素上
提交HTML表格
键盘上的按键等
在jQuery中,大多数DOM事件具有等效的jQuery方法。
要将点击事件分配给页面上的所有段落,请执行以下操作:
$("p").click();
下一步是定义事件发生时应发生的情况。您必须将一个函数传递给事件:
$("p").click(function(){ // 需要执行的动作... });
此示例在单击页面时隐藏页面上的段落:
$("p").click(function(){ $(this).hide(); });测试看看‹/›
本示例将一个“changeSize”函数附加到click事件:
$(document).ready(function(){ $("p").click(changeSize); }); function changeSize() { $(this).animate({fontSize: "+=5px"}); }测试看看‹/›
$(document).ready()
jQuery $(document).ready()方法指定在DOM完全加载时要执行的函数。
以下示例在加载DOM时显示一条消息:
$(document).ready(function(){ $("p").text("现在已经加载了DOM,可以对其进行操作."); });测试看看‹/›
click()
jQuery click()方法将事件处理程序函数附加到所选元素。
当用户单击该元素时,将执行该函数:
$("p").click(function(){ $(this).css({"background-color":"#007FFF", "color":"white"}); });测试看看‹/›
mouseenter()
jQuery mouseenter()方法将事件处理程序函数附加到所选元素。
当鼠标指针进入该元素时,将执行该函数:
$("p").mouseenter(function(){ $(this).css("background-color", "yellow"); });测试看看‹/›
mouseleave()
jQuery mouseleave()方法将事件处理程序函数附加到所选元素。
当鼠标指针离开该元素时,将执行该函数:
$("p").mouseleave(function(){ $(this).css("background-color", "lightblue"); });测试看看‹/›
mousedown()
jQuery mousedown()方法将事件处理程序函数附加到所选元素。
当用户在元素上按下鼠标按钮时,将执行该函数:
$("p").mousedown(function(){ $(this).after("<p style='color:red;'>按下鼠标键</p>"); });测试看看‹/›
mouseup()
jQuery mouseup()方法将事件处理程序函数附加到所选元素。
当鼠标悬停在该元素上时,释放鼠标按钮,将执行该函数:
$("p").mouseup(function(){ $(this).after("<p style='color:green;'>释放鼠标键</p>"); });测试看看‹/›
keydown()
jQuery keydown()方法将事件处理程序函数附加到所选元素。
当用户按下键盘上的键时,将执行该函数:
$("input").keydown(function(event){ $(this).css("background-color", "yellow"); $("span").text(event.type); });测试看看‹/›
keyup()
jQuery keyup()方法将事件处理程序函数附加到所选元素。
当用户释放键盘上的键时,将执行该函数:
$("input").keyup(function(event){ $(this).css("background-color", "lightblue"); $("span").text(event.type); });测试看看‹/›
hover()
jQuery hover()方法具有两个函数,并且是mouseenter()和mouseleave()方法的组合。
下面的示例将鼠标指针悬停在上方时更改所有<p>元素的背景颜色:
$("p").hover(function(){ $(this).css("background-color", "yellow"); }, function(){ $(this).css("background-color", "lightblue"); });测试看看‹/›
jQuery提供了on()一种方法来响应所选元素上的任何事件。
使用on()方法,我们可以为所选元素附加一个或多个事件处理程序。
下面的示例将click事件附加到所有<p>元素:
$("p").on("click", function(){ $(this).css("background-color", "coral"); });测试看看‹/›
下面的示例将mouseenter事件附加到所有<p>元素:
$("p").on("mouseenter", function(){ $(this).css("background-color", "coral"); });测试看看‹/›
以下示例将多个事件处理程序附加到<div>元素:
$("div").on("mouseenter mouseleave click", function(){ $(this).text(Math.random()); });测试看看‹/›
jQuery off() 方法删除该on()方法附带的一个或多个事件处理程序。
下面的示例从<div>元素中删除mousemove事件:
$("button").click(function(){ $("div").off("mousemove"); });测试看看‹/›
jQuery的事件系统根据W3C标准标准化事件对象。
确保将事件对象传递给事件处理程序。
每个事件处理函数都会接收一个事件对象,其中包含许多属性和方法。
$("div").on("click", function(event){ alert("Event type is " + event.type); alert("Target : " + event.target.innerHTML); });测试看看‹/›
下表显示了所有事件对象的方法和属性:
方法/属性 | 描述 |
---|---|
event.currentTarget | 事件冒泡阶段中的当前DOM元素 |
event.data | 包含绑定当前执行处理程序时传递给事件方法的可选数据 |
event.delegateTarget | 返回附加当前调用的jQuery事件处理程序的元素 |
event.isDefaultPrevented() | 返回是否event.preventDefault()为事件对象调用 |
event.isImmediatePropagationStopped() | 返回是否event.stopImmediatePropagation()为事件对象调用 |
event.isPropagationStopped() | 返回是否event.stopPropagation()为事件对象调用 |
event.metakey | 表示事件触发时是否按下了META键 |
event.namespace | 返回触发事件时指定的名称空间 |
event.pageX | 返回鼠标相对于文档左边缘的位置 |
event.pageY | 返回相对于文档顶部边缘的鼠标位置 |
event.preventDefault() | 阻止浏览器执行所选元素的默认操作 |
event.relatedTarget | 返回鼠标移动时要输入或退出的元素 |
event.result | 包含由指定事件触发的事件处理程序返回的最后一个/上一个值 |
event.stopImmediatePropagation() | 防止其他事件处理程序被调用 |
event.stopPropagation() | 防止事件使DOM树冒泡,防止任何父处理程序收到该事件的通知 |
event.target | 返回哪个DOM元素触发了事件 |
event.timeStamp | 返回创建事件的时间(相对于纪元的毫秒数) |
event.type | 返回触发了哪种事件类型 |
event.which | 返回事件按下的键盘键或鼠标按钮 |
有关完整的事件参考,请访问我们的jQuery Events 参考手册。