網(wǎng)站首頁 編程語言 正文
jQuery 事件注冊
- 事件注冊on
- 優(yōu)勢1:多個事件綁定
on()方法可以在匹配元素上綁定一個或多個事件處理函數(shù)
語法:element.on(events,[selector],fn)
- events:一個或多個用空格分隔的事件類型 例如:click,keydown
- selector:元素的子元素選擇器
- fn:回調(diào)函數(shù),綁定在元素身上的偵聽函數(shù)
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.鼠標經(jīng)過和離開都觸發(fā)這個函數(shù)
.current{background:'blue'};
$('div').on('mouseenter mouseleave',function(){
$(this).toggleClass('current');
})
優(yōu)勢2:可以事件委派操作
$("ul").on("click", 'li', function() {
alert('11')
});
// click是綁定在ul身上,但是觸發(fā)對象是li
優(yōu)勢3:動態(tài)的創(chuàng)建元素 on可以給動態(tài)生成的元素綁定事件
$('ol').on('click', 'li', function() {
alert('可以彈出');
})
var li = $("<li>我是后來創(chuàng)建的</li>");
$('ol').append(li);
事件處理
off( )解綁事件
off( )方法移除通過on( ) 方法添加的事件處理程序
$("p").off() // 解除p元素所有事件處理程序
$("p").off('click') // 解除p元素上面的點擊事件
$("ul").off('click','li') // 解除事件委托
有的事件只想觸發(fā)一次,可以使用one()來綁定事件
$("p").one('click', function() {
console.log(134);
})
>> p元素只在`第一次點擊的時候觸發(fā)`,之后`不再執(zhí)行函數(shù)`
自動觸發(fā)事件 trigger( )
1. element.click(); // 第一種簡寫模式
>> $("div").click();
2. element.trigger('要觸發(fā)的事件'); // 第二種自動觸發(fā)方式
>> $("div").trigger('click')
3. elememnt.triggerHandler('type') // 第三種自動觸發(fā)方式 不會觸發(fā)元素的默認行為 (比如文本框光標閃爍)
>> $("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
相關(guān)推薦
- 2022-09-21 Android?Intent傳遞大量數(shù)據(jù)出現(xiàn)問題解決_Android
- 2022-04-18 詳解OpenGL?Shader抗鋸齒的實現(xiàn)_Android
- 2024-01-27 什么是消息隊列
- 2022-03-08 C++中的對象初始化操作代碼_C 語言
- 2023-03-26 CSS填充和寬高詳解_基礎(chǔ)教程
- 2022-07-11 Verilog中$display和$write任務(wù)以及格式化輸出
- 2022-05-13 C++ 使用ffmpeg實現(xiàn)rtsp取流
- 2023-07-09 echarts的series已經(jīng)為空但是還加載出數(shù)據(jù)
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細win安裝深度學習環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- 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被代理目標對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支