由 preventDefault()方法 复习jQuery 事件方法

今天看到了 preventDefault() 方法,就复习了一下jQuery 事件方法,记下随记

jQuery 参考手册 - 事件

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

触发实例:

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

绑定实例:

$("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

方法 描述
bind() 向匹配元素附加一个或更多事件处理器
blur() 触发、或将函数绑定到指定元素的 blur 事件
change() 触发、或将函数绑定到指定元素的 change 事件
click() 触发、或将函数绑定到指定元素的 click 事件
dblclick() 触发、或将函数绑定到指定元素的 double click 事件
delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die() 移除所有通过 live() 函数添加的事件处理程序。
error() 触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
event.pageX 相对于文档左边缘的鼠标位置。
event.pageY 相对于文档上边缘的鼠标位置。
event.preventDefault() 阻止事件的默认动作。
event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
event.target 触发该事件的 DOM 元素。
event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type 描述事件的类型。
event.which 指示按了哪个键或按钮。
focus() 触发、或将函数绑定到指定元素的 focus 事件
keydown() 触发、或将函数绑定到指定元素的 key down 事件
keypress() 触发、或将函数绑定到指定元素的 key press 事件
keyup() 触发、或将函数绑定到指定元素的 key up 事件
live() 为当前或未来的匹配元素添加一个或多个事件处理器
load() 触发、或将函数绑定到指定元素的 load 事件
mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready() 文档就绪事件(当 HTML 文档就绪可用时)
resize() 触发、或将函数绑定到指定元素的 resize 事件
scroll() 触发、或将函数绑定到指定元素的 scroll 事件
select() 触发、或将函数绑定到指定元素的 select 事件
submit() 触发、或将函数绑定到指定元素的 submit 事件
toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
trigger() 所有匹配元素的指定事件
triggerHandler() 第一个被匹配元素的指定事件
unbind() 从匹配元素移除一个被添加的事件处理器
undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来
unload() 触发、或将函数绑定到指定元素的 unload 事件

HTML DOM Event 对象

实例

哪个鼠标按钮被点击?

光标的坐标是?

被按的按键的 unicode 是?

相对于屏幕,光标的坐标是?

shift 键被按了吗?

哪个元素被点击了?

哪个事件类型发生了?

Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

事件句柄 (Event Handlers)

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。

属性 此事件发生在何时...
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

鼠标 / 键盘属性

属性 描述
altKey 返回当事件被触发时,"ALT" 是否被按下。
button 返回当事件被触发时,哪个鼠标按钮被点击。
clientX 返回当事件被触发时,鼠标指针的水平坐标。
clientY 返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
metaKey 返回当事件被触发时,"meta" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。

IE 属性

除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:

属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

方法 描述
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-02 22:59:27

由 preventDefault()方法 复习jQuery 事件方法的相关文章

JQuery DOM元素方法跟JQuery 核心函数跟JQuery 事件方法

JQuery DOM 元素 函数                            描述 .get()                           从队列中删除所有未运行的项目. .index()                        存储与指定元素相关的任意数据. .size()                          存储与匹配元素相关的任意数据. .toArray()                     从队列最前端移除一个队列函数,并执行它. JQuer

jQuery 事件方法

事件方法触发器或添加一个函数到被选元素的事件处理程序. 下面的表格列出了所有用于处理事件的 jQuery 方法. 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触发.或将函数绑定到指定元素的 click 事件 dblclick() 触发.或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或

jQuery 事件方法大全-超全的总结

jquery常用的事件: /* on off hover blur change click dblclick focus keydown keyup keypress mousedown resize scroll select submit */ 元素事件列表说明: 注:不带参数的函数,其参数为可选的 fn.jQuery不支持form元素的reset事件. 事件 描述 支持元素或对象 blur( ) 元素失去焦点 a, input, textarea, button, select, lab

jQuery 事件方法(二)

方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 click() 触发.或将函数绑定到指定元素的 click 事件 dblclick() 触发.或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序. error

jQuery 事件方法获取焦点focus()和失去焦点blur()的用法

<script type="text/javascript">$(document).ready(function(){  $("input").focus(function(){    $("input").css("background-color","#FFFFCC");  });  $("input").blur(function(){    $("inpu

点击切换图标方法,jquery bootstrap方法

我是真菜,用了半天,没有实现自己的效果,首先,我想的是利用attr的方法找到button的时候,触发span的改变,把class的属性里的图标进行改变,可以实现这个功能,但是出现了一个bug,我是取的所有的button ,还有所有的span ,换句话说,我是将所有的图标都进行切换了,而且不能够切换回来,方法不太好,因为我是直接调取的class方法,没有用到ID,由于ID才是唯一的,所以我这个方法不靠谱,只能以后再说 $(document).ready(function(){ $("button&

jQuery 的58种事件方法你都用过了吗

jQuery 事件方法 事件方法触发或将函数附加到所选元素的事件处理程序. 下表列出了用于处理事件的所有jQuery方法. 方法 描述 bind() 在3.0版中已弃用. 请改用on()方法.将事件处理程序附加到元素 blur() 附加/触发模糊事件 change() 附加/触发更改事件 click() 附加/触发单击click事件 dblclick() 附加/触发双击事件 delegate() 在3.0版中已弃用.请改用on()方法.将处理程序附加到匹配元素的当前或将来指定的子元素 die()

jQuery1.9+ 废弃的函数和方法 升级Jquery版本遇到的问题

面临问题 很久没关注JQuery了,今天突然想升级一下系统中使用的jquery版本,突然发现,升级JQuery版本到1.9之后出现了很多问题,比如:$.browser is undefined.突然就想到难不成jquery升级删除了这个属性?记得以前有个版本中JQuery已经不建议使用该属性来判断浏览器了. 查了一下Google发现jQuery升级1.9还真是去掉和废弃了不少的东西,升级系统就有了很大的难度,以前用过一些比较老的插件咋办,只能自己一个个修改了. jQuery1.9中改变的地方 J

JQ中bind(),live(),delegate()事件方法的区别

[导读] bind(), live(), 和 delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1 7版本中发布了一个用于绑定事件的新方法叫 bind(), .live(), 和 .delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1.7版本中发布了一个用于绑定事件的新方法叫做on.这个方法包含