js元素绑定事件方式代码下载

为指定元素绑定事件处理函数是必须要掌握的技能，因为这都是基础性的技能，所以也没有什么难度，知道了就知道了。

绑定事件处理函数有比较常用的三种方式，下面就以click点击事件为例子做一下简单介绍。

一.直接写在html标签中:

咱们就不管这种方式的正式术语是怎么回事，反正是这么回事，直接看代码:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
function done(){
  var odiv=document.getElementById("atnzone");
  odiv.innerHTML="51前端";
}
</script>
</head> 
<body> 
<div id="atnzone"></div>
<input type="button" value="查看效果"/>
</body> 
</html>

上面的代码实现了我们的要求，将事件处理函数的注册直接写在标签之内。

此种方式通常比较简单，但是并不推荐使用，因为违反了表现和内容分离的原则。

二.使用onclick属性方式:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("antzone");
  obt.onclick=function(){
    odiv.innerHTML="51前端";
  }
}
</script>
</head> 
<body> 
<div id="atnzone"></div>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

代码描述：js元素绑定事件方式。js元素绑定事件方式代码下载

下载全部收藏

125 166

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册