JavaScript的事件监听是通过addEventListener()来实现的

    它算是事件绑定的第二种方式。

      他的特别之处在于这种绑定事件的方法不会被同名事件覆盖。

  看具体的demo

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件监听</title>
<script>
window.onload = function(){
/*
事件绑定的第二中方式:
事件监听addEventListener()
*/
var btn =document.getElementById('btn');
var btn2 =document.getElementById('btn2'); // 这种事件绑定方法同名事件会被覆盖
btn.onclick = function(){
console.log('click');
} btn.onclick = function(){
console.log('第二次click');
} btn.addEventListener('click',function(){
console.log('第三次click');
},false); btn.onclick = function(){
console.log('第四次click');
} // 清除事件
btn.onclick = null; // 事件监听
// addEventListener()
btn2.addEventListener('click',function(){
console.log('第1次点击')
},false);
btn2.addEventListener('click',function(){
console.log('第2次点击')
},false); // 推荐的事件监听方式
// 用具名函数
function handler(){
console.log('第3次点击')
}
btn2.addEventListener('click',handler,false); // 清除事件监听
// 参数一定要跟绑定时一样
btn2.removeEventListener('click',handler); // ie8-的事件监听方式
// attachEvent('onclick',)
// 没有第三个参数
// btn2.attachEvent('onclick',handler);
//
// IE8-清除事件监听
// btn2.detachEvent('onclick',handler);
}
</script>
</head>
<body>
<button id="btn">按钮</button>
<button id="btn2">按钮2</button>
</body>
</html>

    要注意IE-8下的监听方式是attachEvent

JavaScript---事件监听的更多相关文章

  1. Javascript事件监听

    FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...

  2. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

  3. JavaScript事件监听以及addEventListener参数分析

    事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...

  4. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  5. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  6. (12)JavaScript之[事件][事件监听]

    事件 /** * 事件: * onload 和 onunload 事件在用户进入或离开页面时被触发 * * onchange事件常结合对输入字段的验证来使用 * onmouseover 和 onmou ...

  7. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  8. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  9. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  10. 让 select 的 option 标签支持事件监听(如复制操作)

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

随机推荐

  1. java的TimeUtils或者DateUtils的编写心得

    一.几种常见的日期和时间类介绍 介绍时间工具类不可避免必须要去触碰几个常见的日期和时间类,所以就简单介绍一下. 1.jdk1.8之前的日期时间类 a.Date类 我们可以通过new的方式生成一个Dat ...

  2. 150. Evaluate Reverse Polish Notation(逆波兰表达式)

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  3. URAL - 1091 Tmutarakan Exams (简单容斥原理)

    题意:K个不同数组成的集合,每个数都不超过S且它们的gcd>1.求这样的数的个数 分析:从2开始枚举gcd,但这样会发生重复.譬如,枚举gcd=2的集合个数和gcd=3的集合个数,枚举6的时候就 ...

  4. RabbitMQ 如何实现对同一个应用的多个节点进行广播

    1.背景 了解过RabbitMQ的Fanout模式,应该知道它原本的Fanout模式就是用来做广播的.但是它的广播有一点区别,来回顾下它的含义:Fanout类型没有路由键的概念,只要队列绑定到了改ex ...

  5. 如何释放linux cache占用的内存

    [root@prd-fygl-app-01 ~]# free -m             total       used       free     shared    buffers     ...

  6. AB测试的需求

    一.背景 涉及到的项目是 SDK, 用户量 几千万级别,需要调整的是 订单购买整个逻辑,已经发现了低概率问题,影响到的订单不到 0.001% ,但是每周总有几个用户向客服反馈问题.整个逻辑问题,在我入 ...

  7. zookeeper 监听事件 NodeCacheListener

    zookeeper 监听事件 NodeCacheListener NodeCacheListener一次注册,每次监听,但是监听不到操作类型,不知道是增加?删除?还是修改? 1.测试类: packag ...

  8. Python学习示例源码

    函数和函数式编程 函数定义: 函数调用: 过程定义: 过程调用: 面向过程的编程方法: """ 面向对象-----类------class 面向过程-----过程---- ...

  9. [caffe]caffe资料收集

    1.caffe主页,有各种tutorial. 2.Evan Shelhamer的tutorial,包括视频.

  10. 【VS2015】未能创建 Visual C# 2015编译器

    今天在安装完成Visual Studio 2015后,在执行update 3时出错,导致再次打开VS2015时提示错误:“未能创建 Visual C# 2015编译器”和“未能正确加载CSharpPa ...