jQuery(五)_事件

jQuery(五)_事件

• 添加删除事件

  div {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
  }
  

  $("div").on("click",function(){
      console.log("aa");
      $("div").off("click",argument.callee)
  }
  

  $("div").on("click", clickHandler);
  function clickHandler(e) {
      console.log("aa");
      $(this).off("click", clickHandler);
  }
  

• 事件命名空间

  为div添加两个事件，点击后，删除第一个事件

  $("div").on("click.a", clickHandler);
  function clickHandler(e) {
      console.log("aa");
      $(this).off("click.a");
  }
  $("div").on("click.b",function(){
      console.log("bb")
  })
  

• 事件传参

  data() 方法向被选元素附加数据，或者从被选元素获取数据。

  class Box {
      constructor() {
          this.init();
      }
      init() {
          var obj = { a: 1, b: 2 };
          $("div").data("obj",obj);
          $("div").on("click", this.clickHandler);
      }
      clickHandler(e) {
          console.log($(this).data("obj"));
      }
  }
  

  class Box {
      constructor() {
          this.init();
      }
      init() {
          var obj = { a: 1, b: 2 };
          $("div").on("click", { obj: obj, self: this }, this.clickHandler);
      }
      clickHandler(e) {
          var self = e.data.self;//外面的this
      }
  }
  

• trigger

  var div = $("div");
  //侦听传参使用e.data
  $("div").on("chilema", { c: 1, d: 2 }, function (e, a) {
      console.log(e.data, a);
  });
  //抛发传参使用函数事件中第二个参数后面
  $("div").trigger("chilema", { a: 1, b: 2 });
  

• 阻止事件冒泡和默认事件

  $("div").on("click", function (e) {
      // e.stopPropagation();//阻止冒泡
      // e.preventDefault();//阻止默认事件
      // e.stopImmediatePropagation();
      console.log(e);
  })
  

• ready()

  当DOM和CSS渲染完毕，图片还未加载时触发事件，可以被触发多次

• onload()

  当window加载完毕触发事件，且只能被触发一次

• hover

  $("div").hover(function () {
      console.log("鼠标经过");
  }, function () {
      console.log("鼠标离开");
  })
  

• one

  //执行一次后立即删除
  $("div").one("click", function () {
      console.log("aaa");
  })