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 用于计算点击率(统计)
Jun 30 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
微信小程序人脸识别功能代码实例
May 07 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php输出xml属性的方法
2015/03/19 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Javascript MD4
2006/12/20 Javascript
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
Python作用域用法实例详解
2016/03/15 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python素数筛选法浅析
2018/03/19 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
PHP统计代码行数的小代码
2019/09/19 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
电子信息工程专业自荐书
2014/06/24 职场文书
迎新生标语大全
2014/10/06 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
索赔员岗位职责
2015/02/15 职场文书
运动会主持词大全
2015/07/02 职场文书