addEventListener有几个参数,addeventlistener 传递参数
DOM0 DOM2 addEventListener
DOM0（属性绑定，兼容性好）：将一个函数赋值给一个事件处理属性
在dom上直接绑定事件（一个事件只能绑定一次），没有事件传播（事件一旦发生就立即调用句柄执行）。缺点：一个事件处理程序只能对应一个处理函数。
监听方法：
1.在标签内写onclick事件
input id="myButton" type="button" value="Press Me" οnclick="alert('thanks');"
alert()中的this的值会变成全局(window)对象的引用（在 严格模式 中为?undefined）。
2.在JS写onlicke=function（）{}函数
document.getElementById("myButton").onclick = function () {
? ? alert('thanks');
}
this的指向
用DOM0级的方式绑定事件是在元素对象的作用域内运行，因此在事件函数内的this属性不是引用全局对象，而是引用当前元素对象，可以用this获取当前元素的属性。
$btn.onclick=function(){alert('输出当前元素id：'this.id);}
删除DOM0事件处理程序，只要将对应事件属性置为null即可：
btn.onclick = null；
DOM2：（函数绑定，兼容性不好）
采用addEventListener来注册事件，支持 事件流 的捕获过程和冒泡过程（注册事件的时候第三个参数控制）
只有一个监听方法，添加事件处理程序：addEventListener()，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
移除事件处理程序：removeEventListener()，不能移除匿名添加的函数。
它们都有三个参数：
第一个参数是事件名（如click）；
第二个参数是事件处理程序函数；
第三个参数表示 是否在捕获时执行事件处理函数 ，默认为false表示在冒泡阶段调用。
和DOM0级事件的绑定一样，这种方式也是依附在元素的作用域执行，因此this保存的同样是当前元素对象的引用。
注：
a)??eventName的值均不含on，如注册鼠标点击事件eventName为click
b)??给EventListener传递一个（普通或者箭头）函数，则处理函数中的this指的是指当前dom元素；如果传递函数的引用，则this指全局对象，除非通过bind调用想要访问对应作用域对象：
element.addEventListener('click', this.onclick2.bind(this) ,false);
c)??通过addEventListener添加的事件处理程序，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。
d)IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现，这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡阶段触发句柄，所以attachEvent添加的事件都会被添加到冒泡阶段，并且要在事件前面加on（例如onclick）
document.getElementById("myTest").attachEvent("onclick", function(){alert(1)});
//等价于
document.getElementById("myTest").addEventListener("click", function(){alert(1)}, false);
只有DOM2级包含事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段
span
? ? a/a
/span
点击a后capturing(捕捉)阶段事件传播会从document- span-a，然后发生在a，最后bubbling(冒泡)阶段事件传播会从a-span-document 。
区别：
如果定义了两个dom0级事件，dom0级事件会覆盖；dom2不会覆盖，会依次执行
dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖
dom2提供了一种更精细的手段控制listener的触发阶段（即可以选择捕获或者冒泡）
DOM3事件
DOM3级事件规定了一下几种事件：
UI事件，当用户与页面上的元素交互时触发；
焦点事件，当元素获得或者失去焦点时触发；
鼠标事件，当用户通过鼠标在页面上执行操作时触发；
滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
文本事件，当在文档中，输入文本时触发；
键盘事件，当用户通过键盘在页面上执行操作时触发；
合成事件，当为IME（Input Method Editor，输入法编辑器）输入字符时触发；
变动事件，当底层Dom结构发生变化时触发；
DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件，也添加了一些新事件。包括IE9在内的主流浏览器都支持DOM2级事件，IE9也支持DOM3级事件。
DOM中的事件模拟（自定义事件）
DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建自定义事件可以由createEvent("CustomEvent")
返回的对象有一个initCustomEvent（）方法接收如下四个参数
1）type：字符串，触发的事件类型，自定义，例如 “keyDown”，“selectedChange”;
2）bubble（布尔值）：标示事件是否应该冒泡；
3）cancelable(布尔值)：标示事件是否可以取消；
4）detail（对象）：任意值，保存在event对象的detail属性中；
可以像分配其他事件一样在DOM中分派创建的自定义事件对象，如：
var??div = document.getElementById("myDiv");
EventUtil.addEventHandler(div,"myEvent", function () {
????alert("div myEvent!");
});
EventUtil.addEventHandler(document,"myEvent",function(){
????alert("document myEvent!");
});
if(document.implementation.hasFeature("CustomEvents","3.0")){
????var e = document.createEvent("CustomEvent");
????e.initCustomEvent("myEvent",true,false,"hello world!");
????div.dispatchEvent(e);
}
这个例子中创建了一个冒泡事件myEvent，event.detail的值被设置成了一个简单的字符串，然后在div和document上侦听该事件。因为在initCustomEvent中设置了事件冒泡，所以当div激发该事件时，浏览器会将该事件冒泡到document。
写一个行内onclick，行外赋值onclick，和evenrlistener，怎么输出？
为什么一般在冒泡阶段，而不是在捕获阶段注册监听??
js 判断是否存有事件 addeventlistener
原生实现无法判断是否有事件。如果确实需要请参照以下代码，另外本代码只使用于调用dom2形式加载或者移除事件功能，对应dom0类型的没有做测试。
以下代码修改了原生的Element对象，是否需要这样做，请自己酌情处理。
!DOCTYPE?html
html
head?lang="en"
????meta?charset="UTF-8"
????title/title
????script?type="text/javascript"
????????/**
?????????*?此处代码必须放到任何javascript代码之前。另外增加事件只能用addEventListener形式。
?????????*/
????????(function()?{
????????????Element.prototype.eventListenerList?=?{};
????????????Element.prototype._addEventListener?=?Element.prototype.addEventListener;
????????????Element.prototype._removeEventListener?=?Element.prototype.removeEventListener;
????????????Element.prototype.addEventListener?=?function(a,b,c)?{
????????????????this._addEventListener(a,b,c);
????????????????if(!this.eventListenerList[a])?this.eventListenerList[a]?=?[];
????????????????this.eventListenerList[a].push(b);
????????????};
????????????Element.prototype.removeEventListener?=?function(a,b,c){
????????????????this._removeEventListener(a,?b,c);
????????????????if(this.eventListenerList[a]){
????????????????????var?arr?=?this.eventListenerList[a];
????????????????????for(var?i?=0;iarr.length;i++){
????????????????????????if(arr[i].toString()?===?b.toString()){
????????????????????????????this.eventListenerList[a].splice(i,1);
????????????????????????}
????????????????????}
????????????????}
????????????}
????????})();
????????//此后为测试代码。
????????window.onload?=?function(){
????????????var?dom?=?document.getElementById("test");
????????????//增加三个监听
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function");
????????????},false);
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function2");
????????????},false);
????????????dom.addEventListener("click",function(){
????????????????console.info("click?function3");
????????????},false);
?
????????????console.log(dom.eventListenerList["click"].length);
????????????//读出监听的方法
????????????var?clicks?=?dom.eventListenerList.click;
????????????if(clicks)?clicks.forEach(function(f)?{
????????????????console.log("I?listen?to?this?function:?"+f.toString());
????????????});
????????????//删除监听
????????????dom.removeEventListener("click",function(){
????????????????console.info("click?function");
????????????},false);
?????????????
????????????console.log(dom.eventListenerList["click"].length);
????????};
????/script
/head
body
????button?id="test"?测试/button
/body
/html
捕获和冒泡
捕获：从外向内
冒泡：从内向外
在一个事件发生时，捕获过程跟冒泡过程总是先后发生，跟你是否监听毫无关联，先捕获后冒泡。
addEventListener有三个参数：
当我们实际监听事件时，默认使用冒泡模式，当开发组件时，需要通过父元素控制子元素的行为，可以使用捕获机制。
如果没有加event.stopPropagation()的话，执行顺序应该是：
捕获阶段：body
捕获阶段：button
冒泡阶段：button
冒泡阶段：body
但是在捕获阶段的body层事件处理方法内增加了event.stopPropagation()的话，执行顺序就变成了：
捕获阶段：body
由此可得，在上面正常执行顺序的任意一层，增加event.stopPropagation()，那么原本跟在它后面执行的事件都会被阻止
因为事件执行到了捕获阶段body层后，被阻止了，该事件不会再向内或向外执行。