方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,
on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
注意:
使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。
提示:
如需移除事件处理程序,请使用
off()
方法。
提示:
如需添加只运行一次的事件然后移除,请使用
one()
方法。
|
参数
|
描述
|
|
event
|
必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值,也可以是数组。必须是有效的事件。
|
|
childSelector
|
可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
|
|
data
|
可选。规定传递到函数的额外数据。
|
|
function
|
可选。规定当事件发生时运行的函数。
|
.on( ) 用法类似于 JS 的
.addEventListeners( )
<li id="li">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<script>
$("ul").on("mouseover",myfunction);
function myfunction(e){
$(e.target).css("color","black").siblings().css("color","red")}
</script>
1. 一个元素绑定一个事件+一个函数:
$("ul").on("mouseover",myfunction);
function myfunction(e){
$(e.target).css("color","black").siblings().css("color","red")}
鼠标移到 #li 元素上,其他同胞元素(slibings( ))都变为红色
on(events,[selector],[data],fn)
•events:
一个
或
多个
用空格分隔的
事件
类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
•selector:
一个
选择器字符串用于过滤器的触发
事件
的选择器
元素
的后代。如果选择器为null或省略,当它到达选定的
元素
,
事件
总是触发。
•data:当
一个
事件
被触发时要传递event.data给
事件
处理函数。
•fn:该
事件
被触发时执行的函数。 false 值也可以做
一个
函数的简写,返回false。
这样
一个
需.
一、
Jq
uery测试题下面哪种不是
jq
uery的选择器?(单选)
A、基本选择器 B、后代选择器 C、类选择器 D、进一步选择器
考点:
jq
uery的选择器 (C)当DOM加载完成后要执行的函数,下面哪个是正确的?(单选)
jQ
uery(expression, [context]) B、
jQ
uery(html, [ownerDocument]) C、
jQ
uery(ca
一般情况下,我们可以直接采用click(),hover()等等直接
绑定
事件
,但是既然on()存在,那么肯定有它的意义:1.用来
绑定
多
事件
,并且为同一函数$('div').on('click mouseover',function(){
//do sth
});2.
多个
事件
绑定
不同函数$('div').on({
'click':function(){
//do sth
作者:盘子
撰写时间:2019年4月15日
jQ
uery的
事件
分类可以分为:页面载入、
事件
处理、
事件
委派、
事件
切换,每种
事件
都有
一个
或者
多个
对应的函数。
jQ
uery
事件
处理方法是
jQ
uery 中的核心函数。
事件
处理程序指的是当 HTML 中发生某些
事件
时所调用的方法。术语由
事件
“触发”(或“激发”)经常会被使...
1、JavaScript的页面载入
事件
:window.onload
缺点:通过这个方法,用户可以设定一些特定的操作,让其在页面的DOM树加载完毕之后执行,但是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后..
on()函数用于为指定
元素
的
一个
或
多个
事件
绑定
事件
处理函数。
此外,你还可以额外传递给
事件
处理函数一些所需的数据。
从
jQ
uery 1.7开始,on()函数提供了
绑定
事件
处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等
事件
函数。
on()支持直接在目标
元素
上
绑定
事件
,也支持在目标
元素
的祖辈
元素
上委托
绑定
。在
事件
委托
绑定
模式下,即使是执行on()函数之...
1.
多个
事件
绑定
同一函数时,如:但点击或者移入时,被选中
元素
改变字体色。
2.
多个
事件
绑定
不同函数时,如:但点击时被选中
元素
字体变大(点击试也移入了故字体也变红,这里只是随意选择了两个
事件
),移入时字体色变为红色。
在工作中难免会遇到用
jQ
uery给
多个
元素
绑定
事件
,今天我们来学习学习,
//元生js写法
var nav = document.getElementById('nav');
var li_list = nav.getElementsByTagName('li');
//批量给
多个
元素
绑定
事件
for(var i=0;i<li_list.l...
type(String) :
事件
类型
data(Object) : (可选) 作为event.data属性值传递给
事件
对象的额外数据对象
fn( Function) :
绑定
到每个匹配
元素
的
事件
上面的处理函数
element.on(events,[selector],fn)
1、events:
一个
或
多个
用空格分隔的
事件
类型,如“click”或“keydown”。
2、selector:
元素
的子
元素
选择器
3、fn:回调函数
绑定
在
元素
身上的侦听函数
第二种方法
把原来给子
元素
身上的
事件
绑定
在父
元素
身
ul父
元素
li子
元素
触发的对象是ul里面的小li,
绑定
事件
是给ul
绑定
的
$("ul").on("click","li",function(){
alert(
1.
jQ
uery
事件
机制
jQ
uery的
事件
机制,指的是:
jQ
uery对JavaScript操作DOM
事件
的封装,包括了:
事件
绑定
、
事件
解绑、
事件
触发。最主要的特点:可以给DOM对象
绑定
多个
事件
2.
jQ
uery
事件
的发展历程(了解)简单
事件
绑定
(单个
事件
<详见
jq
04>) >> bind
事件
绑定
>> delegate
事件
绑定
>> on【...
jq
中bind方法与on方法区别,我今天给大家举个小小的列子特别简单,相信大家一定一眼就能明白其中的区别所在了<!-- 首先我页面之中有
一个
ul标签 -->
<ul class="opo">
<li>askjdnsajdnk</li>
</ul>js代码中我们分别使用bind和on方法,来实现点击li的时候,让被点击的dom节点改...
因为项目中经常会有利用
jq
uery操作dom
元素
的增删操作,所以会涉及到dom
元素
的
绑定
事件
方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题。
bind()
bind()向匹配
元素
添加
一个
或
多个
事件
处理器。
$(selector)...
在
jQ
uery的1.7+的版本之中,原来的live方法被去除了,那么怎么做到live方法的一样的
绑定
时间的效果呢?答案就是on方法,on 方法有怎么去使用呢?1. on 给已经在dom 中的
元素
绑定
事件
jQ
uery的文档里面已经给出示例了,先看看on方法的完整的形态:
on(events,[selector],[data],fn)
参数:events,[selector],[data],