網(wǎng)站首頁 編程語言 正文
事件
頁面載入?
1.ready(fn)
當(dāng)DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)
$(document).ready(function(){ // 在這里寫你的代碼... }); // 下面是簡寫 $(function($) { // 你可以在這里繼續(xù)使用$作為別名... });
2.事件處理?on(events,fn)
在選擇元素上綁定一個或多個事件的事件處理函數(shù)
// 給p標(biāo)簽添加點擊事件監(jiān)聽 $("p").on("click", function(){ alert( $(this).text() ); }); // 第二種寫法 等效于上面 $("p").click(function(){ alert( $(this).text() ); });
3.off(events,[fn])
在選擇元素上移除一個或多個事件的事件處理函數(shù)
// 移除p標(biāo)簽綁定的所有事件監(jiān)聽 $("p").off() // 移除p標(biāo)簽綁定的click事件監(jiān)聽 $("p").off( "click")
4.bind(events,fn)
為每個匹配元素的特定事件綁定事件處理函數(shù)
// 移除p標(biāo)簽綁定的所有事件監(jiān)聽 $("p").bind("click", function(){ alert( $(this).text() ); }); // 同時綁定多個事件類型 $('#foo').bind('mouseenter mouseleave', function() { alert(); });
5.unbind(type,fn]])bind()
的反向操作,從每一個匹配的元素中刪除綁定的事件
// 把所有段落的所有事件取消綁定 $("p").unbind() // 將段落的click事件取消綁定 $("p").unbind( "click" )
6.one(type,[data],fn)
為每一個匹配元素的特定事件(像click)綁定一個一次性的事件處理函數(shù)
// 當(dāng)所有段落被第一次點擊的時候,顯示所有其文本 $("p").one("click", function(){ alert( $(this).text() ); });
事件委派?
1.delegate(selector,[type],[data],fn)
指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序,并規(guī)定當(dāng)這些事件發(fā)生時運行的函數(shù)
<div style="background-color:red"> <p>這是一個段落。</p> <button>請點擊這里</button> </div>
// 當(dāng)點擊button時,隱藏或顯示 p 元素 $("div").delegate("button", "click", function () { $("p").slideToggle(); });
2.undelegate([selector,[type],fn])
刪除由 delegate() 方法添加的一個或多個事件處理程序
// 從p元素刪除由 delegate() 方法添加的所有事件處理器 $("p").undelegate(); // 從p元素刪除由 delegate() 方法添加的所有click事件處理器 $("p").undelegate( "click" )
事件切換?
1.hover([over,]out)
一個模仿懸停事件(鼠標(biāo)移動到一個對象上面及移出這個對象)的方法
over
:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)
out
:鼠標(biāo)移出元素要觸發(fā)的函數(shù)
// 鼠標(biāo)懸停的表格加上特定的類 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
事件?
1.blur([[data],fn])
當(dāng)元素失去焦點時觸發(fā) blur 事件
// 鼠標(biāo)懸停的表格加上特定的類 $("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
2.change([[data],fn])
當(dāng)元素的值發(fā)生改變時,會發(fā)生 change 事件
// 觸發(fā)被選元素的 change 事件 $(selector).change();
3.click([[data],fn])
觸發(fā)每一個匹配元素的click事件
// 觸發(fā)頁面內(nèi)所有段落的點擊事件 $("p").click();
4.dblclick([[data],fn])
當(dāng)雙擊元素時,會發(fā)生 dblclick 事件
// 給頁面上每個段落的雙擊事件綁上 "Hello World!" 警告框 $("p").dblclick( function () { alert("Hello World!"); });
5.error([[data],fn])
當(dāng)元素遇到錯誤(沒有正確載入)時,發(fā)生 error 事件
// 在服務(wù)器端記錄JavaScript錯誤日志: $(window).error(function(msg, url, line){ jQuery.post("js_error_log.php", { msg: msg, url: url, line: line }); });
6.focus([[data],fn])
當(dāng)元素獲得焦點時,觸發(fā) focus 事件
// 當(dāng)頁面加載后將 id 為 'login' 的元素設(shè)置焦點: $(document).ready(function(){ $("#login").focus(); });
7.focusin([data],fn)
當(dāng)元素獲得焦點時,觸發(fā) focusin 事件
<p><input type="text" /> <span>focusout fire</span></p> <p><input type="password" /> <span>focusout fire</span></p>
// 獲得焦點后會觸發(fā)動畫 $("p").focusin(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
8.focusout([data],fn)
當(dāng)元素失去焦點時觸發(fā) focusout 事件
// 獲得焦點后會觸發(fā)動畫 $("p").focusout(function() { $(this).find("span").css('display','inline').fadeOut(1000); });
9.keydown([[data],fn])
當(dāng)鍵盤或按鈕被按下時,發(fā)生 keydown 事件
// 在頁面內(nèi)對鍵盤按鍵做出回應(yīng),可以使用如下代碼 $(window).keydown(function(event){ switch(event.keyCode) { // ... // 不同的按鍵可以做不同的事情 // 不同的瀏覽器的keycode不同 // 更多詳細信息: http://unixpapa.com/js/key.html // ... } });
10.keypress([[data],fn])
當(dāng)鍵盤或按鈕被按下時,發(fā)生 keypress 事件
// 計算在輸入域中的按鍵次數(shù) $("input").keydown(function(){ $("span").text(i+=1); });
11.keyup([[data],fn])
當(dāng)按鈕被松開時,發(fā)生 keyup 事件。它發(fā)生在當(dāng)前獲得焦點的元素上
// 當(dāng)按下按鍵時,改變文本域的顏色 $("input").keyup(function(){ $("input").css("background-color","#D6D6FF"); });
12.mousedown([[data],fn])
當(dāng)鼠標(biāo)指針移動到元素上方,并按下鼠標(biāo)按鍵時,會發(fā)生 mousedown 事件
// 當(dāng)按下鼠標(biāo)按鈕時,隱藏或顯示元素 $("button").mousedown(function(){ $("p").slideToggle(); });
13.mouseenter([[data],fn])
當(dāng)鼠標(biāo)指針穿過元素時,會發(fā)生 mouseenter 事件
// 當(dāng)鼠標(biāo)指針進入(穿過)元素時,改變元素的背景色 $("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
14.mouseleave([[data],fn])
當(dāng)鼠標(biāo)指針離開元素時,會發(fā)生 mouseleave 事件
// 當(dāng)鼠標(biāo)指針離開元素時,改變元素的背景色$("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4");});// 當(dāng)鼠標(biāo)指針離開元素時,改變元素的背景色 $("p").mouseleave(function(){ $("p").css("background-color","#E9E9E4"); });
15.mousemove([[data],fn])
當(dāng)鼠標(biāo)指針在指定的元素中移動時,就會發(fā)生 mousemove 事件
事件坐標(biāo)
-
event.clientX, event.clientY
相對于視口的左上角 -
event.pageX,event.pageY
?相對于頁面的左上角 -
event.offsetX,event.offsetY
?相對于事件元素的左上角
// 獲得鼠標(biāo)指針在頁面中的位置 $(document).mousemove(function(e){ $("span").text(e.pageX + ", " + e.pageY); });
16.mouseout([[data],fn])
當(dāng)鼠標(biāo)指針從元素上移開時,發(fā)生 mouseout 事件
// 當(dāng)鼠標(biāo)從元素上移開時,改變元素的背景色: $("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
17.mouseover([[data],fn])
當(dāng)鼠標(biāo)指針位于元素上方時,會發(fā)生 mouseover 事件
// 當(dāng)鼠標(biāo)指針位于元素上方時時,改變元素的背景色 $("p").mouseover(function(){ $("p").css("background-color","yellow"); });
18.mouseup([[data],fn])
當(dāng)在元素上放松鼠標(biāo)按鈕時,會發(fā)生 mouseup 事件
// 當(dāng)松開鼠標(biāo)按鈕時,隱藏或顯示元素 $("button").mouseup(function(){ $("p").slideToggle(); });
19.resize([[data],fn])
當(dāng)調(diào)整瀏覽器窗口的大小時,發(fā)生 resize 事件
// 改變頁面窗口的大小時彈出警告窗 $(window).resize(function(){ alert("Stop it!"); });
20.scroll([[data],fn])
當(dāng)用戶滾動指定的元素時,會發(fā)生 scroll 事件
// 當(dāng)頁面滾動條變化時,執(zhí)行的函數(shù): $(window).scroll( function() { alert("Stop it!"); });
21.select([[data],fn])
當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時,會發(fā)生 select 事件
// 觸發(fā)所有input元素的select事件: $("input").select();
22.submit([[data],fn])
當(dāng)提交表單時,會發(fā)生 submit 事件
// 提交本頁的第一個表單: $("form:first").submit(); // 阻止表單提交: $("form").submit( function () { return false; } );
23.unload([[data],fn])
在當(dāng)用戶離開頁面時,會發(fā)生 unload 事件
點擊某個離開頁面的鏈接
在地址欄中鍵入了新的 URL
使用前進或后退按鈕
關(guān)閉瀏覽器
重新加載頁面
// 頁面卸載的時候彈出一個警告框: $(window).unload( function () { alert("Bye now!"); } );
總結(jié)
原文鏈接:https://blog.csdn.net/weixin_45660621/article/details/122281863
相關(guān)推薦
- 2023-01-12 React?useCallback鉤子的作用方法demo_React
- 2024-04-06 linux環(huán)境docker安裝redis(AOF和RDB持久化)
- 2022-10-18 QT中QDataStream二進制數(shù)據(jù)讀寫的實現(xiàn)_C 語言
- 2022-03-26 c語言實現(xiàn)可自定義的游戲地圖_C 語言
- 2022-11-04 SQL?Server還原完整備份和差異備份的操作過程_MsSql
- 2023-02-09 Rust?所有權(quán)機制原理深入剖析_Rust語言
- 2023-04-26 C語言函數(shù)聲明以及函數(shù)原型超詳細講解示例_C 語言
- 2022-06-20 C語言簡明講解隊列的實現(xiàn)方法_C 語言
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支