1. 程式人生 > >javaScript的點選事件的寫法

javaScript的點選事件的寫法

1.使用DOM的事件方法

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中點選事件方法一</title>
</head>
<body>
	<button id="btn">click</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick=function(){
			alert("hello world");
		}
	</script>
</body>
</html>

消除事件:btn.onclick=null;

2.使用DOM元素的方法addEventListener(eventfunctionuseCapture)

event: 必須,即事件。 function: 必須,即自己寫方法(要操作的內容)。 useCapture: 可選。布林值,指定事件是否在捕獲(true)或冒泡(false)階段執行。 具體詳解可到 http://www.runoob.com/jsref/met-element-addeventlistener.html 瞭解

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中點選事件方法二</title>
</head>
<body>
	<button id="btn">click</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.addEventListener('click',function(){
			alert("hello wrold");
		},false)
	</script>
</body>
</html>

3.在標籤裡直接寫onclik

<!DOCTYPE html>
<html>
<head>
	<title>Javascript中點選事件方法三</title>
	<script type="text/javascript">
		function test(){
			alert("hello world");
		}
	</script>
</head>
<body>
	<button id="btn" onclick="test()">click</button>
</body>
</html>