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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 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
PHP中的正规表达式(一)
2006/10/09 PHP
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
详解react-redux插件入门
2018/04/19 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Python装饰器用法示例小结
2018/02/11 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
找到不普通的东西:Bonanza
2016/10/20 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
25岁生日感言
2014/01/13 职场文书
村官学习十八大感想
2014/01/15 职场文书
教学评估实施方案
2014/03/16 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
诚信贷款承诺书
2014/05/30 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
外贸英文求职信范文
2015/03/19 职场文书
vue3中的组件间通信
2021/03/31 Vue.js