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. nltk安装及wordnet使用详解
			
    环境:python2.7.10 首先安装pip 在https://pip.pypa.io/en/stable/installing/ 下载get-pip.py 然后执行 python get-pip. ...
    
			
    2. 
						
  2. DBCP连接Oracle，数据库重启后现OALL8 is in an inconsistent state异常
			
    最近,DBCP连接Oracle,数据库重启后现OALL8 is in an inconsistent state异常. 版本说明 commons-dbcp-1.4.jar commons-pool-1 ...
    
			
    3. 
						
  3. 将XML文件中的内容转换为Json对象
			
    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...
    
			
    4. 
						
  4. Linux源代码分析工具链
			
    前言 看源代码是一个程序员必须经历的事情,也是可以提升能力的一个捷径.个人认为: 要完全掌握一个软件的方法只有阅读源码. 在Windows下有sourceinsight这个源码阅读软件(虽然我没用过, ...
    
			
    5. 
						
  5. 通过继承Rect类编写一个具有确定位置的矩形类PlainRect，其确定位置用 矩形的左上角坐标来标识，包含： 添加两个属性：矩形左上角坐标startX和startY。 两个构造方法： 带4个参数的构造方法，用于对startX、startY、width和height属性 初始化； 不带参数的构造方法，将矩形初始化为左上角坐标、长和宽都为0 的矩形； 添加一个方法： 判断某个点是否在矩形内部的方法
			
    package b; public class Rect { Double width; Double height; public Double getWidth() { return width; ...
    
			
    6. 
						
  6. 【leetcode❤python】107. Binary Tree Level Order Traversal II
			
    #-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):#     def __init ...
    
			
    7. 
						
  7. LuaTinker的bug和缺陷
			
    LuaTinker的bug和缺陷 LuaTinker是一套还不错的C++代码和Lua代码的绑定库,作者是韩国人Kwon-il Lee,作者应该是参考了LuaBind后,为了简化和避免过重而实现的.其官 ...
    
			
    8. 
						
  8. linux  phpstorm安装和激活方法
			
    安装方法:http://www.linuxdiyf.com/linux/19328.html 激活方法:http://www.cnblogs.com/buyucoder/p/5291771.html  ...
    
			
    9. 
						
  9. [HDOJ3718]Similarity（KM算法，二分图最大匹配）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3718 题意:有一堆答题情况和正确答案,问每一个答题情况的正确率最大是多少. 给每一对答案和答题情况的字 ...
    
			
    10. 
						
  10. JS——ajax login test
			
    1.新建一个webproject,我用的是myeclipse10,建立如下的LoginServlet.java文件 2.编写java文件 import java.io.IOException; imp ...
    
			
    11.