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技术技巧大全(五)
Jan 22 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
js判断是否是手机页面
Mar 17 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
详解Vue的七种传值方式
Feb 08 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 Streams(流)详细介绍及使用
2015/05/12 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Vue 组件传值几种常用方法【总结】
2018/05/28 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
微信小程序实现二维码签到考勤系统
2020/01/16 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
python错误处理详解
2014/09/28 Python
NumPy 数组使用大全
2019/04/25 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
培训演讲稿范文
2014/01/12 职场文书
就业自我评价
2014/02/04 职场文书
法律六进活动方案
2014/03/13 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang