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 ...
随机推荐
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
- 如何写一个SSH项目(三)如何进行交互的
下面以登录为例子,展示从前台到后端的一整套流程并进行分析. 首先介绍一下我的SSH的分层结构 action和service一起是业务逻辑层 action层调用service层 dao ...
- Rstudio( bioconductor)下载太慢，用国内镜像
在Rstudio中,下载软件install.packages()和 bioconductor软件下载命令 source("http://bioconductor.org/biocLite.R ...
- [编织消息框架][消息服务]rmi
RMI(即Remote Method Invoke 远程方法调用) 远程对象: 用于远程客户端调用 必需继承java.rmi.Remote,每个调用方法必须添加java.rmi.RemoteExcep ...
- xampp的安装和配置
这几天一直在做一个网站,客户要求要用PHP修改WordPress的themes,目的是交付完成后,客户自己管理方便. 以前从没有涉及过PHP,用的是jsp,但是,既然已经选择接受,就只能让自己去适应客 ...
- C语言学生管理系统（原版本）（自编）
/*系统特色:(大牛勿笑) *颜色提示 *文字提示 *功能 */ #include <stdio.h> #include <stdlib.h> #include <mat ...
- 命令行执行Django脚本的方法
update.py import os import sys import django sys.path.append(r'C:\Users\Administrator\PycharmProject ...
- C#图解教程第一章 C#和.NET框架
1.1 在.NET之前 C#发音:see shap 1.1.1 20世纪90年代后期的Windows编程 20世纪90年代后期各语言缺点: 1.纯Win32 API不是面向对象的,而且工作量比M ...
- Oracle PL/SQL Developer集成TFS进行团队脚本文件版本管理
对于传统的使用关系型数据库的大型软件产品,后台数据库的持续开发和维护可能会产生大量的脚本文件,针对这些脚本文件应该怎样比较方便的进行版本管理,以及如何快捷的在团队之间进行权限等协作管理呢?不同的数据库 ...
- jQuery 核心函数 （十一）
函数 描述 jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器. jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.