跨浏览器事件处理程序

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跨浏览器事件处理程序title>
    
head>
<body>
    <script>
        //添加事件
        function addHandler(element,type,handler){
            //element:事件对象
            //type:事件类型
            //handler:事件句柄
            if (element.addEventListener){  //判断浏览器是否支持该语句(chrome/opera/IE9支持)
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){  //判断浏览器是否支持该语句(IE8及以下版本支持)
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//以上两种都不支持时,执行DOM0级事件
            }
        }
        //移除事件
        function removeHandler(element,type,handler){
            if (element.removeEventListener){     //判断浏览器是否支持该语句(chrome/opera/IE9支持)
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){      //判断浏览器是否支持该语句(IE8及以下版本支持)
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//以上两种都不支持时,执行DOM0级事件
            }
        }
    script>
    
    <button id="btn">点击button>
    <script>
        var btn=document.getElementById("btn");//获取按钮
        //事件句柄
        var tan=function (){
            alert("弹框");
        }
        addHandler(btn,"click",tan);//调用添加事件函数
        removeHandler(btn,"click",tan);//调用移除事件函数
    script>
body>
html>

你可能感兴趣的:(跨浏览器事件处理程序)