站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > 前端规范
onclick与click事件的区别
时间:2021-09-08 13:32:29 围观:140 来源:Downzz

看到经常有朋友问,onclick事件与click事件有什么区别。

此种情况基本是出现在初学者身上,当年作者本人也有类似的疑问。

其实这是一个非常搞笑的问题,世上本没有onclick事件。

但是总有人如此称呼,并且听起来很顺耳,没有任何违和感。

比如还有change事件被称作为onchange事件,keydow事件被称作为onkeydow事件。

以此类推,几乎所有的事件的名称前面都被添加了一个"on",准确的说,事件的名称添加on是错误的。

之所以经常出现上述称谓,主要是因为早前注册事件处理函数方式引起的。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<script> 
window.onload=function(){
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  let count=0;
  obt.onclick=function(){
    odiv.innerHTML=++count;
  }
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="查看演示"/>
<div id="show"></div>
</body> 
</html>

代码核心截图如下:


看到这里,可以想到称呼click事件为onclick事件似乎也理所当然。

再看一种比较古老的注册事件处理函数的方式:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<script> 
let count=0;
function func(){
  let odiv=document.querySelector("#show");
  odiv.innerHTML=++count;
}
</script> 
</head> 
<body> 
<input type="button" onclick="func()" value="查看演示"/>
<div id="show"></div>
</body> 
</html>

直接通过HTML标签属性方式注册事件处理函数,又一次加强了"onclick"这个名字的正确性。

需要特别说明的是,上面方式各个浏览器都支持,使用起来也很方便,但最不推荐使用。

主要原因如下:

(1).让HTML代码看起来更加繁琐,违背表现与内容分离原则。

(2).不利于代码的后期维护。

通过ES5新增的addEventListener方法注册事件处理函数,还原了事件的本来该有的名称。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.downzz.com/" />
<title>Downzz.com</title>
<script> 
window.onload=function(){
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  let count=0;
  function func(){
    odiv.innerHTML=++count;
  }
  obt.addEventListener("click",func,false);
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="查看演示"/>
<div id="show"></div>
</body> 
</html>

可以看到事件名称前面已经没有了"on",加"on"是错误的。

介绍到这里,大家应该很清楚onclick与click之间的区别与联系了。

更多注册事件处理函数方式参阅JavaScript 注册事件处理函数一章节。

文章为作者独立观点不代表本网立场,未经允许不得转载。