javascript之事件监听
addEventListener是一个监听事件并处理相应的函数,用于向指定元素添加事件句柄,可使用removeEventListener()方法来移除addEventListener()方法添加的事件句柄。
不啰嗦,直接上代码,如:
js部分
<script>
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
if(input.addEventListener){
// 兼容主流浏览器,IE8及以下不支持
input.addEventListener("click",function(){
alert("按钮被点击了!")
},false) // 指定事件是否在捕获或冒泡阶段执行,false表示冒泡,true表示捕获,默认为冒泡
}else if(input.attachEvent){
// 兼容IE8及以下
input.attachEvent("onclick",function(){
alert("按钮被点击了!")
})
}
}
</script>
body部分:
<body>
<input type="button" value="按钮" />
</body>
注意:
addEventListener()方法,有3个参数。第一个参数是说明监听的事件类型(如:click,注意不要前缀on),第二个参数是事件执行的函数或方法,第三个参数则指定事件是否在捕获阶段执行,false表示冒泡,true表示捕获,默认为冒泡。该方法对于IE8及以下浏览器不支持。
attachEvent()方法,有2个参数。第一个参数是说明监听的事件类型(如:onclick,注意要前缀on),第二个参数是事件执行的函数或方法。支持IE8及以下版本浏览器
javascript之事件监听的更多相关文章
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
- javascript事件监听与事件委托
事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...
- JavaScript事件监听以及addEventListener参数分析
事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...
- Javascript事件监听
FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...
- (12)JavaScript之[事件][事件监听]
事件 /** * 事件: * onload 和 onunload 事件在用户进入或离开页面时被触发 * * onchange事件常结合对输入字段的验证来使用 * onmouseover 和 onmou ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- Node.js 教程 05 - EventEmitter(事件监听/发射器 )
目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...
随机推荐
- Bmob 移动后端云服务器平台实现登录注册
源码下载:http://download.csdn.net/download/jjhahage/10034519 PS:一般情况下,我们在写android程序的时候,想要实现登录注册功能,可以选择自己 ...
- Linux下创建root权限的账号osadmin
创建root权限的账号osadmin 命令为: useradd -u 0 -o -g root -G root -d /home/osadmin osadmin 创建成功后验证效果: id osadm ...
- java推送数据到app--极光推送
之前项目有用到需要把数据推送到app端 采用的是极光推送 特此把工具类和pom.xml需要的jar整理如下 pom.xml需要jar如下 <!-- 极光推送 --> <depende ...
- 消息队列一:为什么需要消息队列(MQ)?
为什么会需要消息队列(MQ)? #################################################################################### ...
- 房上的猫:java基础知识部分知识点
1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...
- PCoA主坐标分析
来源:http://blog.sina.com.cn/s/blog_670445240101nlss.html 1 背景介绍 这是一种排序方法.假设我们对N个样方有了衡量它们之间差异即距离的数据, ...
- jmeter测试
时间过得飞快,转眼间就到了公司半个月了,这是第三周上班,从上班到现在感觉自己什么都没有做,只是写了一些前台的验证,况且我的前台并不是很熟,js学了很久也快忘记了,看了看插件也不咋会用,但是自己也写了点 ...
- npm安装删除模块以及cnpm淘宝镜像
npm安装模块 [$ npm install xxx]利用 npm 安装xxx模块到当前命令行所在目录: [$ npm install -g xxx]利用npm安装全局模块xxx: npm 删除模块 ...
- JAVA有哪些数据类型?基本数据类型各占多少个字节
java的数据类型分为:基本数据类型和引用数据类型. 基本数据类型各占多少个字节: 数据类型 字节 默认值 byte 1 0 short 2 0 int 4 0 long 8 0 float 4 0. ...
- Unity3d 协程
参考文章: http://blog.csdn.net/onafioo/article/details/48979939 http://www.cnblogs.com/zhaoqingqing/p/37 ...