摘自菜鳥教程 廢話不說 直接上demo
實例：
向<p>元素添加click事件處理程序:
1 <html> 2 <head> 3 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 4 </script> 5 <script> 6 $(document).ready(function(){ 7 $("p").on("click",function(){ 8 alert("段落被點擊了。"); 9 }); 10 }); 11 </script> 12 </head> 13 <body> 14 15 <p>點擊這個段落。</p> 16 17 </body> 18 </html>
運行結果:
定義和用法：
1. on() 方法在被選元素及其子元素上添加一個或多個 事件處理程序
2.自jquery1.7版本之后 on()方法是bind() live() delegate() 方法新的替代品 推薦使用此方法!使用其他的方法可能會出現不兼容的問題
3.使用on()方法添加的事件程序適用於當前及未來的程序(這里的未來的程序是腳本創建的新元素，或者是以前的事件代理程序)
4. 如果要移除使用on()方法添加的事件處理程序 請使用與之對應的off()方法
5.如果你想事件執行一次就移除請使用one()方法
6.on()方法支持自定義事件
語法：
$(selector).on(event, childSelector,data,function)；
參數說明：
event 必須 事件的名稱(可以自定義) 支持綁定多個事件 多個事件用空格分開 也可以是map參數和數組
childSelector 可選 添加事件程序的子元素而且不是父選擇器本身
data 可選 傳遞到事件對象 event的額外的參數
function 必選 規定事件發生時運行的函數
實例分析：
bind()改為on()
<!DOCTYPE html> <html> <head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#div1").on("click",function(){ $(this).css("background-color","pink"); }); $("#div2").bind("click",function(){ $(this).css("background-color","pink"); }); }); </script> </head> <body> <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and bind().</h4> <div id="div1" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>on() method</b>.</p> </div><br> <div id="div2" style="border:1px solid black;">This is some text. <p>Click to set background color using the <b>bind() method</b>.</p> </div> </body> </html>
運行結果:
運行結果2：
從delegate()改為on()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("#div1").on("click","p",function(){ 9 $(this).css("background-color","pink"); 10 }); 11 $("#div2").delegate("p","click",function(){ 12 $(this).css("background-color","pink"); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 19 <h4 style="color:green;">This example demonstrates how to achieve the same effect using on() and delegate().</h4> 20 21 <div id="div1"> 22 <p>Click to set background color using the <b>on() method</b>.</p> 23 </div> 24 25 <div id="div2"> 26 <p>Click to set background color using the <b>delegate() method</b>.</p> 27 </div> 28 29 </body> 30 </html>
運行結果:
從live改為on
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="https://apps.bdimg.com/libs/jquery/1.7.0/jquery.js"> 6 </script> 7 <script> 8 $(document).ready(function(){ 9 $("#div1").on("click",function(){ 10 $(this).css("background-color","pink"); 11 }); 12 $("#div2").live("click",function(){ 13 $(this).css("background-color","pink"); 14 }); 15 }); 16 </script> 17 </head> 18 <body> 19 20 <h4 style="color:green;">該實例演示了如何使用 on() 和 live()。</h4> 21 22 <div id="div1" style="border:1px solid black;">這是一些文本。 23 <p>點擊此處，使用 <b>on() 方法來設置背景顏色</b>。</p> 24 </div><br> 25 26 <div id="div2" style="border:1px solid black;">這是一些文本。 27 <p>點擊此處，使用 <b>live() 方法來設置背景顏色</b>。</p> 28 </div> 29 <p><b>注意：</b>live() 方法在 jQuery 版本 1.7 中被廢棄，在版本 1.9 中被移除。請使用 on() 方法代替。</p> 30 </body> 31 </html>
運行結果:
添加多個事件處理程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("p").on("mouseover mouseout",function(){ 9 $("p").toggleClass("intro"); 10 }); 11 }); 12 </script> 13 <style type="text/css"> 14 .intro 15 { 16 font-size:150%; 17 color:red; 18 } 19 </style> 20 </head> 21 <body> 22 23 <p>Move the mouse pointer over this paragraph.</p> 24 25 </body> 26 </html>
注意:toggleClass()方法是切換css class樣式的方法! 這個可以對比學習addClass 和removeClass
使用map參數添加多個事件程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("p").on({ 9 mouseover:function(){$("body").css("background-color","lightgray");}, 10 mouseout:function(){$("body").css("background-color","lightblue");}, 11 click:function(){$("body").css("background-color","yellow");} 12 }); 13 }); 14 </script> 15 </head> 16 <body> 17 18 <p>Click or move the mouse pointer over this paragraph.</p> 19 20 </body> 21 </html>
運行結果
在元素上添加自定義事件:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("p").on("myOwnEvent", function(event, showName){ 9 $(this).text(showName + "! What a beautiful name!").show(); 10 }); 11 $("button").click(function(){ 12 $("p").trigger("myOwnEvent",["Anja"]); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 19 <button>Trigger custom event</button> 20 <p>Click the button to attach a customized event on this p element.</p> 21 22 </body> 23 </html>
運行結果：
Tip：上述代碼的myOwnEvent是自定義的方法的名稱
trigger是綁定自定義事件的意思
向函數中添加數據
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 function handlerName(event) 8 { 9 alert(event.data.msg); 10 } 11 12 $(document).ready(function(){ 13 $("p").on("click", {msg: "You just clicked me!"}, handlerName) 14 }); 15 </script> 16 </head> 17 <body> 18 19 <p>Click me!</p> 20 21 </body> 22 </html>
顯示結果:
注意添加的數據是以event的data屬性添加的
向未來的數據(腳本創建的元素)添加事件：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("div").on("click","p",function(){ 9 $(this).slideToggle(); 10 }); 11 $("button").click(function(){ 12 $("<p>This is a new paragraph.</p>").insertAfter("button"); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 19 <div style="background-color:yellow"> 20 <p>This is a paragraph.</p> 21 <p>Click any p element to make it disappear. Including this one.</p> 22 <button>Insert a new p element after this button</button> 23 </div> 24 25 </body> 26 </html>
提示 slideToggle()是折疊代碼 詳情可以參考jquery文檔
如何使用off()方法移除事件處理程序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> 7 </script> 8 <script> 9 $(document).ready(function(){ 10 $("p").on("click",function(){ 11 $(this).css("background-color","pink"); 12 }); 13 $("button").click(function(){ 14 $("p").off("click"); 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 21 <p>點擊這個段落修改它的背景顏色。</p> 22 <p>點擊一下按鈕再點擊這個段落( click 事件被移除 )。</p> 23 24 <button>移除 click 事件句柄</button> 25 26 </body> 27 </html>
運行的結果:
歡迎補充和留言