jquery事件监听归类

  • 内容
  • 相关

1.bind

--bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,

常用结构:bind(type,[data],function(eventObject))
{
type:事件类型,如click、change、mouseover等;

data:传入监听函数的参数,通过event.data取到;

function:监听函数,可传入event对象,这里的event是jquery封装的event对象。

}
源码{

bind: function( types, data, fn ) {

return this.on( types, null, data, fn );

}
}

可以看到内部是调用了on方法。

bind的特点就是会把监听器绑定到目标元素上,有一个邦一个,在页面上的元素不会动态添加的时候使用它没有什么问题。

但如果列表中动态增加一个“列表5”,点击它是没有反应的,必须再bind一次才行。

测试代码:


$(function(){
$('div').bind('click',function(){
if($(this).text()=='列表4'){
$(this).after('<div>列表5</div>');
}
alert($(this).text());


})
})
注意:jquery中append()和after()方法都可以添加元素,不同之处是append()是在要添加元素的末尾(在元素内)添加,而after()是在要添加的元素之后(在元素外)。


2.live

---live(type, [data], fn)

live的参数和bind一样,源码:{

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}
}

live方法并没有将监听器绑定到自己(this)身上,而是绑定到this.context上。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素),

使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。

将上面代码中的bind改为live后,点击列表5就可以弹出“列表5”了。

注意:live方法在在 jQuery 版本 1.7 中被废弃,在版本
1.9 中被移除,官方建议使用on代替。

测试代码:


$(function(){
$('div').live('click',function(){
if($(this).text()=='列表4'){
$(this).after('<div>列表5</div>');
}
alert($(this).text());
})
})

----注!现已被移除不建议后期继续使用,高于1.9版本禁止使用


3.delegate

---将监听事件绑定在就近的父级元素上

源码: {

delegate: function( selector, types, data, fn ) {

return this.on( types, selector,

data, fn );

}
}

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,

并规定当这些事件发生时运行的函数。

这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。

代码,实现效果,点击div,两个p标签的文字颜色都发生变化。

<div>
<p>div内的p标签</p>
</div>
<p>div外的p标签</p>
<script>
$(function(){
$('div').delegate('p','click',function(){
$('p').css('color','blue');

});
</script>


4、on
--on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

代码,实现效果同上,把delegate改为on,第一个参数为click,第二个参数p可写可不写,第三个参数同上。

$(function(){
$('div').on('click','p',function(){
$('p').css('color','red');
});

js鼠标事件大全

事件 浏览器支持 描述

onClick HTML: 2 | 3 | 3.2 | 4 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
Browser: IE3 | N2 | O3

onDblClick HTML: 2 | 3 | 3.2 | 4 鼠标双击事件
Browser: IE4 | N4 | O

onMouseDown HTML: 2 | 3 | 3.2 | 4 鼠标上的按钮被按下了
Browser: IE4 | N4 | O

onMouseUp HTML: 2 | 3 | 3.2 | 4 鼠标按下后,松开时激发的事件
Browser: IE4 | N4 | O

onMouseOver HTML: 2 | 3 | 3.2 | 4 当鼠标移动到某对象范围的上方时触发的事件
Browser: IE3 | N2 | O3

onMouseMove HTML: 2 | 3 | 3.2 | 4 鼠标移动时触发的事件
Browser: IE4 | N4 | O

onMouseOut HTML: 2 | 3 | 3.2 | 4 当鼠标离开某对象范围时触发的事件
Browser: IE4 | N3 | O3

onKeyPress HTML: 2 | 3 | 3.2 | 4 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
Browser: IE4 | N4 | O

onKeyDown HTML: 2 | 3 | 3.2 | 4 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
Browser: IE4 | N4 | O

onKeyUp HTML: 2 | 3 | 3.2 | 4 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
Browser: IE4 | N4 | O

页面相关事件

事件 浏览器支持 描述

onAbort HTML: 2 | 3 | 3.2 | 4 图片在下载时被用户中断
Browser: IE4 | N3 | O
onBeforeUnload HTML: 2 | 3 | 3.2 | 4 当前页面的内容将要被改变时触发的事件
Browser: IE4 | N | O
onError HTML: 2 | 3 | 3.2 | 4 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
Browser: IE4 | N3 | O
onLoad HTML: 2 | 3 | 3.2 | 4 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成
Browser: IE3 | N2 | O3
onMove HTML: 2 | 3 | 3.2 | 4 浏览器的窗口被移动时触发的事件
Browser: IE | N4 | O
onResize HTML: 2 | 3 | 3.2 | 4 当浏览器的窗口大小被改变时触发的事件
Browser: IE4 | N4 | O
onScroll HTML: 2 | 3 | 3.2 | 4 浏览器的滚动条位置发生变化时触发的事件
Browser: IE4 | N | O
onStop HTML: 2 | 3 | 3.2 | 4 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
Browser: IE5 | N | O
onUnload HTML: 2 | 3 | 3.2 | 4 当前页面将被改变时触发的事件
Browser: IE3 | N2 | O3

表单相关事件

事件 浏览器支持 描述

onBlur HTML: 2 | 3 | 3.2 | 4 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
Browser: IE3 | N2 | O3

onChange HTML: 2 | 3 | 3.2 | 4 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
Browser: IE3 | N2 | O3

onFocus HTML: 2 | 3 | 3.2 | 4 当某个元素获得焦点时触发的事件
Browser: IE3 | N2 | O3

onReset HTML: 2 | 3 | 3.2 | 4 当表单中RESET的属性被激发时触发的事件
Browser: IE4 | N3 | O3

onSubmit HTML: 2 | 3 | 3.2 | 4 一个表单被递交时触发的事件
Browser: IE3 | N2 | O3

滚动字幕事件

事件 浏览器支持 描述

onBounce HTML: 2 | 3 | 3.2 | 4 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
Browser: IE4 | N | O

onFinish HTML: 2 | 3 | 3.2 | 4 当Marquee元素完成需要显示的内容后触发的事件
Browser: IE4 | N | O

onStart HTML: 2 | 3 | 3.2 | 4 当Marquee元素开始显示内容时触发的事件
Browser: IE4 | N | O

编辑事件

事件 浏览器支持 描述

onBeforeCopy HTML: 2 | 3 | 3.2 | 4 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
Browser: IE5 | N | O

onBeforeCut HTML: 2 | 3 | 3.2 | 4 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
Browser: IE5 | N | O

onBeforeEditFocus HTML: 2 | 3 | 3.2 | 4 当前元素将要进入编辑状态
Browser: IE5 | N | O

onBeforePaste HTML: 2 | 3 | 3.2 | 4 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
Browser: IE5 | N | O

onBeforeUpdate HTML: 2 | 3 | 3.2 | 4 当浏览者粘贴系统剪贴板中的内容时通知目标对象
Browser: IE5 | N | O

onContextMenu HTML: 2 | 3 | 3.2 | 4 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
Browser: IE5 | N | O

onCopy HTML: 2 | 3 | 3.2 | 4 当页面当前的被选择内容被复制后触发的事件
Browser: IE5 | N | O

onCut HTML: 2 | 3 | 3.2 | 4 当页面当前的被选择内容被剪切时触发的事件
Browser: IE5 | N | O

onDrag HTML: 2 | 3 | 3.2 | 4 当某个对象被拖动时触发的事件 [活动事件]
Browser: IE5 | N | O

onDragDrop HTML: 2 | 3 | 3.2 | 4 一个外部对象被鼠标拖进当前窗口或者帧
Browser: IE | N4 | O

onDragEnd HTML: 2 | 3 | 3.2 | 4 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了
Browser: IE5 | N | O

onDragEnter HTML: 2 | 3 | 3.2 | 4 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
Browser: IE5 | N | O

onDragLeave HTML: 2 | 3 | 3.2 | 4 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
Browser: IE5 | N | O

onDragOver HTML: 2 | 3 | 3.2 | 4 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
Browser: IE5 | N | O

onDragStart HTML: 2 | 3 | 3.2 | 4 当某对象将被拖动时触发的事件
Browser: IE4 | N | O

onDrop HTML: 2 | 3 | 3.2 | 4 在一个拖动过程中,释放鼠标键时触发的事件
Browser: IE5 | N | O

onLoseCapture HTML: 2 | 3 | 3.2 | 4 当元素失去鼠标移动所形成的选择焦点时触发的事件
Browser: IE5 | N | O

onPaste HTML: 2 | 3 | 3.2 | 4 当内容被粘贴时触发的事件
Browser: IE5 | N | O

onSelect HTML: 2 | 3 | 3.2 | 4 当文本内容被选择时的事件
Browser: IE4 | N | O

onSelectStart HTML: 2 | 3 | 3.2 | 4 当文本内容选择将开始发生时触发的事件
Browser: IE4 | N | O

数据绑定



事件 浏览器支持 描述

onAfterUpdate HTML: 2 | 3 | 3.2 | 4 当数据完成由数据源到对象的传送时触发的事件
Browser: IE4 | N | O

onCellChange HTML: 2 | 3 | 3.2 | 4 当数据来源发生变化时
Browser: IE5 | N | O

onDataAvailable HTML: 2 | 3 | 3.2 | 4 当数据接收完成时触发事件
Browser: IE4 | N | O

onDatasetChanged HTML: 2 | 3 | 3.2 | 4 数据在数据源发生变化时触发的事件
Browser: IE4 | N | O

onDatasetComplete HTML: 2 | 3 | 3.2 | 4 当来子数据源的全部有效数据读取完毕时触发的事件
Browser: IE4 | N | O

onErrorUpdate HTML: 2 | 3 | 3.2 | 4 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件
Browser: IE4 | N | O

onRowEnter HTML: 2 | 3 | 3.2 | 4 当前数据源的数据发生变化并且有新的有效数据时触发的事件
Browser: IE5 | N | O

onRowExit HTML: 2 | 3 | 3.2 | 4 当前数据源的数据将要发生变化时触发的事件
Browser: IE5 | N | O

onRowsDelete HTML: 2 | 3 | 3.2 | 4 当前数据记录将被删除时触发的事件
Browser: IE5 | N | O

onRowsInserted HTML: 2 | 3 | 3.2 | 4 当前数据源将要插入新数据记录时触发的事件
Browser: IE5 | N | O

外部事件

事件 浏览器支持 描述

onAfterPrint HTML: 2 | 3 | 3.2 | 4 当文档被打印后触发的事件
Browser: IE5 | N | O

onBeforePrint HTML: 2 | 3 | 3.2 | 4 当文档即将打印时触发的事件
Browser: IE5 | N | O

onFilterChange HTML: 2 | 3 | 3.2 | 4 当某个对象的滤镜效果发生变化时触发的事件
Browser: IE4 | N | O

onHelp HTML: 2 | 3 | 3.2 | 4 当浏览者按下F1或者浏览器的帮助选择时触发的事件
Browser: IE4 | N | O

onPropertyChange HTML: 2 | 3 | 3.2 | 4 当对象的属性之一发生变化时触发的事件
Browser: IE5 | N | O

onReadyStateChange HTML: 2 | 3 | 3.2 | 4 当对象的初始化属性值发生变化时触发
Browser: IE4 | N | O


一般事件


事件 浏览器支持 描述

onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击

onDblClick IE4|N4|O 鼠标双击事件

onMouseDown IE4|N4|O 鼠标上的按钮被按下了

onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件

onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove IE4|N4|O 鼠标移动时触发的事件

onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件

onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]

onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]

onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件


事件 浏览器支持 描述

onAbort IE4|N3|O 图片在下载时被用户中断

onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件

onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误

onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成

onMove IE|N4|O 浏览器的窗口被移动时触发的事件

onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件

onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件

onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断

onUnload IE3|N2|O3 当前页面将被改变时触发的事件


表单相关事件


事件 浏览器支持 描述

onBlur IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]

onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件

onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件

onSubmit IE3|N2|O3 一个表单被递交时触发的事件


滚动字幕事件


事件 浏览器支持 描述

onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件

onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件

onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件

编辑事件
事件 浏览器支持 描述

onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件

onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态

onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件

onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象

onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]

onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件

onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件

onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]

onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧

onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了

onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件

onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件

onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件

onDragStart IE4|N|O 当某对象将被拖动时触发的事件

onDrop IE5|N|O 在一个拖动过程中,释放鼠标键时触发的事件

onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件

onPaste IE5|N|O 当内容被粘贴时触发的事件

onSelect IE4|N|O 当文本内容被选择时的事件

onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件


数据绑定


事件 浏览器支持 描述

onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件

onCellChange IE5|N|O 当数据来源发生变化时

onDataAvailable IE4|N|O 当数据接收完成时触发事件

onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件

onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件

onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件

onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件

onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件

onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件

onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件


数据绑定

 

事件 浏览器支持 描述

onAfterPrint IE5|N|O 当文档被打印后触发的事件

onBeforePrint IE5|N|O 当文档即将打印时触发的事件

onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件

onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件

onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件

onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件

本文标签:

版权声明:若无特殊注明,本文皆为《彭Sir》原创,转载请保留文章出处。

本文链接:jquery事件监听归类 - http://pengsirs.com/post-115.html

收录状态:[百度已收录][360已收录][搜狗已收录]

上一篇:感受一下小姐姐是如何用其口才,轻松给男朋友带绿帽的 下一篇:你越优秀,身边的人就越嫉妒,你只能更优秀

发表评论

电子邮件地址不会被公开。 必填项已用*标注

允许邮件通知
网站备案相关信息
域名 pengsirs.com
主办方名称 彭松
主办单位性质 个人
主体备案号 鄂ICP备19010459号
ICP备案号 鄂ICP备19010459号-1
首页地址 http://pengsirs.com/ [备案查询]
网站名称 遇上更好的你
审核时间 2019/4/24 0:00:00