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 Archive Network 集合
May 12 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
JS实现九宫格拼图游戏
Jun 28 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
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
Python模拟登录12306的方法
2014/12/30 Python
python实现RSA加密(解密)算法
2016/02/17 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
实例讲解Python中浮点型的基本内容
2019/02/11 Python
详解python编译器和解释器的区别
2019/06/24 Python
python elasticsearch环境搭建详解
2019/09/02 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
澳大利亚家具商店:Freedom
2020/12/17 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
保安员岗位职责
2013/11/17 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
区三好学生主要事迹
2014/01/30 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
民主生活会发言材料
2014/10/20 职场文书
售后服务承诺函格式
2015/01/21 职场文书
土地租赁协议书
2015/01/29 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
《失物招领》教学反思
2016/02/20 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书