三、jQuery事件

目录

jQuery事件注册

jQuery事件处理

事件处理 on() 绑定事件

事件处理off()解绑事件

自动触发事件

jQuery事件对象

---

jQuery事件注册

单个事件注册

  $('div').click(function(){})

jQuery事件处理

事件处理 on() 绑定事件

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

  //语法：element.on(events,[selector],fn)
  1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
  2. selector: 元素的子元素选择器 。
  3. fn:回调函数 即绑定在元素身上的侦听函数。 
  $(function () {
              //  1、单个事件
              /* $('div').click(function () {
                  $(this).css('backgroundColor', 'blue')
              }) */
  ​
              //  2、事件处理on()
              /* $('div').on({
                  click: function () {
                      $(this).css('backgroundColor', 'blue')
                  },
                  mouseenter: function () {
                      $(this).css('backgroundColor', 'red')
                  },
                  mouseleave: function () {
                      $(this).css('backgroundColor', 'skyblue')
                  }
              }) */
              // 绑定多个不同操作对应的事件
              $("div").on("mouseenter mouseleave", function () {
                  $(this).toggleClass("current")
              })
              // 不同事件相同操作
              
              // 3、事件委托
              $('ul').on('click', 'li', function () {
                  alert(11)
              })
              // 给父元素ul绑定事件，但触发对象是子元素li
  ​
              // 4、可以给未来动态创建的元素绑定事件
              $('ol').on('click', 'li', function () {
                  alert(11)
              })
              var li = $('<li>123123</li>')
              $('ol').append(li)
          })

事件处理off()解绑事件

  <script>
          $(function () {
              $('div').on({
                  click: function () {
                      console.log('点击事件')
                  },
                  mouseenter: function () {
                      console.log('鼠标经过事件')
                  }
              })
              $('ul').on('click', 'li', function () {
                  alert(11)
              })
  ​
              // $('div').off()
              // 解绑div中的所有事件
              $('div').off('mouseenter')
              // 写上参数表示解除该事件
              $('ul').off('click', 'li')
              // 解除事件委托
  ​
              $('p').one('click', function () {
                  alert(22)
              })
              // one()事件表示该事件仅执行一次
          })
      </script>

自动触发事件

   $(function () {
              $('div').on('click', function () {
                  alert(11)
              })
              // 自动触发事件
              // 1、元素.事件
              // $('div').click()
              // 2、trigger('事件')
              // $('div').trigger('click')
              // 3、triggerHandler('事件')    与前两者的区别是不会触发元素的默认事件
              $('div').triggerHandler('click')
          })

jQuery事件对象

事件被触发，就会有事件对象的产生。

  element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()