快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery事件绑定on,jq的绑定事件

jquery绑定事件on()方法

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

成都创新互联公司主要从事网站制作、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务武山,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的替换掉bind()

在 1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到 live()一样的效果。

1、live()写法

2、on()写法

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

delegate() 是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

1、delegate()的写法

2、on()写法

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

jquery用on绑定事件

$(function(){

$('.btn').click(function(){

$('body').append('button class-"btn"/button');

//注意上句错误。append的字符串中应该是button class="btn"/button 

});

$('.btn').on('click',function(){

console.log('haha');

});

//上面绑定的方式也不对。因为页面刚加载时$('.btn')并不包括后来生成的button。

//而且你第一个button,和之后生成的button。都是class="btn"这样就没法区别了。

//所以最好的方式是,页面本身存在的button和之后生成的button,不要叫一个名字。

//比如第一个button的class叫做btn-default,之后生成的button的class叫做btn-append

});

重新给你写一个例子。看下面:

HTML文件

html

head

script src="jquery.js"/script

title演示/title

/head

body

button id="btn-default"默认按钮/button

/body

/html

javascript文件

$('#btn-default').on('click', function(){

$('body').append('button class="btn-append"生成的按钮/button');

});

$(document).on('click', '.btn-append', function(){

console.log('你刚才点击了动态添加的按钮');

});

动态添加的按钮因为是后来才有的,所以必须采用上述时间代理的方式,来监听事件。

jquery on绑定事件是什么意思

on指的是事件委托,举个例子,

$(document).on("click", ".ontest", function () {

//......

});

假设你的.ontest一开始不存在DOM结构当中,也就是html里面,如果你直接click(function () {});的话,事件是无法成功绑定的,而用on委托给document的话,在事件冒泡的时候,就可以成功出发绑定的事件。

JQuery的on()监听方法使用

jquery.on()超级方法

归纳

在jquery的on方法中实现事件委托就更简单了,on方法可以接受三个参数:

第一个参数是事件名,可以只绑定一个事件,如on('click'),也可以绑定多个事件,如on('click dbclick mouseover')等

第二个参数是可选参数,接受一个selector,当事件触发元素符合selector时,会调用事件处理函数

注:此处用到 li:even 选择器,后面有注解

第三个参数是自定义事件处理的回调函数。

1.jQuery :even 选择器

选取每个带有偶数 index 值的元素(比如 2、4、6)

index 值从 0 开始,所有第一个元素是偶数 (0)

2.jQuery :odd 选择器

选取每个带有奇数 index 值的元素(比如 1、3、5)

jquery - 绑定事件on和bind的区别

如:

对.btn进行绑定点击事件,点击.btn后会新增另一个.btn按钮

点击新增的btnAdd按钮后无法触发事件

所以需要利用on的一个参数 childSelector (可选)来实现

这样[图片上传中...(xx.gif-903844-1602815882681-0)]

点击新增的btnAdd按钮后也可以触发事件

为.btn添加 mousemove , mouseleave , mousedown 事件,所有事件的事件名为 doTest 。触发 mousedown 事件时,取消.btn所有名为doTest绑定事件(利用 unbind(".doTest") )。


网页标题:jquery事件绑定on,jq的绑定事件
文章地址:http://6mz.cn/article/dssheos.html

其他资讯