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乱码的一次解决过程 图解教程
Feb 20 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 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新手上路(十三)
2006/10/09 PHP
php 分页类 扩展代码
2009/06/11 PHP
php 读取文件乱码问题
2010/02/20 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
学生档案自我鉴定
2013/10/07 职场文书
电子商务自荐书范文
2014/01/04 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
会计自我鉴定
2014/02/04 职场文书
警告通知
2015/04/25 职场文书
电影复兴之路观后感
2015/06/02 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android