<!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>jquery事件处理</title> <script src="jquery.min.js"></script> <style> div{ width: 100px; height: 100px; background: pink; } .current{ background: green; } </style> </head> <body> <div> </div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> $(function(){ // <!--1 事件处理:on 注册多个事件--> // $('div').on({ // mouseenter: function(){ // $(this).css('background',"blue"); // }, // mouseleave: function(){ // $(this).css('background',"red"); // }, // click: function(){ // $(this).css('background',"purple"); // }, // }); // 2 如果事件处理的是相同操作，可以如下，表示鼠标进入和鼠标离开都会触发函数 $("div").on("mouseenter mouseleave",function(){ $(this).toggleClass("current");//切换增加或者删除类名的操作 }); // 3 事件委派：将原本绑定在子元素上的事件绑定到父元素上 $("ul").on('click','li',function(){}) 事件绑定在父元素ul上，但触发事件的对象是ul下的子元素li // on 【可以给未来创建的元素绑定事件】 比如我先绑定ul元素，由li触发函数，后创建新的li元素，点击新的li元素仍然可以触发函数。即说明给未来创建的元素也绑定了事件 $("ul").on('click','li',function(){ alert('略略略略略'); }); $("ul").append($("<li>我是新创建的</li>")); // 解绑事件：off() 接触on绑定事件 $('ul').off("click",'li');//解绑委托事件 $('div').off();//接触div的所有on绑定事件 // one() 只能触发一次的事件 $('div').one('click',function(){}); // 自动触发事件 trigger() 比如轮播图自动播放，音乐自动播放，视频自动播放等 //1 element.事件() 2 element.trigger("事件") 3 element.triggerHandeler("事件")-----不会触发元素的默认行为，比如光标闪烁行为不会被触发 // jquery事件对象：element.on(events,[selector],function(event) {}) // 阻止默认行为：event.preventDefault() 或者return false // 阻止冒泡：event.stopPropagation() }) </script> </body> </html>
待补充