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 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript中的this详解
Dec 08 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
利用Vue实现简易播放器的完整代码
Dec 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
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
DOM 高级编程
2015/05/06 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python执行外部程序的常用方法小结
2015/03/21 Python
python学习教程之使用py2exe打包
2017/09/24 Python
详解Django中间件执行顺序
2018/07/16 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
详解Python 中的容器 collections
2020/08/17 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
工程造价自荐信
2013/10/09 职场文书
毕业生怎样写好自荐信
2013/11/11 职场文书
双方协议书
2014/04/22 职场文书
工作岗位说明书模板
2014/05/09 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
学校食堂标语
2014/10/06 职场文书
会计师事务所实习证明
2014/11/16 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
2019军训心得体会
2019/06/27 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
mysql函数全面总结
2021/11/11 MySQL
python中 .npy文件的读写操作实例
2022/04/14 Python
Hive日期格式转换方法总结
2022/06/25 数据库