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自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
jquery蒙版控件实现代码
Dec 08 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
详解Vue源码中一些util函数
Apr 24 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 $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
详解Python中break语句的用法
2015/05/14 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Python中的元组介绍
2019/01/28 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
Servlet方面面试题
2016/09/28 面试题
关于读书的演讲稿300字
2014/08/27 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
公司董事任命书
2015/09/21 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python