JavaScript---事件监听
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---事件监听的更多相关文章
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- JavaScript事件监听以及addEventListener参数分析
事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- （12）JavaScript之[事件][事件监听]
事件 /** * 事件: * onload 和 onunload 事件在用户进入或离开页面时被触发 * * onchange事件常结合对输入字段的验证来使用 * onmouseover 和 onmou ...
- Javascript事件模型系列（三）jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
- 让 select 的 option 标签支持事件监听（如复制操作）
这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...
随机推荐
- HDU 3416 Marriage Match IV （Dijkstra+最大流）
题意:N个点M条边的有向图,给定起点S和终点T,求每条边都不重复的S-->T的最短路有多少条. 分析:首先第一步需要找出所有可能最短路上的边.怎么高效地求出呢?可以这样:先对起点S,跑出最短路: ...
- js中获取时间戳
function conver(){ var date = new Date(); var year = date.getFullYear() var month=date.getMonth()+1; ...
- Django学习笔记之Cookie、Session和自定义分页
cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...
- 深入学习js之——词法作用域和动态作用域
开篇 当我们在开始学习任何一门语言的时候,都会接触到变量的概念,变量的出现其实是为了解决一个问题,为的是存储某些值,进而,存储某些值的目的是为了在之后对这个值进行访问或者修改,正是这种存储和访问变量的 ...
- DATETIME与TIMESTAMP
DATETIME与TIMESTAMP都能表达一个完整的日期格式:YYYY-MM-DD HH:MM:SS[.fraction] eg: mysql> create table test(id in ...
- linux go with vscode
1 install go apt install golang 将会同时安装下列软件: golang-1.9 golang-1.9-doc golang-1.9-go golang-1.9-src ...
- 20145313张雪纯 《Java程序设计》第3周学习总结
20145313张雪纯 <Java程序设计>第3周学习总结 教材学习内容总结 4.1.1 定义类 package four; class Clothes{ String color; ch ...
- 20145331 《Java程序设计》第6周学习总结
20145331 <Java程序设计>第6周学习总结 教材学习内容总结 第十章 输入/输出 10.1.1串流 •Java将输入/输出抽象化为串流,数据有来源及目的地,衔 ...
- 超详细 Spring @RequestMapping 注解使用技巧 （转）
@RequestMapping 是 Spring Web 应用程序中最常被用到的注解之一.这个注解会将 HTTP 请求映射到 MVC 和 REST 控制器的处理方法上. 在这篇文章中,你将会看到 @R ...
- Visual Studio 2010生成解决方案时,导致C盘空间越来越小
为了从根本上解决问题,还是去掉智能跟踪选项吧,方案: VS2010-->工具-->选项-->IntelliTrance-->将“启用IntelliTrace”勾选去掉--> ...