一轨功、jQuery 事件注冊
單個事件注冊
語法:element.事件(function(){})
$("div").click(function(){ 事件處理程序 })
其他事件和原生基本一致澈灼。
比如mouseover满钟、mouseout、blur、focus、change醋虏、keydown、keyup哮翘、resize颈嚼、scroll 等
二、jQuery 事件處理
1. 事件處理 on() 綁定事件
on() 方法在匹配元素上綁定一個或多個事件的事件處理函數(shù)
語法:
element.on(events,[selector],fn)
- events:一個或多個用空格分隔的事件類型饭寺,如"click"或"keydown" 阻课。
- selector: 元素的子元素選擇器 。
- fn:回調(diào)函數(shù) 即綁定在元素身上的偵聽函數(shù)佩研。
on() 方法優(yōu)勢1:
可以綁定多個事件柑肴,多個處理事件處理程序。
$("div").on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件處理程序相同
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("current");
});
on() 方法優(yōu)勢2:
可以事件委派操作旬薯。事件委派的定義就是晰骑,把原來加給子元素身上的事件綁定在父元素身上,就是把事件委派給父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live(), delegate()等方法來處理事件綁定或者事件委派硕舆,最新版本的請用on替代他們秽荞。
on() 方法優(yōu)勢3:
動態(tài)創(chuàng)建的元素,click() 沒有辦法綁定事件抚官, on() 可以給動態(tài)生成的元素綁定事件
$("div").on("click","p", function(){
alert("俺可以給動態(tài)生成的元素綁定事件")
});
$("div").append($("<p>我是動態(tài)創(chuàng)建的p</p>"));
2. 事件處理 off() 解綁事件
off() 方法可以移除通過 on() 方法添加的事件處理程序扬跋。
$("p").off(); // 解綁p元素所有事件處理程序
$("p").off( "click", foo); // 解綁p元素上面的點(diǎn)擊事件 后面的 foo 是偵聽函數(shù)名
$("ul").off("click", "li"); // 解綁事件委托
如果有的事件只想觸發(fā)一次, 可以使用 one() 來綁定事件凌节。
3. 自動觸發(fā)事件 trigger()
有些事件希望自動觸發(fā), 比如輪播圖自動播放功能跟點(diǎn)擊右側(cè)按鈕一致钦听。可以利用定時器自動觸發(fā)右側(cè)按鈕點(diǎn)擊事件倍奢,不必鼠標(biāo)點(diǎn)擊觸發(fā)朴上。
element.click(); // 第一種簡寫形式
element.trigger("type"); // 第二種自動觸發(fā)模式
$("p").on("click", function () {
alert("hi~");
});
$("p").trigger("click"); // 此時自動觸發(fā)點(diǎn)擊事件,不需要鼠標(biāo)點(diǎn)擊
element.triggerHandler("type"); // 第三種自動觸發(fā)模式
triggerHandler模式不會觸發(fā)元素的默認(rèn)行為卒煞,這是和前面兩種的區(qū)別痪宰。
比如文本框獲得焦點(diǎn)就會光標(biāo)閃爍。
三畔裕、jQuery 事件對象
事件被觸發(fā)衣撬,就會有事件對象的產(chǎn)生。
element.on(events,[selector],function(event){})
阻止默認(rèn)行為:event.preventDefault()
或者 return false
阻止冒泡: event.stopPropagation()