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. Python:监控ASM剩余空间

    #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'Jipu FANG' version = 0.1 import cx_Oracle ...

  2. Linux(CentOS6.5)下修改Nginx初始化配置

    本文地址http://comexchan.cnblogs.com/,作者Comex Chan,尊重知识产权,转载请注明出处,谢谢! 首先备份相关文件: cp /comexHome/nginx/conf ...

  3. 【ASP.NET Core】运行原理(4):授权

    本系列将分析ASP.NET Core运行原理 [ASP.NET Core]运行原理(1):创建WebHost [ASP.NET Core]运行原理(2):启动WebHost [ASP.NET Core ...

  4. 导出生成xsl文件

    public String expData() throws Exception{              List<SubArea> list = subAreaService.fin ...

  5. Javascipt数组

    Javascipt数组 在Javascript中数组的做用是:使用单独的变量名来储存一系列的值. 数组只有一个属性,就是length,length表示的数组所占内存空间的数目. <!DOCTYP ...

  6. Jenkins 学习笔记（一）：我对 Jenkins 的宏观认识

    Jenkins 是一个持续构建的系统,通过一周的了解熟悉,其逻辑似乎很简单. Jenkins 拓扑 Jenkins 逻辑 1. 从代码库拉取代码. 2. 处理代码. 对于需要编译的程序,需要进行处理, ...

  7. TCP 建立连接：三次握手

    转自:http://www.cnblogs.com/winner-0715/p/5032661.html 感谢! TCP 建立连接过程 TCP是因特网中的传输层协议,使用三次握手协议建立连接,下面是T ...

  8. Vue自己写组件——Demo详细步骤

    公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...

  9. JavaScript Html页面加载完成三种写法

    //一.Html页面加载完成的JS写法 //1. $(function () {     alert("窗体Html页面加载完成方法一"); }); //2. $(document ...

  10. tomcat 发布简单的html网站

    1.建立一个文件夹D:\Demo 2.在Demo目录下,建立一个WEB-INF的文件夹并将web.xml放在里面,D:\Demo\WEB-INF\web.xml 3.将index.html文件放在De ...