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 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
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
ajax php 实现写入数据库
2009/09/02 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
2020/05/19 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
python协程用法实例分析
2015/06/04 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python调用外部程序的实操步骤
2019/03/04 Python
python写日志文件操作类与应用示例
2019/07/01 Python
python自动发微信监控报警
2019/09/06 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
python构造IP报文实例
2020/05/05 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
公司周年庆典邀请函
2014/01/12 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
用Python实现屏幕截图详解
2022/01/22 Python
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏