JavaScript事件处理程序详解

2019-11-19 15:23:55

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js事件处理程序的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>DOM0级DOM2级</title></head><body><input id="btn1" type="button" value="click1" onclick="show()"><input id="btn2" type="button" value="click2"><input id="btn3" type="button" value="click3"><script>  function show() {    alert("btn1");  }  //DOM0级  var btn2 = document.getElementById("btn2");  btn2.onclick = function () {    alert("DOM0级btn2");  };  //DOM2级  function show2() {    alert("DOM2级btn3");  }  var btn3 = document.getElementById("btn3");//  btn3.addEventListener("click",show2,false);//  btn3.removeEventListener("click",show2,false);  //ie事件处理程序//  btn3.attachEvent("onclick",show2);//  btn3.detachEvent("onclick",show2);  //跨浏览器事件处理程序  //能力检测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(btn3,"click",show2);eventUtil.removeHandler(btn3,"click",show2);</script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用vue与jquery实时监听用户输入状态的操作代码

下一篇：jQuery选择器之属性筛选选择器用法详解