jQuery 的事件绑定
1. on()
事件绑定, 根据传递不同的参数做不同的事情
1-1. on(事件类型, 事件处理函数)
直接绑定事件, 有隐式迭代
//1-1. on(事件类型, 处理函数) $('ul > li').on('click', function () { console.log(this) })
复制代码
1-2. 元素结合.on(事件类型, 选择器, 事件处理函数)
事件委托的绑定
把选择器元素委托给元素集合里面的元素
注意: 选择器元素要是 元素集合 内元素的后代元素
// 1-2. on(事件类型, 选择器, 处理函数)// 给 li 做了一个事件委托, 委托给 ul 来做 $('ul').on('click', 'li', function () { console.log('我执行了')// this 就是你点击的那一个元素 console.log(this) })document.querySelector('ul').onclick = function (e) { if (e.target.nodeName === 'LI') { console.log('我执行了') console.log(this) } }
复制代码
1-3. 元素集合.on(事件类型, 复杂数据类型, 事件处理函数)
给元素集合内的所有元素绑定事件
这个复杂数据类型是事件触发的时候, 传递给事件里面的参数
在事件对象里面有一个叫做 data 的成员, 就是你传递进来的参数
// 1-3. on(事件类型, 复杂数据类型, 事件处理函数) $('li').on('click', { name: 'Jack' }, function (e) { console.log('我执行了') console.log(e) })
复制代码
1-4. 元素集合.on(事件类型, 选择器, 数据, 事件处理函数)
事件委托的形式, 带上传递参数
把选择器所属的事件, 委托给了元素集合内的事件
数据位置, 就是在事件触发的时候传递给事件处理函数的参数
// 1-4. on(事件类型, 选择器, 数据, 事件处理函数) $('ul').on('click', 'li', 'hello world', function (e) { console.log('我执行了') console.log(e) })
复制代码
1-5. 元素集合.on({ 事件类型 1: 事件处理函数, 事件类型 2: 事件处理函数, ... })
一次性给元素绑定多种事件
没法传递参数和事件委托了
// 1-5. on({ 多个事件 }) $('li').on({ click: function () { console.log('点击事件') }, mouseover: function () { console.log('移入事件') } })
复制代码
2. one()
用来绑定事件的方法
和 on() 方法的参数和使用形式一模一样
只不过绑定的事件只能执行一次
// 2. one() $('li').one('click', function () { console.log('我被点击了') })
$('ul').one('click', 'li', function () { console.log('我被点击了') }) $('li').one('click', { name: 'Jack' }, function (e) { console.log(e) }) $('ul').one('click', 'li', 'hello world', function (e) { console.log(e.data) }) // $('li').one({ click: function () { console.log('点击事件') }, mouseover: function () { console.log('移入事件') } })
复制代码
3. off()
用来解除事件绑定的
使用方法:
1. 元素集合.off(事件类型)
解除元素身上该事件类型的所有事件处理函数
2. 元素集合.off(事件类型, 事件处理函数)
解除元素身上该事件类型的某一个事件处理函数
// 3-1. off(事件类型)// 把 click 事件的所有事件处理函数全部解除 $('li').off('click')// 3-2. off(事件类型, 事件处理函数) 把 click 事件的 handlerA 事件处理函数解除 $('li').off('click', handlerA)
复制代码
4. trigger()
用 JS 代码的方式来触发事件
使用方法: 元素集合.trigger(事件类型)
$('li:first').trigger('click')
jQuery 的事件函数
jQuery 给我们提供了一些简洁的绑定事件的方式
把一些常用事件直接封装成了函数
click()
mouseover()
这些方法可以直接使用, 带有隐式迭代
快捷绑定事件
使用方法:
1. 元素集合.事件类型(事件处理函数)
2. 元素集合.事件类型(传入事件处理函数的参数, 事件处理函数)
// 1. 绑定点击事件 $('div').on('click', function () { console.log('点击事件触发') })// 使用事件函数 $('div').click({ name: 'Jack' }, function (e) { console.log('点击事件', e) }) $('div').click(function (e) { console.log('点击事件', e) })
复制代码
jquery 唯一的特殊事件
hover()
一个结合了移入移出的事件
使用方法: 元素集合.hover(移入的事件处理函数, 移出的事件处理函数)
如果你只传递一个参数, 那么移入移出都触发
// 2. 特殊事件 hover $('div').hover( function () { console.log('移入') }, function () { console.log('移出') } )
复制代码
评论