正心全栈编程-文档站

Appearance

jQuery 事件注册 ​

mdn 界面上的事件：https://www.w3.org/TR/DOM-Level-3-Events

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

  • 优点: 操作简单，且不用担心事件覆盖等问题。
  • 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法

JavaScript
element.事件(function () {
})

$("div").click(function () {
    // 事件处理程序
})

其他事件和原生基本一致

比如 mouseover、mouseout、 blur、 focus、change、 keydown、 keyup、resize、scroll 等

演示代码

html
<div style="width: 200px;height: 200px;background-color: cyan;"></div>
javascript
$(function () {
  // 1. 单个事件注册
  $("div").click(function () {
    $(this).css("background", "purple");
  });
  $("div").mouseenter(function () {
    $(this).css("background", "skyblue");
  });
});

jQuery 事件处理

因为普通注册事件方法的不足，jQuery 又开发了多个处理方法，重点讲解如下：

  • on(): 用于事件绑定，目前最好用的事件绑定方法
  • off(): 事件解绑
  • trigger() / triggerHandler(): 事件触发

on() 绑定事件 ​

因为普通注册事件方法的不足，jQuery 又创建了多个新的事件绑定方法 bind() / live() / delegate() / on() 等，其中最好用的是: on()

绑定多个事件 ​

可以绑定多个事件，多个处理事件处理

javascript
$("div").on({
  mouseover: function () {},
  mouseout: function () {},
  click: function () {},
});

如果事件处理程序相同

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

事件委派 ​

可以事件委派操作。事件委派定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

javascript
$("ul").on("click", "li", function () {
  console.log("hello world!");
});

在此之前有 bind(), live(), delegate() 等方法来处理事件绑定或者事件委派，最新版本的请用 on 替代他们。

动态绑定事件

动态创建的元素，click() 没有办法绑定事件。on() 可以给动态生成的元素绑定事件

javascript
$("div").on("click", "p", function () {
  console.log("俺可以给动态生成的元素绑定事件");
});
javascript
$("div").append($("<p>我是动态创建的p</p>"));

演示代码

html
<ul>
  <li>橘子</li>
  <li>西瓜</li>
  <li>哈密瓜</li>
</ul>
javascript
$(function () {
  // (1) on可以绑定1个或者多个事件处理程序
  // $("div").on({
  //     mouseenter: function() {
  //         $(this).css("background", "skyblue");
  //     },
  //     click: function() {
  //         $(this).css("background", "purple");
  //     }
  // });
  $("div").on("mouseenter mouseleave", function () {
    $(this).toggleClass("current");
  });

  // (2) on 可以实现事件委托（委派）
  // click 是绑定在 ul 身上的，但是 触发的对象是 ul 里面的小 li
  // $("ul li").click();
  $("ul").on("click", "li", function () {
    console.log($(this).text(), "被点击了");
  });

  // (3) on 可以给未来动态创建的元素绑定事件
  $("ol").on("click", "li", function () {
    console.log($(this).text(), "被点击了");
  });
  var li = $("<li>我是后来创建的</li>");
  $("ol").append(li);
});

案例2：事件委派

html
<ul>
  <li>li 1</li>
  <li>li 2</li>
  <li>li 3</li>
  <li>li 4</li>
  <li>li 5</li>
</ul>
javascript
$(function () {
  /*****************事件委派*************************/
  $("ul li").click(function () {
    console.log("普通绑定:\t", $(this).text());
  });

  // (2) on可以实现事件委托（委派）
  $("ul").on("click", "li", function () {
    console.log("事件委托:\t", $(this).text());
  });

  // 直接添加的元素，没有事件
  var li = $("<li>我是后来创建的</li>");
  $("ul").append(li);

  /********ol*********/
  // click 是绑定在 ul 身上的，但是 触发的对象是 ul 里面的小li
  // (3) on可以给未来动态创建的元素绑定事件
  $("ol li").click(function () {
    console.log("ol 普通绑定：\t", $(this).text());
  });

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

  // 事件委托之后才会打印
  $("ol").on("click", "li", function () {
    console.log("ol 事件委托：\t", $(this).text());
  });
});

off() 解绑事件 ​

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;

语法

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

javascript
$("p").off(); // 解绑 p 元素所有事件处理程序
$("p").off("click"); // 解绑 p 元素上面的点击事件后面的 foo 是监听函数名
$("ul").off("click", "li"); // 解绑事件委托

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

演示代码

html
<ul>
  <li>橘子</li>
  <li>西瓜</li>
  <li>哈密瓜</li>
</ul>
javascript
$(function () {
  // 事件绑定
  $("div").on({
    click: function () {
      console.log("我点击了");
    },
    mouseover: function () {
      console.log("我鼠标经过了");
    },
  });

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

  // 1. 事件解绑 off
  // $("div").off();  // 这个是解除了 div 身上的所有事件
  $("div").off("click"); // 这个是解除了 div 身上的点击事件
  $("ul").off("click", "li");

  // 2. one() 但是它只能触发事件一次
  $("p").one("click", function () {
    alert(11);
  });
});

jQuery 事件对象 ​

jQuery 对 DOM 中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

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

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

阻止冒泡: event.stopPropagation()

演示代码

html
<body>
  <div style="width: 200px;height: 200px;background-color: cyan;"></div>
</body>
javascript
$(function () {
  $(document).on("click", function () {
    console.log("点击了document");
  });
  $("div").on("click", function (event) {
    // console.log(event);
    console.log("点击了div");
    event.stopPropagation();
  });
});

注意：jQuery 中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。