技术交流QQ群:1027579432，欢迎你的加入！

欢迎关注我的微信公众号：CurryCoder的程序人生

1.jQuery事件注册

单个事件注册
  • 语法：
      element.事件(function(){})
  // 例如 
  $("div").click(function(){ // 事件处理程序 })
  • 其他事件与原生JS基本一致。例如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

2.jQuery事件处理

2.1 事件处理on()绑定事件

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

  • 语法：

      element.on(events, [selector,] fn)
    • events:一个或多个用空格分开的事件类型，如click、keydown等
    • selector:元素的子元素选择器。
    • fn:回调函数即绑定在元素身上的监听函数。

  • on()方法的优势1：可以绑定多个事件处理程序。

      $("div").on({
              mouseenter: function(){},
              click: function() {},
              mouseleave: function() {}
  });

  • 如果事件处理程序相同，可合并在一起书写：

      $("div").on("mouseover mouseout", function(){
      $(this).toggleClass("current");
  });

  • on()方法的优势2：可以实现事件委托操作。事件委托即把原来加给子元素身上的事件绑定到父元素身上，就是把事件委托给父元素。在此之前，有bind()、live()、delegate()等方法来处理事件绑定或事件委派，最新版本的请使用on代替它们。

      $("ul").on("click", "li", function(){
      alert(11);
  })  // click是绑定在ul身上，但是事件的触发者是ul的子元素li

  • on()方法的优势3：动态创建的元素，click没有办法绑定事件。on()可以给动态生成的元素绑定事件[重点]。

      <ol></ol>

  var li = $("<li>我是后来创建的小li</li>");
  $("ol").append(li);

  $("ol").on("click", "li", function(){
      alert(123);
  })
2.2 事件处理off()解绑事件

  • off()方法可以移除通过on()方法添加的事件处理程序。

      <div></div>
  <ul>
      <li>我们都是好孩子</li>
      <li>我们都是好孩子</li>
      <li>我们都是好孩子</li>
      <li>我们都是好孩子</li>
      <li>我们都是好孩子</li>
  </ul>

  $("div").off();  // 解除了div身上的所有事件处理程序
  $("div").off("click"); // 解除了div身上的点击事件

  $("ul").on("click", "li", function(){
      alert(11);
  })

  $("ul").off("click", "li");  // 解除事件委托

  • 如果有的事件只想触发一次，可以使用one()来绑定事件。

      // one()只能触发事件一次
  $("p").one("click", function(){
      alert(11);
  })
2.3 自动触发事件trigger()
  • 有些事件希望自动触发，比如轮播图自动播放功能与点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
  • 第一种简写形式：
      element.click()
  • 第二种自动触发模式：
      element.trigger("事件")
  • 第三种自动触发模式，不会触发元素的默认行为。
      element.triggerHandler("事件")
  $("input").on("focus", function(){
      $(this).val("你好吗");
  });
  // 不会触发元素的默认行为
  $("input").triggerHandler("focus");
  // 会触发元素的默认行为
  $("input").focus();
  // 会触发元素的默认行为
  $("input").trigger("focus");

3.jQuery事件对象event

  • 事件被触发，就会有事件对象的产生。
      element.on(events, [seletor,] function(event){})
    • 阻止默认行为:event.preventDefault()或return false；
    • 阻止冒泡:event.stopPropagation()

4.资料下载