按鈕點選事件的實現方式---JQuery
阿新 • • 發佈：2019-01-09
之前上一篇文章當中，我們瞭解的原生javascript對於按鈕點選的幾種實現方式，現在我們來看下Jquery來實現 這些事件的實現方式。
方法一：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> <script src="js/jquery-3.1.1.min.js"></script> <script> window.onload = function(){ $("#button").click(function(){ alert("你點選了按鈕哦！"); }); } </script> </head> <body> <input id="button" type="button" value="點選" > </body> </html>
方法二：
方法三：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> <script src="js/jquery-3.1.1.min.js"></script> <script> window.onload = function(){ $("#button").on("click",function(){ alert("你點選了按鈕哦！"); }); } </script> </head> <body> <input id="button" type="button" value="點選" > </body> </html>
bind(type,[data],function(eventObject))
bind是使用頻率較高的一種，作用就是在選擇到的元素上繫結特定事件型別的監聽函式，引數的含義如下：
type:事件型別，如click、change、mouseover等;
data:傳入監聽函式的引數，通過event.data取到。可選;
function:監聽函式，可傳入event物件，這裡的event是jQuery封裝的event物件，與原生的event物件有區別，使用時需要注意。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> <script src="js/jquery-3.1.1.min.js"></script> <script> window.onload = function(){ $("#button").bind("click",function(){ alert("你點選了按鈕哦！"); }); } </script> </head> <body> <input id="button" type="button" value="點選" > </body> </html>
擴充套件：
unbind() 方法移除被選元素的事件處理程式。
方法四：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test1</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
window.onload = function(){
$("#button").live("click",function(){
alert("你點選了按鈕哦！");
});
}
</script>
</head>
<body>
<input id="button" type="button" value="點選" >
<script>
</script>
</body>
</html>不過這個方法在高版本的Jquery中移除了。
方法五：
delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，並規定當這些事件發生時執行的函式。
使用 delegate() 方法的事件處理程式適用於當前或未來的元素（比如由指令碼建立的新元素）。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test1</title>
<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").delegate("input","click",function(){
alert("你點選了按鈕哦！");
});
});
</script>
</head>
<body>
<div style="background-color:red">
<input id="button" type="button" value="點選" >
</div>
</body>
</html>在下篇文章中，我將介紹一下一些事件型別。