javaScript的点击事件的写法

最新推荐文章于 2024-07-14 03:40:57 发布

glgom

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量2.2k

点赞数 2

分类专栏： javaScript 文章标签： javaScript

javaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

参考：https://blog.csdn.net/h5css3_linhuai/article/details/56011582

1.使用DOM的事件方法

了解DOM其他事件可到：http://www.runoob.com/jsref/dom-obj-event.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.onclick=function(){
			alert("hello world");
		}
	</script>
</body>
</html>

消除事件：btn.οnclick=null;

2.使用DOM元素的方法addEventListener(event, function, useCapture)

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>