jQuery事件
目标:
本文由“壹伴编辑器”提供技术支持
单个事件注册:
element.事件(function( ){ })
其他事件基本和原生一致,比如mouseover/mouseout/blur/focus...
事件处理 on()绑定事件
优势1:
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:
element.on(events, [selector], fn)
- events: 一个或多个用空格分割的事件类型,如"click"或"keydown"
- selector: 元素的子元素选择器
- fn: 回调函数,即绑定在元素身上的侦听函数
这样就可以同时绑定很多个事件了 :-)
如果想要给两个元素对象都绑定同一件事件(前面的是一个对象绑定不同的事件),那我们就可以用下面的方法:
element.on("事件1 事件2", function() {xxx})
on()方法优势2:
可以事件委派操作. 事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素
就算点击每个li元素也会弹出警示框
on()方法优势3:
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
这是旧的方法,我们动态创建了新的元素在下面
可见动态创建的不能绑定事件
这是新的方法:
现在我们做一个简单的案例,之前也做过类似的(留言案例),发布微博案例:
本文由“壹伴编辑器”提供技术支持
事件处理 off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
如果有的事件只想触发一次,可以使用one()来绑定事件
本文由“壹伴编辑器”提供技术支持
自动触发事件 trigger()
有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致.可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发.
第一种简写形式: element.事件( )
第二种自动触发模式: element.trigger("type")
第三种:element.triggerHandler(type)
只要一刷新页面就会自动触发
那这三种有什么区别呢?
element.triggerHandler()方法可以不触发元素的默认行为
用旧的方法会有默认事件(光标闪烁)
第三种方法:
jQuery事件对象
事件被触发,就会有事件对象的产生
element.on(events, [selector], function(event){ xxx })
将event打印出来看看:
jQuery的其他方法
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法
语法:
$.extend([deep], target, object1, [objectN])
- deep: 如果设为true为深拷贝,默认false为浅拷贝
- target: 要拷贝的目标对象(拷贝到...)
- object1: 待拷贝到对一个对象的对象(被拷贝)
- 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
- 深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象.如果里面有不冲突的属性,会合并在一起.
就是将object的对象拷贝到target里去
(注意: 这个方法会覆盖target原来的数据)
解释一下浅拷贝的地方:
解析深拷贝:
本文由“壹伴编辑器”提供技术支持
jQuery多库共存
jQuery插件
图片懒加载
