jQuery在綁定事件的時候我們前面已經實現過了，看看是如何實現的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn1">test1</button> <script src="jquery-3.3.1.js"></script> <script> $("#btn1").click(function(){ alert('button1') }) </script> </body> </html>
在上面的實例中我們對按鈕綁定了一個事件，但這個事件是在綁定的時候自己定義的，可是如果我們先定義一個函數那怎么綁定呢？
綁定已有的函數
我們可以事先定義一個函數，然后把和指定的事件進行綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn1">test1</button> <script src="jquery-3.3.1.js"></script> <script> function printdata(){ alert(12345) } $("#btn1").click(printdata) </script> </body> </html>
注意，我們在綁定的時候只聲明了函數的函數名，並沒有參數的傳遞。可是如果要有參數的傳遞該怎么辦呢？
帶參數的函數綁定
其實，在上面我們和事件綁定的參數其實是有一個參數的(event)，我們可以查看一下(只放JS代碼)
function printdata(){ console.log(event) } $("#btn1").click(printdata)
在按鈕被按下的時候可以看一看打印的數據
可以看出來，這個event是個obj類型的數據，那么我們就可以在這個event里加上我們需要傳遞的參數
function printdata(event){ console.log(event) alert(event.data.data) } $("#btn1").click({'data':'button1'},printdata)
這樣，就實現了和上面一樣的效果。
這里有兩個要注意的地方：
1.形參event必須顯性的指定
2.event.data.data中第一個data指的是參數中的數據是不能換的，而第二個data是我們在傳參的時候，參數是以鍵值對的方式來傳遞的，這個data就是鍵值對里的鍵值。
3.綁定的時候，一定要先寫傳的參數，在寫函數名，不能顛倒。
所以，如果有多個按鈕需要綁定這個函數時，就可以直接綁定了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn1">test1</button> <button id="btn2">test2</button> <script src="jquery-3.3.1.js"></script> <script> function printdata(event){ console.log(event) alert(event.data.data) } $("#btn1").click({'data':'button1'},printdata) $('#btn2').click({'data':'button2'},printdata) </script> </body> </html>