事件处理程序_事件处理中心程序代码-优快云博客

本文详细介绍了HTML、DOM0级、DOM2级及IE事件处理程序的不同实现方式及其特点。包括HTML事件的耦合问题、DOM0级事件的简单性和跨浏览器优势、DOM2级事件的添加与移除方法，以及IE事件处理程序的使用。

1、HTML事件处理程序
缺点：HTML代码和JS代码紧密的耦合在一起

<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
 </head>
 <body>
    <div id="box">
        <input type="button" value="按钮" id="btn" onclick="alert('hello')">
    </div>
 </body>
</html>

<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
 </head>
 <body>
    <div id="box">
        <input type="button" value="按钮" id="btn" onclick="showMessage()">
    </div>
    <script>
        function showMessage() {
            alert('hello world!')
        }
    </script>
 </body>
</html>

2.DOM0级事件处理程序
较传统的方式：把一个函数赋值给一个事件的处理程序属性
简单 具有跨浏览器的优势，没有html事件的缺点

<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
 </head>
 <body>
    <div id="box">
        <input type="button" value="按钮" id="btn" onclick="showMessage()">
        <input type="button" value="按钮2" id="btn2">
    </div>
    <script>
        function showMessage() {
            alert('hello world!')
        }
        var btn2 = document.getElementById('btn2')
        btn2.onclick = function() {
            alert('这是通过DMO0级添加的事件！')
        }
        btn2.onclick=null//删除onclick属性
    </script>
 </body>
</html>

3.DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件、作为事件处理程序的函数和一个布尔值。true表示在事件捕获阶段，false表示在事件冒泡阶段。
兼容各种浏览器

<html>
 <head>
   <title>事件流</title>
   <meta charset="utf-8">
 </head>
 <body>
    <div id="box">
        <input type="button" value="按钮" id="btn" onclick="showMessage()">
        <input type="button" value="按钮2" id="btn2">
        <input type="button" value="按钮3" id="btn3">
    </div>
    <script>
        function showMessage() {
            alert('hello world!')
        }
        var btn2 = document.getElementById('btn2')
        btn2.onclick = function() {
            alert('这是通过DMO0级添加的事件！')
        }
        btn3.addEventListener('click', showMessage,false)
        //删除事件
        // btn3.removeEventListener('click', showMessage,false)
        btn3.addEventListener('click', function () {
            alert(this.value)//this指代被触发的元素
        },false)
    </script>
 </body>
</html>