重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
$(function () {
目前创新互联公司已为上千余家的企业提供了网站建设、域名、网络空间、绵阳服务器托管、企业网站设计、远安网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
var arrA = $("a").click(function () {
$.scrollTo('li:eq(' + arrA.index(this) + ')', 1000, {
offset: {
top: -5,
left: -100
}
});
});
});
jQuery中用on来绑定事件,常用写法
两种写法哪个更好?
1. $(document).on 将事件委托document, $('#idname').on 将事件绑定到.className元素上。每次document有点击动作,浏览器都会判断当前点击的对象。如果匹配再决定要不要执行,多了个判断环节。JS渲染效率很高,所以此异同基本可以忽略。
2. $("className").on 为onclick绑定,只有在页面onload时执行一次。页面刷新后,新加载的具有className的元素便没有事件绑定到上面了。相反$(document).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()写法
貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。
多个事件绑定同一个函数
$("button").on("mouseover mouseout",function(){
//dosomething
});
多个事件绑定不同函数
$("button").on({
mouseover:function(){ //dosomething },
mouseout:function(){ //dosomething },
click:function(){ //dosomething }
});
.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。
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)