8.jQuery事件
8.1 jQuery事件注册
<body> <div></div> <script> $(function() { // 1. 单个事件注册 $("div").click(function() { $(this).css("background", "purple"); }); $("div").mouseenter(function() { $(this).css("background", "skyblue"); }); }) </script> </body>
单个事件注册有时不方便，想要多个事件注册将这些单个事件注册连起来：
8.2 jQuery事件处理
1.事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：
1.events：一个或多个用空格分隔的事件类型，如“click”或“keydown”。
2.selector：元素的子元素选择器。
$(function() {
// on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
这些事件可以使用对象形式封装
on()方法优势1：可以绑定多个事件，多个处理事件处理程序
如果事件处理程序相同
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
//鼠标经过、离开触发function函数
on()方法优势2：可以事件委派操作。事件委派的定义是：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});//冒泡到父级ul触发click
on()方法优势3：创建动态的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
$("ol li").click( function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
//这种写法新增的li不会被绑定方法
用on()做绑定点击事件：
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
2.事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
如果有事件只想触发一次，one()，使用方法基本与on()一致。
1 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <style> 11 div { 12 width: 100px; 13 height: 100px; 14 background-color: pink; 15 } 16 </style> 17 <script src="jquery.min.js"></script> 18 <script> 19 $(function() { 20 $("div").on({ 21 click: function() { 22 console.log("我点击了"); 23 }, 24 mouseover: function() { 25 console.log(‘我鼠标经过了‘); 26 } 27 }); 28 $("ul").on("click", "li", function() { 29 alert(11); 30 }); 31 // 1. 事件解绑 off 32 // $("div").off(); // 这个是解除了div身上的所有事件 33 $("div").off("click"); // 这个是解除了div身上的点击事件 34 $("ul").off("click", "li");//解除事件委托 35 // 2. one() 但是它只能触发事件一次 36 $("p").one("click", function() { 37 alert(11); 38 }) 39 }) 40 </script> 41 </head> 42 43 <body> 44 <div></div> 45 <ul> 46 <li>我们都是好孩子</li> 47 <li>我们都是好孩子</li> 48 <li>我们都是好孩子</li> 49 </ul> 50 <p>我是屁</p> 51 </body> 52 53 </html>
3.自动触发事件trigger()
? 有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;
三种触发方式：
element.click()//第一种简写形式
element.trigger("type")//第二种自动触发模式
element.triggerHandler(type)//第三种自动触发模式
triggerHandler与前两者的最大不同：不会触发元素的默认行为，比如表单获取焦点光标闪烁
1 <body> 2 <div></div> 3 <input type="text"> 4 5 <script> 6 $(function() { 7 // 绑定事件 8 $("div").on("click", function() { 9 alert(11); 10 }); 11 12 // 自动触发事件 13 // 1. 元素.事件() 14 // $("div").click();会触发元素的默认行为 15 16 // 2. 元素.trigger("事件") 17 // $("div").trigger("click");会触发元素的默认行为 18 $("input").trigger("focus"); 19 20 // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为 21 $("input").on("focus", function() { 22 $(this).val("你好吗"); 23 }); 24 // 一个会获取焦点，一个不会 25 $("div").triggerHandler("click"); 26 // $("input").triggerHandler("focus"); 27 }); 28 </script> 29 </body>
8.3 jQuery事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event){})
function中的event就是事件对象。
组织默认行为：event.preventDefault()或者 return false
阻止冒泡：event.stopPropagation()
1 <body> 2 <div></div> 3 4 <script> 5 $(function() { 6 $(document).on("click", function() { 7 console.log("点击了document"); 8 }) 9 $("div").on("click", function(event) { 10 // console.log(event); 11 console.log("点击了div"); 12 event.stopPropagation(); 13 }) 14 }) 15 </script> 16 </body>