jQuery笔记(4)

jQuery事件

目标:

本文由“壹伴编辑器”提供技术支持

单个事件注册:

element.事件(function( ){ })

其他事件基本和原生一致,比如mouseover/mouseout/blur/focus...

事件处理 on()绑定事件

优势1:

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法:

element.on(events, [selector], fn)

1. events: 一个或多个用空格分割的事件类型,如"click"或"keydown"
2. selector: 元素的子元素选择器
3. 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])

1. deep: 如果设为true为深拷贝,默认false为浅拷贝
2. target: 要拷贝的目标对象(拷贝到...)
3. object1: 待拷贝到对一个对象的对象(被拷贝)
4. 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
5. 深拷贝,前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象.如果里面有不冲突的属性,会合并在一起.

就是将object的对象拷贝到target里去

(注意: 这个方法会覆盖target原来的数据)

解释一下浅拷贝的地方:

解析深拷贝:

本文由“壹伴编辑器”提供技术支持

jQuery多库共存

jQuery插件

图片懒加载