简单方式注册事件

·语法：jQuery对象.事件名（事件处理程序）；

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> </head> <body> <input type=“button” value=“按钮”> <script src=“js/jquery-1.12.4.js”></script> <script> // 简单注册事件的方式 // $(“input”).click(function () { // alert(1) // }) // 使用 on 方法注册简单事件 // on() 方法的封装的底层实际是 addEventListener() $(“input”).on(“click”,function () { alert(2) }) $(“input”).on(“click”,function () { alert(3) }) </script> </body> </html>

on 方法注册事件

·注册简单事件语法：jQuery对象.on（’事件名’，事件处理程序）；

·事件委托的实现：jQuery对象.on（’事件名’，’选择器’，事件处理程序）；

选择器：子孙元素

注意：在事件处理程序中，this代表的是子孙元素（所点最先触发的）

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title> </head> <body> <ul> <li>刘备</li> <li>诸葛亮</li> <li>关羽</li> <li>张飞</li> </ul> <script src=“js/jquery-1.12.4.js”></script> <script> // 原生 DOM 中如何实现事件委托 // var ul = document.getElementsByTagName(“ul”)[0]; // ul.onclick = function (e) { // e.target.style.background = “pink”; // }; // jQuery 中的事件委托 // on() 方法传递三个参数 // 参数1： 事件类型 // 参数2： 进行委托的子元素的选择器 // 参数3： 事件处理程序 $(“ul”).on(“click”, “li”, function () { // 在事件委托过程中，事件函数的内部 this 不是指向事件源，而是指向触发事件的 委托子元素 alert($(this).text()) }) </script> </body> </html>