<!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>
待補充
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34134.html
標籤：jQuery
上一篇：jQuery 原始碼分析(十五) 資料操作模塊 val詳解
下一篇：layUI