文章导航

JavaScript 注册事件处理函数

2018-9-22 10:31| 作者: admin| 查看: 1491| 评论: 0|来自: 蚂蚁部落

在JavaScript中,为元素注册事件处理函数的方式不止一种。

下面分别通过代码实例做一下介绍它们各自的使用方式和优缺点。

一.直接在HTML标签内部注册事件处理函数:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant{
    width:100px;
    height:100px;
    background-color:red;
}
</style>
<script type="text/javascript">  
function changeBg(){
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "green";
}
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" onclick="changeBg()" value="查看演示"/>
</body>
</html>

上面代码为input按钮注册click点击事件处理函数。

注册方式解析如下:

(1).事件处理函数在HTML元素内部注册。

(2).onclick是HTML元素的事件属性,它的属性值是事件触发后调用执行的函数。

(3).引号中的函数必须带有小括号,比如changeBg()而不是changeBg。

因为此种方式注册事件处理函数等同于如下代码:

[JavaScript] 纯文本查看 复制代码
obt.onclick=function(){
    changeBg()
  }

事件发生后,就会执行匿名的事件处理函数,然后调用changeBg函数,所以必须带小括号。

(4).onclick事件属性前面必须带on。

优缺点如下:

(1).注册方式简单,初学者可能最先掌握此方式。

(2).浏览器兼容性好,各个浏览器都支持。

(3).与HTML标签内容混合在一起,让页面看起来十分乱。

(4).只能注册一个事件处理函数,大家知道HTML元素写两个属性只会有一个生效,另一个被覆盖。

二.通过dom元素对象事件属性注册:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#ant{
    width:100px;
    height:100px;
    background-color:red;
}
</style>
<script type="text/javascript">  
function changeBg(){
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "green";
}
window.onload=function(){
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    changeBg();
  }
}
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="bt" value="查看演示"/>
</body>
</html>

此代码实现了上一段代码相同的效果,点击按钮可以修改div颜色的背景色。

注册方式解析如下:

(1).获取按钮的dom元素对象obt。

(2).然后通过dom元素对象的事件属性onclick注册事件处理函数,更通俗一点,就是为dom元素对象的事件属性赋值一个函数,当事件触发时,就会调用此函数。

(3).点击按钮,事件触发,调用事件处理函数,此事件处理函数再调用其内部的changeBg函数。

优缺点如下:

(1).容易掌握。

(2).浏览器兼容性好,各个浏览器都支持。

(3).只能为同一个元素对象注册一个相同类型的事件处理函数,否则后面的会覆盖前面的。

三.addEventListener注册事件处理函数:

此方法可以为指定元素注册事件处理函数,ES5新增。

优点与缺点总结如下:

(1).可以为同一个元素注册多个事件处理函数。

(2).更能更多一些。

(3).掌握起来稍稍复杂(当然它也很简单,与前两种比稍微复杂一些)。

(4).具有一定兼容性问题,IE9以下浏览器不支持。

此方法的具体用法可以参阅JavaScript addEventListener()一章节。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

上一篇:JavaScript scrollBy()下一篇:window.self

最新评论

返回顶部