菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 彭婉嘉-20230526 [打印本页]

作者: 鱼小仙 时间: 2023-6-14 18:46
标题: 彭婉嘉-20230526
一、学习内容

使用on()进行事件的绑定
绑定单一事件
$('.box').on('mouseover', function () {
console.log('over')
})
绑定多个事件
$('.box').on({
mouseover: function () {
console.log('over')
  },
mouseout: function () {
console.log('out')
  },
click: function () {
console.log('click')
}
})

事件委托
优势:动态追加的元素也会有绑定的事件
$(function () {
$('ul').on('click', 'li', function () {
  console.log('事件委托')
  console.log($(this))
  console.log($(this).text())
})
$('button').on('click', function () {
const li = $('<li>我是追加的下雨天~~~</li>')
$('ul').append(li)
  })
})

$(function () {
  事件的绑定
$('.bd').on({
  click: function () {
  console.log('click')
  },
dblclick: function () {
console.log('dbl')
   }
})
  })
解绑
$('.jc').on('click', function () {
   解除单一事件
$('.bd').off('click')
   解除全部事件
$('.bd').off()
})

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)