浏览器兼容笔记(1)

来源:互联网 发布:水电算量软件 编辑:程序博客网 时间:2024/06/01 07:56

文章内容参考自慕课网

一、事件处理程序

  1. html事件处理程序,直接将事件绑定在html代码中,导致耦合性高 ,不利于程序的更改;
  2. DOM0级事件处理程序 ,在JavaScript中使用对象的方法来处理事件,如object.onclick = null把点击事件属性赋值为null,IE有的版本不兼容;
  3. DOM2级事件处理程序,调用对象的addEventListener() and removeEventListener(),接受三个参数 - 要处理的事件名作为事件处理的程序函数布尔值;如
    object.addEventListener('click',showMessage,false)这里的true和false,true表示是在事件捕获中执行,false表示的是冒泡过程中执行;

IE浏览器事件处理程序的方法

IE有自己的事件处理程序的方法,attachEvent()detachEvent(),函数中的参数只有两个,要处理的事件名作为事件处理的程序函数

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>浏览器兼容性笔记-事件处理程序</title></head><body>    <input id="btn1" type="button" value="这是按钮一" />    <script type="text/javascript">        var btn1 = document.getElementById("btn1");         function showMessage(){            alert("当前的按钮被点击了!");        }        //给不同的浏览器的事件处理程序封装        //element表示事件的对象,type表示调用的是什么类别的事件,handler表示事件发生后要执行的函数        var eventUtil={            addHandler:function(element,type,handler){                if(element.addEventListener){                    element.addEventListener(type,handler,false);                }else if(element.attachEvent){                    element.attachEvent("on"+type,handler);                }else{                    element["on"+type]=handler;                }            },            removeHandler:function(element,type,handler){                if(element.removeEventListener){                    element.removeEventListener(type,handler,false);                }else if(element.detachEvent){                    element.detachEvent("on"+type,handler);                }else{                    element["on"+type]=null;                }            }        }        //调用事件        eventUtil.addHandler(btn1,'click',showMessage);    </script></body></html>
0 0