DOM事件处理程序学习随笔1(IMOOC)

来源：互联网发布：java电子商务系统源码编辑：程序博客网时间：2024/06/02 11:24

使用事件处理程序

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>

0 0