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 ...
随机推荐
- jmeter远程分布执行遇到的网卡坑（A Test is currently running，stop or ....）
周末加班做一个项目app的性能测试,单机负载时由于公司给每个人的网络带宽上传下载流量就1M,300个用户并发就已经网络IO饱和了,虽然和相关部门协调过资源问题,但是收效甚微,因此打算先用分布部署压力机 ...
- IT小白学习Discuz!框架(一)
1.Discuz!是什么? 答:(1).Crossday Discuz! Board(简称 Discuz!)是北京康盛新创科技有限责任公司推出的一套通用的社区论坛软件系统. (2).Crossday ...
- Nodejs密集型CPU解决方案
首先说一下nodejs单线程的优势: 高性能,与php相比,避免了频繁创建切换线程的开销,执行更加迅速,资源占用小. 线程安全,不用担心同一变量被多线程读写,造成程序崩溃. 单线程的异步和非阻塞,其实 ...
- Python第二十四天 binascii模块
Python第二十四天 binascii模块 binascii用来进行进制和字符串之间的转换 import binascii s = 'abcde' h = binascii.b2a_hex(s) # ...
- JavaScript的DOM编程--08--复习
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- HTML学习 框架
iframe 在原来的页面嵌入其他页面 <iframe src="其他页面地址" width="宽" height="高" frame ...
- Linux入门篇（一）——基本命令
这一系列的Linux入门都是本人在<鸟哥的Linux私房菜>的基础上总结的基本内容,主要是记录下自己的学习过程,也方便大家简要的了解 Linux Distribution是Ubuntu而不 ...
- 常用的 css reset，基本的base.css
@charset "utf-8"; html { overflow-x: hidden; overflow-y: auto; } /*隐藏横向滚动,垂直滚动根据内容自 ...
- ionic2 开始第一个App（二）
安装App指令:ionic start 你的项目文件夹名称 tabs 安装指令如: ionic start myApp tabs 安装时间有点长,耐心等待~ 进入myApp文件夹指令:cd myApp ...
- 浅谈JavaScript的面向对象程序设计（四）
本文继续讲解JavaScript的面向对象程序设计.继承是面向对象语言中的一个基本概念,面向对象语言支持两种继承实现方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.但是在 ...