addEventListener() 方法用于向指定元素添加事件句柄。


addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。


你可以向一个元素添加多个事件句柄。


你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。


你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。


addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。


当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。


你可以使用 removeEventListener() 方法来移除事件的监听。




<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>

<button id="myBtn">点我</button>

<script>

var x = document.getElementById("myBtn");

for(var i = 0;i < 3;i++){

//内部函数

x.addEventListener("click", function(){ alert("hhh");});

//内部函数调用匿名函数

x.addEventListener("click", function(){

myFunParam(2,3);

});

//调用函数再调用匿名函数

x.addEventListener("click",myFunctionParam);

//调用函数

x.addEventListener("click", myFunction);

}

function myFunction() {

alert ("Hello World!")

}

function myFunParam(a,b){

alert(a + b);

}

function myFunctionParam(){

myFunParam(3,4);

}

</script>

</body>

</html>


												


											
绑定事件 addEventListener的更多相关文章
	

    
						
  1. javascript绑定事件addEventListener与attachEvent
		
    1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...
    
		
    2. 
								
  2. DOM初体验（绑定事件，监听事件）
		
    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
    
		
    3. 
						
  3. dom addeventlistener与id 绑定事件的区别
		
    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
    
		
    4. 
						
  4. addEventListener()绑定事件的对象方法。
		
    addEventListener()绑定事件的对象方法.addEventListener()含有三个参数,一个是事件名称,另一个是事件执行的函数,最后一个是事件捕获,, obj.addEventLis ...
    
		
    5. 
						
  5. js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法
		
    js的事件绑定方法中,ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener,所以就必须为这两个方法做兼容处理,原理是先推断attachEvent仅仅否为真( ...
    
		
    6. 
						
  6. 使用addEventListener绑定事件是关于this和event记录
		
    DOM元素使用addEventListener绑定事件的时候经常会碰到想把当前作用域传到函数内部,可以使用以下两种放下: var bindAsEventListener=function (objec ...
    
		
    7. 
						
  7. 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
		
    一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaS ...
    
		
    8. 
						
  8. JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
		
    下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
    
		
    9. 
						
  9. 面试时被问到js的绑定事件，我居然不知道怎么回答。回来查了下，做个笔记
		
    事件绑定是几种方法 以下为例: <button id='btn'>click me</button> function Btn(){ alert('click'); } 1.直 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Python3基础 使用技巧:多行同时缩进
			
    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
    
			
    2. 
						
  2. 【leetcode❤python】172. Factorial Trailing Zeroes
			
    #-*- coding: UTF-8 -*-#给定一个整数N,那么N的阶乘N!末尾有多少个0? 比如:N=10,N!=3628800,N!的末尾有2个0.#所有的尾部的0可以看做都是2*5得来的,所以 ...
    
			
    3. 
						
  3. 异步设备IO 《windows核心编程》第10章学习
			
    异步IO操作与同步操作区别: 在CreateFile里的FILE_FLAG_OVERLAPPED标志 异步操作函数LPOVERLAPPED参数 接收IO请求完成通知 触发设备内核对象 缺点:同一个设备 ...
    
			
    4. 
						
  4. 卡尔曼滤波— Constant Velocity Model
			
    假设你开车进入隧道,GPS信号丢失,现在我们要确定汽车在隧道内的位置.汽车的绝对速度可以通过车轮转速计算得到,汽车朝向可以通过yaw rate sensor(A yaw-rate sensor is  ...
    
			
    5. 
						
  5. linux中mysql基本操作
			
    1.linux下启动mysql的命令: mysqladmin start /ect/init.d/mysql start (前面为mysql的安装路径) 2.linux下重启mysql的命令: mys ...
    
			
    6. 
						
  6. MyBatis  内连接association     左外连接collection
			
    前提条件: 学生表 (多  子表) 年级表(一  主表) 1,第一种情况:先查子表所有 student.sql.xml文件如何配 由于有多表连接,无法把查询结果直接封装成一个实体对象--------& ...
    
			
    7. 
						
  7. LIST动态表格画线（动态列）
			
    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
    
			
    8. 
						
  8. 02~ 一步一步教你使用 SVN之SVN 的介绍
			
    SVN的介绍 一.学习SVN的主要内容的介绍 1.基本操作:学习SVN有哪些基本操作 2.服务器端的安装配置:SVN中必不可少的2个环境之一,会在下面的课程中介绍服务器如何去安装和配置 3.客户端软件 ...
    
			
    9. 
						
  9. Python基础学习笔记（五）常用字符串内建函数
			
    参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-strings.html 3. http://www.liaoxu ...
    
			
    10. 
						
  10. jquery动画遮罩
			
    以前一直以为遮罩都是鼠标移上去,改变透明度实现的,后来看到过这样的一个遮罩动画,然后今天自己写了一个,因为弹出的遮罩是圆形的,所以从美观上来说,这个遮罩效果更适合于方形图片. <div clas ...
    
			
    11.