按鈕點選事件的實現方式---原生js
阿新 • • 發佈：2019-02-17
這個部分主要來講解一下按鈕點選事件的集中js的實現方式：
方法一：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> <script> function buttonClick(){ alert("你點選了按鈕哦"); } </script> </head> <body> <input id="button" type="button" value="點選" onclick="buttonClick();"> </body> </html>
方法二：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> </head> <body> <input id="button" type="button" value="點選" > <script> var btn = document.getElementById("button"); btn.onclick =function(){ alert("你點選了按鈕哦！"); } </script> </body> </html>
對於方法二，一定要把script程式碼塊寫在body的尾部，但是如果說硬是要寫在head標籤內的話，一定要在window.load裡面，或者在jq的另一種寫法$(document).ready()。 如下方程式碼所示。這個是程式碼執行順序的原因。
方法三：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test1</title> <script> window.onload = function(){ var btn = document.getElementById("button"); btn.onclick =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>
window.onload = function(){
var btn = document.getElementById("button");
btn.addEventListener('click',function() {alert('你點選了按鈕哦！')},false);
}
</script>
</head>
<body>
<input id="button" type="button" value="點選" >
</body>
</html>