網站首頁 編程語言 正文
jQuery 事件注冊
- 事件注冊on
- 優勢1:多個事件綁定
on()方法可以在匹配元素上綁定一個或多個事件處理函數
語法:element.on(events,[selector],fn)
- events:一個或多個用空格分隔的事件類型 例如:click,keydown
- selector:元素的子元素選擇器
- fn:回調函數,綁定在元素身上的偵聽函數
1.單個事件注冊
$('div').click(function(){
$(this).css('background','pink');
})
$('div').mouseenter(function(){
$(this).css('background','purple');
})
----------------------------------------------------------
2.多個事件注冊 on
$('div').on({
mouseenter:function(){
$(this).css('background','purple')
},
click:function(){
$(this).css('background','pink')
}
})
>> 以'對象'的形式來書寫多個事件注冊
3.鼠標經過和離開都觸發這個函數
.current{background:'blue'};
$('div').on('mouseenter mouseleave',function(){
$(this).toggleClass('current');
})
優勢2:可以事件委派操作
$("ul").on("click", 'li', function() {
alert('11')
});
// click是綁定在ul身上,但是觸發對象是li
優勢3:動態的創建元素 on可以給動態生成的元素綁定事件
$('ol').on('click', 'li', function() {
alert('可以彈出');
})
var li = $("<li>我是后來創建的</li>");
$('ol').append(li);
事件處理
off( )解綁事件
off( )方法移除通過on( ) 方法添加的事件處理程序
$("p").off() // 解除p元素所有事件處理程序
$("p").off('click') // 解除p元素上面的點擊事件
$("ul").off('click','li') // 解除事件委托
有的事件只想觸發一次,可以使用one()來綁定事件
$("p").one('click', function() {
console.log(134);
})
>> p元素只在`第一次點擊的時候觸發`,之后`不再執行函數`
自動觸發事件 trigger( )
1. element.click(); // 第一種簡寫模式
>> $("div").click();
2. element.trigger('要觸發的事件'); // 第二種自動觸發方式
>> $("div").trigger('click')
3. elememnt.triggerHandler('type') // 第三種自動觸發方式 不會觸發元素的默認行為 (比如文本框光標閃爍)
>> $("div").triggerHandler('click')
事件對象:e event
語法:element.on(events,[selector],function(e || event){});
$("div").on('click',function(e){
console.log(e);
})
- 阻止默認行為:event.preventDefault( ) 或者 return false
- 阻止冒泡:event.stopPropagation( )
原文鏈接:https://blog.csdn.net/qq_60353088/article/details/125814925
相關推薦
- 2023-05-19 Flutter?枚舉值enum和int互相轉化總結_Android
- 2022-03-24 sublime?text3解決Gosublime無法自動補全代碼的問題_Golang
- 2022-06-08 SpringBoot jar包瘦身操作 -Dloader.path使用
- 2022-05-22 利用DOSBox運行匯編的詳細步驟_匯編語言
- 2022-11-05 Kotlin?Select協程多路復用的實現詳解_Android
- 2022-06-16 如何使用shell獲取進程名的內存以及CPU利用率_linux shell
- 2022-07-28 Redis基本數據類型Set常用操作命令_Redis
- 2022-07-19 react表單處理之 非受控組件
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支