DOM事件处理程序学习随笔1(IMOOC)-CSDN博客

本文链接：https://blog.csdn.net/leoncy34/article/details/50937089

使用事件处理程序

1. HTML事件处理程序

2. DOM0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序属性。

用的比较多的方法,简单,跨浏览器的优势

<html>
    <head>
        <title>事件流</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="box">
            <input type="button" value="按钮" id="btn"                    onclick="showMes()"/>
            <input type="button" value="按钮2" id="btn2"/>
        </div>
        <script>
            function showMes() {
                alert("hello world!");
            }
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function() {
                alert("这是通过DOM0级添加的事件！");
            }
            btn2.onclick = null;
        <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="showMes()"/>
            <input type="button" value="按钮2" id="btn2"/>
            <input type="button" value="按钮3" id="btn3"/>
        </div>
        <script>
            function showMes() {
                alert("hello world!");
            }
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
            btn2.onclick = function() {
                alert("这是通过DOM0级添加的事件！");
            }
            btn2.onclick = null;
            //DOM2级事件
            //去掉onclick前面的on！！！
            btn3.addEventListener('click',showMes,false);
            btn3.addEventListener('click',function(){
                alert(this.value);
            }
            ,false);
            btn3.removeEventListener('click',showMes,false);
        <script>
    </body>
</html>`

4. IE事件处理程序

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

接受相同的两个参数：事件处理程序的名称和事件处理程序的函数.

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡！

<html>
    <head>
        <title>事件流</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="box">
            <input type="button" value="按钮" id="btn" onclick="showMes()"/>
            <input type="button" value="按钮2" id="btn2"/>
            <input type="button" value="按钮3" id="btn3"/>
        </div>
        <script>
            function showMes() {
                alert("hello world!");
            }
            var btn2=document.getElementById("btn2");
            var btn3=document.getElementById("btn3");
            btn2.onclick = function() {
                alert("这是通过DOM0级添加的事件！");
            }
            btn2.onclick = null;
            //DOM2级事件
            //去掉onclick前面的on！！！
            /*
            btn3.addEventListener('click',showMes,false);
            btn3.addEventListener('click',function(){
                alert(this.value);
            }
            ,false);
            //删除事件
            btn3.removeEventListener('click',showMes,false);
            */

            //IE事件处理
            //btn3.attachEvent('onclick',showMes);
            //btn3.detachEvent('onclick',showMes);

            //跨浏览器事件处理程序
            var eventUtil = {
                //添加句柄
                addHandler:function(element,type,handler) {
                    if(element.addEventListener) {
                        element.addEventListener(type,handler,false);
                    } else if(element.attchEvent) {
                        element.attchEvent('on'+type,handler);
                    } else {
                        element['on'+type] = handler;
                    }
                },
                //删除句柄
                removeHandler:function(element,type,handler) {
                    if(element.removeEventListener) {
                        element.addEventListener(type,handler,false);
                    } else if(element.detachEvent) {
                        element.detachEvent('on'+type,handler);
                    } else {
                        element['on'+type] = null;
                    }
                } 
            }
            eventUtil.addHandler(btn3,'click',showMes);
            eventUtil.removeHandler(btn3,'click',showMes);
        <script>
    </body>
</html>