jquery的on方法的作用 jqueryon

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）

相关问答

Q1: jquery on 的用法

.on()方法事件处理程序到当前选定的jQuery对象中的元素。

.on( events [, selector ] [, data ], handler(eventObject) )

events：类型: String

一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

selector：类型: String

一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件。

data：类型: Anything

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

handler(eventObject)：类型: Function()

事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false。

Q2: jQuery绑定事件on

jQuery中用on来绑定事件，常用写法

两种写法哪个更好？

1. $(document).on 将事件委托document， $('#idname').on 将事件绑定到.className元素上。每次document有点击动作，浏览器都会判断当前点击的对象。如果匹配再决定要不要执行，多了个判断环节。JS渲染效率很高，所以此异同基本可以忽略。

2. $("className").on 为onclick绑定，只有在页面onload时执行一次。页面刷新后，新加载的具有className的元素便没有事件绑定到上面了。相反$(document).on这种方法会刷新和重新赋予绑定操作，所以一定程度上更为全面。

Q3: jquery绑定事件on()方法

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

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方法的作用的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jqueryon、jquery的on方法的作用的信息别忘了在本站进行查找喔。