点击事件的三种绑定方式（补充：事件的三种处理程序）

最新推荐文章于 2025-11-08 14:17:53 发布

原创最新推荐文章于 2025-11-08 14:17:53 发布 · 870 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

JavaScript 专栏收录该内容

52 篇文章

订阅专栏

HTML中使用onclick属性
JS中使用onclick属性
JS中使用addEvenListener()方法

三种方法的比较

在第二、三种方法中，可以向函数传入一个event对象，并读取其相应属性，而方法一不可以。

语法细节

在第一种方法中，onclick大小写无关，但在第二种方法中，必须使用小写。因为HMTL对大小写不敏感，而JS则会区分大小写。
在第二、三种方法中，指定函数名时没有双引号，而第一种作为一个HTML属性，需要双引号。
第一种方法调用的函数后需要括号，第二、三种不需要。

HTML中使用onclick属性

<html>
<head>
    <title>方式一</title>
    <style>
        #demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
    </style>
    <script>
        function add(){
            var sum;
            sum=9+15;
            alert(sum);
        }
    </script>
</head>
<body>
    <div id="demo" onclick="add()"></div>
</body>
</html>

JS中使用onclick属性

<html>
<head>
    <title>方式二</title>
    <style>
        #demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
    </style>
    <script>
        function add(){
            var sum;
            sum=9+15;
            alert(sum);
        }
        window.onload=function(){
            var box=document.getElementById("demo");
            box.onclick=add;
        }
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

JS中使用addEvenListener()方法

<html>
<head>
    <title>方式三</title>
    <style>
        #demo{width: 50px;height: 50px;background-color: #ccc;cursor: pointer;}
    </style>
    <script>
        function add(){
            var sum;
            sum=9+15;
            alert(sum);
        }
        window.onload=function(){
            var box=document.getElementById("demo");
            box.addEventListener("click",add);
        }
    </script>
</head>
<body>
    <div id="demo"></div>
</body>
</html>

补充：

今天看了imooc上的课程，对于事件的相关知识加深了一些理解。以上内容是针对点击事件为例讲述的事件处理程序，现在完整补充事件的三种处理程序。

HTML处理程序

将事件的JS代码嵌入HTML的节点结构中，但这有很大的缺点：HTML和JS很紧密的耦合在一起，不方便修改。

<input type="button" value="按钮" onclick="handle()">
<script>
    function handle(){
        alert("这是个测试");
    }
</script>

DOM 0级事件处理程序

这是较为传统也是很多人使用的方式，办一个函数赋值给一个事件的处理程序属性。它的优点：很简单，可以跨浏览器处理。

<input type="button" value="按钮" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("这也是个测试");
    }
    //删除onclick属性,移除事件
    btn.onclick = null;
</script>

DOM 2级事件处理程序

该方式定义了两个方法用于处理指定和删除事件处理程序的操作，addEventListener() 和 removeEventListener()。它们接受三个参数：要处理的事件名、作为事件处理程序的函数、布尔值（false为冒泡，true为捕获）

<input type="button" value="按钮" id="btn">
<script>
    var btn = document.getElementById("btn");
    btn.addEventListener("click",function(){
        alert("这还是个测试");
    },false);
</script>

注意，有个特殊的地方，事件名变成了 “click”，是没有 “on” 的哟。而且，该方式不兼容IE浏览器。

IE事件处理程序

attachEvent()，添加事件
detachEvent()，删除事件

它们接受两个参数：要处理的事件名、作为事件处理程序的函数。没第三个参数布尔值，这是因为IE8以及更早版本的IE只支持冒泡模式。

跨浏览器兼容方法

采用最普通的能力检测。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。使用这种方式无需顾及浏览器如何如何，只需确定浏览器是否支持特定的能力，也就是说看该浏览器是否支持某些方法。

<div>
    <input type="button" value="按钮" id="btn">
</div>
<script>
    var btn = document.getElementById("btn");
    var event = {
        // 添加事件
        addEvent:function(elem,type,handle){    //根据DOM2级事件处理程序的三个参数
            if(elem.addEventListener){           //非IE浏览器
                elem.addEventListener(type,handle,false);
            }else if(elem.attachEvent){        //IE浏览器
                elem.attachEvent("on"+type,handle);
            }else{                            //以上都不支持时采用DOM0级处理程序
                elem["on"+type]=handle;
            }
        },
        // 删除事件
        removeEvent:function(elem,type,handle){
            if(elem.removeEventListener){
                elem.removeEventListener(type,handle,false);
            }else if(elem.detachEvent){
                elem.detachEvent("on"+type,handle);
            }else{
                elem["on"+type]=null;
            }
        }
    };
    // 调用封装好的函数
    event.addEvent(btn,"click",function(){alert("这就是个测试")});
</script>