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之事件监听的更多相关文章

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

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

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

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

  3. JavaScript addEventListener()事件监听方法

    addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...

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

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

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

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

  6. Javascript事件监听

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

  7. （12）JavaScript之[事件][事件监听]

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

  8. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

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

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

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

随机推荐

  1. JavaScript连等赋值

    最近探究js原理的过程中遇到了这个挺有趣的问题. 先贴代码: var a = {n:1} a.x = a = {n:2} alert(a.x) //undefined 在弄懂这个之前,我们先普及一个知 ...

  2. 搭建redis cluster

    1  下载 redis安装包 tar zxvf redis-3.0.2.tar.gz cd redis-3.0.2/ make make install 2安装ruby sudo apt-get in ...

  3. 程序猿的日常——Java中的集合列表

    列表对于日常开发来说实在是太常见了,以至于很多开发者习惯性的用到数组,就来一个ArrayList,根本不做过多的思考.其实列表里面还是有很多玩法的,有时候玩不好,搞出来bug还得定位半天.所以这里就再 ...

  4. python爬虫如何爬知乎的话题？

    因为要做观点,观点的屋子类似于知乎的话题,所以得想办法把他给爬下来,搞了半天最终还是妥妥的搞定了,代码是python写的,不懂得麻烦自学哈!懂得直接看代码,绝对可用 #coding:utf-8 fro ...

  5. ABP .Net Core 日志组件集成使用NLog

    一.说明 NLog介绍和使用说明官网:http://nlog-project.org/ NLog和Log4net对比:https://www.cnblogs.com/qinjin/p/5134982. ...

  6. 初步了解 Django Models

    Part1:了解主键 1.      Python和Django版本如下: E:\django>python3 -V Python 3.5.2 E:\django>python3 -m d ...

  7. 如何用Python在豆瓣中获取自己喜欢的TOP N电影信息

    一.什么是 Python Python (蟒蛇)是一门简单易学. 优雅健壮. 功能强大. 面向对象的解释型脚本语言.具有 20+ 年发展历史, 成熟稳定. 具有丰富和强大的类库支持日常应用. 1989 ...

  8. TP框架如何开启log日志

    1. 日志的处理工作是由系统自动进行的,在开启日志记录的情况下,会记录下允许的日志级别的所有日志信息. 其中,为了性能考虑,SQL日志级别必须在调试模式开启下有效,否则就不会记录. 系统的日志记录由核 ...

  9. MicroPython-GPRS教程之TPYBoardv702GPRS功能测试

    一.什么是TPYBoardV702 TPYBoardV702是目前市面上唯一支持通信通信功能的MicroPython开发板:支持Python3.0及以上版本直接运行.支持GPS+北斗双模通信.GPRS ...

  10. SSM框架开发web项目系列（六） SpringMVC入门

    前言 我们最初的javaSE部分学习后,基本算是入门了,也熟悉了Java的语法和一些常用API,然后再深入到数据库操作.WEB程序开发,渐渐会接触到JDBC.Servlet/Jsp之类的知识,期间可能 ...