1.addEventListener 和 removeEventListener

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

缺点：不兼容IE

<body>

    <input type="button" value="按钮3" id="btn3">

</body>

<script type="text/javascript">

    function showMes(event){

        alert(event.type);

    }

    var btn3 = document.getElementById('btn3');

    btn3.addEventListener('click',showMes,false);

    btn3.addEventListener('click',function(){

        alert(this.value);

    },false);

    btn3.removeEventListener('click',showMes,false);

</script>

2.attachEvent和detachEvent

接收两个参数：事件处理程序的名称和事件处理程序的函数

btn3.attachEvent('onclick',showMes);

然而，我们不能光为了chrome等浏览器只用addEventListener,或者光为了IE只用attachEvent，故而要将其融合起来用

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

<body>

    <input type="button" value="按钮3" id="btn3">

</body>

<script type="text/javascript">

    function showMes(event){

        alert(event.type);

    }

    var btn3 = document.getElementById('btn3');

    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',showMes);

</script>

</html>

事件处理程序（addEventListener 和 attachEvent）的更多相关文章

  1. Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  2. JS事件-事件处理程序-笔记总结ing...

    html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...

  3. js 事件处理程序 事件对象

    事件:用户或浏览器自身执行的动作: 事件处理程序:响应某个事件的函数: 事件流:从页面中接收事件的顺序. 1.DOM事件流 "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段 ...

  4. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  5. JavaScript中的事件处理程序

    JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间.可以使用事件处理程序来预订事件,以便在事件发生的时候执行响应的代码.这种观察者模式的模 ...

  6. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  7. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

  8. 【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解

    <javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = { // ...

  9. 浅谈JavaScript的事件（事件处理程序）

    事件就是用户或者浏览器自身执行的某种动作.诸如click.load和mouseover,都是事件的名字.而响应某个事件的函数就叫事件处理程序.事件处理程序的名字以"on"开头,比如 ...

  10. Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

随机推荐

  1. Java实现mysql数据库备份

    Runtime是一个与JVM运行时环境有关的类,这个类是Singleton的. Runtime.getRuntime()可以取得当前JVM的运行时环境,这也是在Java中唯一一个得到运行时环境的方法. ...

  2. NSTImer重复执行任务

    问题 应用需要调度代码以在特定的时间执行.此外,你还想要重复执行任务. 解决方案 使用NSTimer调度代码以在特定的时间执行.为了使用NSTimer,你需要有日期对象与指向应用的运行循环的引用. 注 ...

  3. Hibernate从入门到精通（七）多对一单向关联映射

    上次的博文Hibernate从入门到精通(六)一对一双向关联映射中我们介绍了一下一对一双向关联映射,本次博文我们讲解一下多对一关联映射 多对一单向关联映射 多对一关联映射与一对一关联映射类似,只是在多 ...

  4. Unity3d之Http通讯GET方法和POST方法

    (一)GET方法 IEnumerator SendGet(string _url) { WWW getData = new WWW(_url); yield return getData; if(ge ...

  5. 如何在Linux下重命名多个文件

    在Linux中,当你想要改变一个文件名,使用mv命令就好了.然而mv不能使用通配符重命名多个文件.可以用sed.awk或者与xargs结合使用来处理多个文件的情况.然而,这些命令行即繁琐又不友好,并且 ...

  6. NOSQL Mongo入门学习笔记 - C++连接Mongodb(三)

    OS环境: Centos 7.1 release X86_64 编译环境: G++ 4.8.3 已经成功搭建好了Mongodb,也初步在命令行中的查询与写入数据的基本方法,现在通过C++来连接Mong ...

  7. Matlab划分测试集和训练集

    % x是原数据集,分出训练样本和测试样本 [ndata, D] = size(X); %ndata样本数,D维数 R = randperm(ndata); %1到n这些数随机打乱得到的一个随机数字序列 ...

  8. ANN中Precision-Recall权衡

    如果想要得到较高的精度,则需要较长的编码. 编码长度m增长的话,则item碰撞的概率会成倍的减小,从而导致召回率下降. 为了得到较高的召回率,则需要多个哈希表. 参考http://yongyuan.n ...

  9. kafka.network.AbstractServerThread中的线程协作机制

    这个虚类是kafka.network.Acceptor和kafka.network.Processor的父类,提供了一个抽象的Sever线程. 它的有趣之处在于为子类的启动和停止提供了线程间的协作机制 ...

  10. 想让安卓 APP 如丝般顺滑？

    随着安卓手机市场占有率的节节攀升,随便在大街上找几个人估计 80% 用的都是安卓手机吧!用安卓手机的人这么多,不知道大家是否曾经感觉到过 APP 卡顿.死机?是否遇到应用程序无响应.闪退?本文就为大家 ...