Day51 前端基礎--jQuery 事件
一，jQuery常用事件
1.(keyup/keydown)鍵盤事件
批量操作
2.hover(不是原生DOM事件，是jQuery封裝的)
接收兩個匿名函式
$('').hover(function() {滑鼠移上去要做的事},function() {滑鼠移下去要做的事} )
3.input事件:
只要input框的發生變化就會觸發此事件
4.click點選事件
click(function(){...}) //一般用於監視點選事件 hover(function(){...}) //一般用於對使用者游標起反應 blur(function(){...}) //一般用於捕獲使用者輸入完成的輸入內容 focus(function(){...}) //獲得焦點時觸發 change(function(){...}) //一般用於監視表單狀態 keyup(function(){...}) //一般與keydown配合實現鍵盤事件的批量操作 keydown(function(){...})
input(function(){...}) //一般用於監視輸入框的輸入內容
二，jQuery繫結事件的方式
//1.jQ物件.事件(事件處理函式() {動作})
$(''").click(function() {})
//2.jQ物件.on(事件,事件處理函式() {動作})
注意：像click、keydown等DOM中定義的事件，我們都可以使用".on()"方法來繫結事件，但是"hover"這種jQuery中定義的事件就不能用".on()"方法來綁定了
補充：移除事件
//off()移除用on()繫結的事件 格式： jQ物件.off(事件,事件物件函式() {動作}) jQ物件.off(事件,[選擇器],事件物件函式() {動作})
$("").off('click',function() {...})
三，阻止後續事件執行
1.return false; //常見阻止表單提交
2.event.stopPropagation() //event代表事件本身
//例項：阻止預設事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止預設事件</title> </head> <body> <form action=""> <button id="b1">點我</button> </form> <script src="jquery-3.3.1.min.js"></script> <script> $("#b1").click(function (e) { alert(123); //return false; e.preventDefault(); }); </script> </body> </html>
三、事件冒泡
DOM中事件的特點：
父標籤的事件會被子標籤觸發
補充：阻止事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阻止事件冒泡</title> </head> <body> <div> <p> <span>點我</span> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> $("span").click(function (e) { alert("span"); e.stopPropagation(); }); $("p").click(function () { alert("p"); }); $("div").click(function () { alert("div"); }) </script> </body> </html>
四、事件委託：
基於一個已經存在的標籤給未來的標籤繫結事件
$('').on('click','選擇器',function() {})
注意：
若想使用事件委託的方式繫結非原生DOM（例如：hover）事件處理函式，可以參照如下程式碼分兩步繫結事件
$('ul').on('mouseenter','li',function() {//繫結滑鼠進入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave','li',function() {//繫結滑鼠劃出事件
$(this).removeClass('hover');
});
六、頁面載入完畢
1.window.onload = function() {}
1.存在的問題
1.會等到頁面上的文件、圖片、視訊等所有資源都載入完才會觸發
2.多次呼叫的化存在覆蓋宣告的問題
2.jQuery幫我們封裝的
1.$(document).ready(function() {...})
2.優勢:
1.只要文件載入完就會觸發
2.不存在覆蓋宣告的問題
3.簡寫
$(function() {繫結事件的操作...})
七、補充
1.動畫(瞭解即可)
2.each遍歷工具
1.$.each(便利的物件,function() {})
2.$('div').each(function() {})
3.data
任意jQuery物件都有data方法，可以儲存任意值，用來代替全域性變數
4.擴充套件
1.jQuery.extend()
2.jQuery.fn.extend()