這篇文章主要介紹了jQuery中on()方法用法,實例分析了on()方法的功能、定義及在匹配元素上綁定一個或者多個事件處理函數的使用技巧,需要的朋友可以參考下
本文實例講述了jQuery中on()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以在匹配元素上綁定一個或者多個事件處理函數。
使用off()方法可以刪除on()方法綁定的事件。
語法結構一:
$(selector).on(events,[selector],[data],fn)
參數列表:
| 參數 | 描述 |
| events | 一個或多個用空格分隔的事件類型和可選的命名空間。 |
| selector | 可選。一個選擇器字符串，用以過濾選定的元素，該選擇器的後裔元素將調用處理程序。 如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。 |
| data | 可選。作爲event.data屬性值傳遞給事件對象的額外數據對象以供事件處理函數處理。 |
| fn | 該事件被觸發時執行的函數。 false值也可以做一個函數的簡寫，返回false。 |
實例代碼:
實例一:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>腳本之家</title> <style type="text/css"> div{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").on("click",function(){ $(this).text("腳本之家歡迎您"); }) }) </script> </head> <body> <div>原來內容</div> </body> </html>
以上代碼爲div綁定一個click事件，點擊div時候能夠爲div設置新的文本內容。
實例二:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>腳本之家</title> <style type="text/css"> div{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").on("click mousemove",function(){ $(this).text("腳本之家歡迎您"); }) }) </script> </head> <body> <div>原來內容</div> </body> </html>
以上代碼爲div綁定了兩個事件，無論是點擊div還是在div中移動鼠標都會爲div設置新的文本內容。
實例三:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>腳本之家</title> <style type="text/css"> div{ width:60px; height:60px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="這是新文本" $("div").on("click",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) </script> </head> <body> <div>原來內容</div> </body> </html>
以上代碼利用data參數爲綁定的事件處理函數傳遞數據。
實例四:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>腳本之家</title> <style type="text/css"> .parent{ width:160px; height:160px; border:1px solid green; font-size:12px; } .children{ width:100px; height:100px; border:1px solid red; } span{background-color:green;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="這是新文本" $(".parent").on("click",".children",{"mytext":newtext},function(e){ $(this).text(e.data.mytext); }) }) </script> </head> <body> <div class="parent"> <div class="children"><span>原來內容</span></div> </div> <span>大家好</span> </body> </html>
以上代碼通過通過選擇器字符串來過濾匹配元素的子元素中哪些可以響應綁定的事件。上面的代碼中，類名爲children的元素和它的子元素可以調用綁定的事件。
語法結構二:
$(selector).on(object,[selector],[data])
參數列表:
| 參數 | 描述 |
| object | 一個用字符串表示的，一個或多個空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數。 |
| selector | 可選。一個選擇器字符串，用以過濾選定的元素，該選擇器的後裔元素將調用處理程序。 如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。 |
| data | 可選。作爲event.data屬性值傳遞給事件對象的額外數據對象以供事件處理函數處理。 |
實例代碼:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>腳本之家</title> <style type="text/css"> div{ width:160px; height:160px; border:1px solid green; font-size:12px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var newtext="這是新文本" $("div").on({click:function(e){ $(this).text(e.data.mytext); }},{"mytext":newtext}) }) </script> </head> <body> <div>原來內容</div> </body> </html>
以上代碼中，事件類型和事件處理函數以對象的形式綁定的。
希望本文所述對大家的jQuery程序設計有所幫助。
Bootstrap的Modal.js裏的'click.bs.modal.data-api'在哪裏觸發？
最近在看Boostrap的Modal.js的源碼，不只是Modal，其他的組件，比如button都用到了DATA-API，不是很清楚他的data api是怎麼觸發的，能否告知一下。
// MODAL DATA-API // ============== $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { // some code }) // BUTTON DATA-API // =============== $(document) .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { // some code }) .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { // some code })
這是一個Jquery的概念，只要出發了click事件，就會觸發click.xxx,而在取消綁定的時候，off(click.xxx)不會影響到其他事件參考jquery文檔：
Event names and namespaces（事件名稱和命名空間） 任何事件的名稱，可以作爲events 參數。jQuery將通過所有瀏覽器的標準JavaScript事件類型，當用戶操作事件，如click，瀏覽器會調用handler參數的函數。此外，.trigger()方法可以觸發標準的瀏覽器事件 和 自定義事件名綁定的處理程序。 事件名稱可以添加指定的event namespaces（命名空間） 來簡化刪除或觸發事件。例如，"click.myPlugin.simple"爲 click 事件同時定義了兩個命名空間 myPlugin 和 simple。通過上述方法綁定的 click 事件處理，可以用.off("click.myPlugin") 或 .off("click.simple")刪除綁定到相應元素的Click事件處理程序，而不會干擾其他綁定在該元素上的“click（點擊）” 事件。命名空間類似CSS類，因爲它們是不分層次的;只需要有一個名字相匹配即可。以下劃線開頭的名字空間是供 jQuery 使用的。