JavaScript事件处理程序详解


Posted in Javascript onSeptember 19, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
详细讲解JS节点知识
Jan 31 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Javascript继承机制详解
May 30 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信小程序倒计时功能实例代码
Jul 17 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
jQuery选择器之属性筛选选择器用法详解
Sep 19 #jQuery
vue小图标favicon不显示的解决方案
Sep 19 #Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 #jQuery
前端把html表格生成为excel表格的实例
Sep 19 #Javascript
基于js中的原型(全面讲解)
Sep 19 #Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 #Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 #Javascript
You might like
如何开始收听短波广播
2021/03/01 无线电
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
curl和libcurl的区别简介
2015/07/01 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
JavaScript window.location对象
2014/11/14 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
Python中extend和append的区别讲解
2019/01/24 Python
python实现烟花小程序
2019/01/30 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
EJB的基本架构
2016/09/22 面试题
高级Java程序员面试题
2016/06/23 面试题
2014全国两会心得体会
2014/03/17 职场文书
协议书样本
2014/04/23 职场文书
教室布置标语
2014/06/26 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2016中秋节广告语
2016/01/28 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript