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 相关文章推荐
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
浅谈javascript错误处理
Aug 11 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
盘点被央视点名过的日本动画电影 一部比一部强
2020/03/08 日漫
PHP中的日期加减方法示例
2014/08/21 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
JavaScript基本对象
2007/01/11 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
浅谈Python爬虫基本套路
2019/03/25 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
年会搞笑主持词
2014/03/27 职场文书
医院义诊活动总结
2014/07/04 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
2014年班务工作总结
2014/12/02 职场文书
世界气象日活动总结
2015/02/27 职场文书
入党自传范文2015
2015/06/26 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
java基础——多线程
2021/07/03 Java/Android