DOM事件 | 任先生的笔记库

# 页面事件

在原生 DOM 事件学习部分，我们知道可以结合浏览器事件onload等做一些事件类型内容小测试：

window.onload = function () {
  // ……
}

在 jQuery 中，页面事件ready()和它有相似的作用：

其中 $ 是 jQuery 对象的简写，$(document) 是把 dom 对象转换成 jQuery 对象。

$(document).ready(function () {
  // ……
})
// 简写成
$(function () {
  // ……
})

区别

1、功能上：
jQuery 中的页面事件ready()在 dom 元素加载完毕即可执行，而原生的浏览器事件onload需要等页面所有资源加装完成后执行（图片、视频、DOM 等等）。

2、使用上：
jQuery 中的页面事件更偏向于链式写法。

# 一、jQuery 事件

# 1、事件绑定 ✨

单个事件

// 原生
box.onclick = function () {
  // ……
}

// jQuery
$('#box').click(function () {
  // ……
})

绑定多个事件

// 1、原生
box.addEventListener('mouseover', function () {
  console.log('你进入了div')
})

box2.addEventListener('click', function () {
  console.log('你点击了div')
})

// 2、jQuery
// 方式一
$('#box')
  .on('mouseout', function () {
    console.log('你进入了div')
  })
  .on('click', function () {
    console.log('你点击了div')
  })

// 方式二
$('#box').on('mouseover click', function () {
  // ……
})

拓展

与 on 对应的还有 one。但 one 是一次性事件，而 on 每次点击都触发。

# 2、事件解绑

jQuery 事件也可以进行事件解绑，无论是 on 还是 one 都可以使用 off 进行解除。

// 解绑所有
off()

// 解绑指定的行为
$(document).off('mousemove')

// 3、解绑指定行为的指定处理函数
$('ul li').off('click')

# 3、事件委托 ✨

拓展

bind 方法与 on 方法不同的是，其最大的区别就是事件冒泡。

最直观的区别就是 on 绑定比 bind 绑定多一个参数'childSelector'，这样就导致 on 可以将子元素的事件委托给父元素进行处理

$(selector).on(event,childSelector,data,function)

$(selector).bind(event,data,function,map)

使用示例

要求：让所有的 li 元素添加 click 事件

<ul>
  <li>第一个子元素</li>
  <li>第二个子元素</li>
  <li>第三个子元素</li>
</ul>

<script>
  // 使用on方法
  $('ul').on('click', 'li', function () {
    console.log($(this).text())
  })

  // 使用bind方法
  $('ul li').bind('click', function () {
    console.log($(this).text())
  })
</script>

通过上面的小案例，我们发现 bind 会严重影响性能!

原因

用 on 绑定实际上是委托给了父级 ul,也就是只给一个元素绑定了事件
若用 bind，则是用选择器选择了 ul 下的所有 li 元素依次绑定了事件

并且我们还可以发现一个 on 绑定的优点（使用 append 追加一个 li 元素）：

$('ul').append('<li>第四个子元素<li>')；

结果

如果是 on 绑定则这个 li 也会有点击事件
如果是 bind 则没有

同时，我们也看到了，jQuery 事件还可以传参：

$('ul').on('click', { name: 'lencamo' }, function (e) {
  console.log(e.data.name)
})

# 4、事件方法

当然 jQuery 也封装了一些常用的方法函数，如 click()、mouseover()、mouseout()、blur()、change()等等

$('#box').mousemove(function (evt) {
  $(this).children('p').offset({
    left: evt.pageX,
    top: evt.pageY
  })
})

除此之外，jQuery 封装的这些方法还支持链式调用。

$('ul li')
  .click(function () {
    console.log('click')
  })
  .mouseover(function () {
    console.log('mouseover')
  })

当然，前面的事件传参在这里也是可以使用的。

# 拓展：事件触发

$('ul li').trigger('click')

简单的使用$()即可，并没有原生 js 的元素操作那么复杂。

# 二、jQuery 动画

在原生中 CSS3 中我们知道有关键帧、过渡等动画，在 jQuery 中，它也为我们封装了一些方法供我们使用：

回顾

toggle()方法在前面 jQuery 的 classList.toggle()中有使用过的，不过它是对 class 类名进行显示和隐藏。

下面的方法类似于操作 css 的 display 属性为 none 或者 block，只不过还附带的一些其他的特性：

# 1、显示与隐藏

show()、hide()、toggle()

左上<--->右下间的效果切换

// $('div').show(毫秒, 速度, 回调函数)

$('div').show(1000, linear, function () {
  console.log('显示盒子')
})

slideDown()、slideUp()、slideToggle()

上<--->下间的效果切换

// $('div').slideDown(毫秒, 速度, 回调函数)

$('div').slideDown(1000, linear, function () {
  console.log('显示盒子')
})

fadeIn()、fadeOut()、fadeToggle()

淡入<--->淡出的效果切换（类似于透明度 0<--->1 间）

此处除外，它还有一个fadeTo()用于指定要切换的透明度为多少

// $('div').fadeIn(毫秒, 速度, 回调函数)

$('div').fadeIn(1000, linear, function () {
  console.log('显示盒子')
})

// 使用fadeTo()方法时，要多一个参数
$('div').fadeTo(1000, 0.2, linear, function () {
  console.log('显示盒子')
})

# 2、综合动画

其实动画效果的实现是有一些限制条件的：没有过度的样式、颜色变化、transform 等是不支持的。

animate()

// $('#box').animate({ 样式 }, 毫秒, 回调函数);

$('#box').animate(
  {
    left: '100px',
    top: '100px'
  },
  1000,
  'linear',
  function () {
    console.log('完成动画效果')
  }
)

# 拓展

我们还可以通过 delay 方法延迟动画的开始时间：

$().delay(毫秒)

# 3、结束动画

-stop()方法可以让正在进行的动画停止（运动到哪，就停在哪）。与之相反的是 finish() 方法，它可以让正在进行的动画立即取消（立即回到完成状态，然后停在那里）。

通常情况下使用 stop()方法是为进行下一个动画做准备。

stop()

$('#box')
  .stop()
  .animate(
    {
      top: 400
    },
    1000,
    'linear',
    function () {
      console.log('完成')
    }
  )

# 拓展

其实，学到这里我们就可以试着自己写一些后面我们在组件库中直接使用的一些效果：

1、树形菜单（多级菜单、侧边栏）
2、手风琴效果 3、顶部导航栏滑动效果

$('ul li').click(function () {
  $(this).toggleClass('active').children('ol').slideToggle(500)

  // 设置只允许一个展开
  $(this).siblings().removeClass('active').children('ol').slideUp(500)

  // 阻止冒泡现象
  return false
})

$('ul li').mouseover(function () {
  $(this)
    .stop()
    .animate({
      width: 520
    })
    .siblings()
    .stop()
    .animate({
      width: 40
    })
})

$('ul').mouseout(function () {
  $('ul li').stop().animate({
    width: 160
  })
})

$('ul li').mouseover(function () {
  console.log($(this).index())

  $('ul div')
    .stop()
    .animate(
      {
        left: $(this).index() * 100
      },
      200
    )
})

← DOM操作 jQuery高级 →