DOM事件处理程序总结

时间:2022-05-07 22:41:45

今天学习了几种处理DOM事件的方法,特分享一下。

一、HTML事件处理程序

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
        function test(){
            alert("你点击了");
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="button" onclick="test()">
</body>
</html>
 
 
 
这种方法缺点:HTML代码和javascript代码混合在一起,不便于后期维护。如果需要修改函数名,牵一发而动全身。需同时修改两处代码,很容易出错。 

二、DOM0级事件处理程序

<pre name="code" class="html"><span style="font-size:10px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
        window.onload = function(){
            var btn1 = document.getElementById('btn');
            btn1.onclick = function(){
                alert("你点击了");
            }
        };
    </script>
</head>
<body>
    <input id="btn" type="button" value="button">
</body>
</html></span>

 
 

这是比较传统的方式,就是将一个函数赋值给一个事件处理程序属性。这种为事件处理程序赋值的方法是第四代Web浏览器中出现的,而且至今仍然为所有现代浏览器所支持。

三、DOM2级事件处理程序

IE中:

attachEvent(event, eventFun);

detachEvent(event, eventFun);

event:事件名称,如“onclick”、“onmouseover”、“onkeydown”等。

eventFun:js函数名称

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
        window.onload = function(){
            var btn1 = document.getElementById('btn');
            btn1.attachEvent("onclick",test);
        };
        function test(){
            alert("你点击了");
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="button">
</body>
</html>

 
 

非IE:

addEventListener(event, eventFun, catch);

removeEventListener(event, eventFun, catch);

event:事件名称,如“onclick”、“onmouseover”、“onkeydown”等。

eventFun:js函数名称

catch:是否使用捕捉,一般用 false 

<span style="font-size:10px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
        window.onload = function(){
            var btn1 = document.getElementById('btn');
            btn1.addEventListener("click",test,false);
        };
        function test(){
            alert("你点击了");
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="button">
</body>
</html></span>


2016/2/11补充

今天对点击事件的event有了新理解,下图展示了发生点击事件时event的属性

DOM事件处理程序总结