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. 刚实习的自己-php

    刚毕业的大学生,可能你的理论知识很丰富,但是你要清楚的是:你缺少实战经验.            正式实习的时候是在下午,老板给了我一个他们几年前开发好的系统(cms),这是一个展示型的网站,也就是发 ...

  2. date 命令详解

    date - print or set the system date and time Display the current time in the given FORMAT, or set th ...

  3. java推送数据到app--极光推送

    之前项目有用到需要把数据推送到app端 采用的是极光推送 特此把工具类和pom.xml需要的jar整理如下 pom.xml需要jar如下 <!-- 极光推送 --> <depende ...

  4. Python学习_10__python2到python3

    同样作为动态语言,python的面相对像和ruby有很多类似的地方,这里还是推荐<Ruby元编程>一书来参考学习python的面向对象.然而python并不是纯面向对象设计,所以很多rub ...

  5. 关于微信小程序，一些想法

    不负众望,小程序终于在昨天1月9日正式上线,从凌晨微信公开课发布了微信<一月九日,一年之约>到现在,整整一天的时间,朋友圈.自媒体平台都在不断的发着关于小程序的各种文章,"APP ...

  6. ABP架构学习系列三：手工搭建ABP框架

    由于公司的项目才接触到ABP这个框架,当时就觉得高大上,什么IOC.AOP.ddd各种专业词汇让人激情 澎湃,但在使用过程中碰到了许多坑,可能也许是没有去看源码导致的,但工作确实没有那么多时间让人去慢 ...

  7. JAVA类的创建： 创建JAVA的类 ，JAVA的字段，JAVA类的方法

    1. 创建Java的类 如果说Java的一切都是对象,那么类型就是决定了某一类对象的外观与行为.可是类型的关键字不是type,而是class,创建一个新的类型要用下面的代码: 1 2 3 class ...

  8. chrome浏览器解决ajax跨域问题

    方法一 1.右键谷歌快捷方式,选择"属性". 2.打开属性窗口,切换到"快捷方式"选项卡. 3.在目标路径的后面添加[ --disable-web-securi ...

  9. python3基础(七)函数基础

    Function 函数是一段组织好的能够实现特定功能或者逻辑的代码块,函数代码在文件执行时读入内存并不执行,在调用函数时执行,简单来说是把一段代码封装给一个函数名(可以用变量的概念去理解,即把一段代码 ...

  10. c# winform 视频转字符动画

    以上是大图展示, 原理比较简单,附件下载带了一个分辨率比较小的txt动画.   音乐删除了music.mp3,  如果需要自己下载一首歌曲,然后放在根目录名称“music.mp3”就可以了. 附件点我 ...