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. Mysql基础语法
			
    mysql SELECT VERSION(), CURRENT_DATE, now();select user(); create database pets;show databases; use  ...
    
			
    2. 
						
  2. 【Thread】多线程的异常处理？
			
    线程中处理异常是个头疼的问题,在异步的代码中,如何将异常捕获. 捕获异常后,将异常反馈给开发者,或用户.一般来说,反馈给开发者,多数方式在是日志中打印异常日志:而反馈给用户,多数是在界面上友好提示(比 ...
    
			
    3. 
						
  3. Utility
			
    #region Tools public static string ForMatDateTime(DateTime dt, string formatStr) { return string.For ...
    
			
    4. 
						
  4. head标签掉到body里的问题
			
    HTML最开始的标签   <!DOCTYPE html>在其之前不能有任何的内容,否则head里的内容就会掉到body里,导致譬如网站的图标icon无法更新等的功能问题
    
			
    5. 
						
  5. struts2——通配符
			
    struts2的配置文件是 struts.xml.. 在这个配置文件里面可以使用通配符..其中的好处就是,大大减少了配置文件的内容..当然,相应付出的代价是可读性.. 使用通配符的原则是 约定高于配置 ...
    
			
    6. 
						
  6. Linux netmask
			
    wget http://mirrors.sohu.com/ubuntu/pool/universe/n/netmask/netmask_2.3.12.tar.gz tar xf netmask_2.3 ...
    
			
    7. 
						
  7. 数据库分库分表(sharding)
			
    地址: http://blog.csdn.net/column/details/sharding.html
    
			
    8. 
						
  8. Scrum Meeting---Eleven(2015-11-6)
			
    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 倒计时设计 3h 商品发布页设计 4h 胡亚坤 低栏设计 2h UI风格 2h 刘猛 通讯录设计 2 ...
    
			
    9. 
						
  9. ZOJ-2362 Beloved Sons 最大权值匹配
			
    题意:国王有N个儿子,现在每个儿子结婚都能够获得一定的喜悦值,王子编号为1-N,有N个女孩的编号同样为1-N,每个王子心中都有心仪的女孩,现在问如果安排,能够使得题中给定的式子和最大. 分析:其实题目 ...
    
			
    10. 
						
  10. [转载] tcp那些事1
			
    原文: http://coolshell.cn/articles/11564.html TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较 ...
    
			
    11.