JS事件绑定

最新推荐文章于 2024-07-26 20:46:01 发布

熊青峰

最新推荐文章于 2024-07-26 20:46:01 发布

阅读量3.5k

点赞数

分类专栏： BS开发

本文链接：https://blog.csdn.net/xqf309/article/details/8536168

版权

BS开发专栏收录该内容

30 篇文章 0 订阅

订阅专栏

JS事件绑定非常灵活，有好几种方式：

在HTML代码中直接绑定：这种绑定方式非常直观，适用于少量代码。

<html>
<head>
	<title>事件绑定</title>
</head>
	<body>
		<input type="button" id="btnOK" value="确定" οnclick="alert('您点击了确定按钮')"/>
	</body>
</html>

在外部js文件里绑定，这样有助于结构（HTML页）与功能（JS）页的分类，符合结构良好的网页

HTML页：

<html>
<head>
	<title>事件绑定</title>

	<script src="warn.js"></script>

</head>
	<body>
		<input type="button" id="btnOK" value="确定"/>
	</body>
</html>

JS代码页

window.οnlοad=initPage;
 function initPage(){
	document.getElementById("btnOK").οnclick=warn;
 }
 function warn(){
	alert("你点击了确定按钮");
 }

以上方法都只能绑定一个事件，如果需要绑定多个事件的话，在IE浏览器中，可以用这种方法：

window.οnlοad=initPage;
 function initPage(){
	var btn=document.getElementById("btnOK");
	
	btn.attachEvent("onclick",WarnA);btn.attachEvent("onclick",WarnB);
 }
 function WarnB(){
	alert("你绑定了提醒B");
 }
 
 function WarnA(){
	alert("你绑定了提醒A");
 }

在非IE浏览器中，使用这种绑定方法：

window.οnlοad=initPage;
 function initPage(){
	var btn=document.getElementById("btnOK");
	btn.addEventListener("click",WarnA);
	btn.addEventListener("click",WarnB);
	//btn.attachEvent("onclick",WarnA);btn.attachEvent("onclick",WarnB);
 }
 function WarnB(){
	alert("你绑定了提醒B");
 }
 
 function WarnA(){
	alert("你绑定了提醒A");
 }