待補充 ...
<!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>
待補充
