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 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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 mssql 数据库分页SQL语句
2008/12/16 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python中方法链的使用方法
2016/02/23 Python
Python退火算法在高次方程的应用
2018/07/26 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
详解Python中的分支和循环结构
2020/02/11 Python
python爬虫基础知识点整理
2020/06/02 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
VC++笔试题
2014/10/13 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
个人求职简历中英文自我评价
2013/12/16 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
mysql中关键词exists的用法实例详解
2022/06/10 MySQL