js事件机制

事件

事件流：分为捕获阶段、处于目标阶段、冒泡阶段三个阶段

1. 事件冒泡：从触发的对象开始，事件不断往上传递。
2. 事件捕获：从dom树一直向下传递事件直到捕获为止。

事件绑定类型

1. dom0：通过element对象调用对应的事件属性绑定特定的事件，事件会在事件冒泡阶段被捕获。

   function(){// 由于onclick是attr，所以可以通过.来获取
       console.log(this.id);    //"myBtn" }; ```
   

2. dom2：通过addEventListener来绑定事件、removeEventListener来移除事件。指定第三个参数为false的话，事件也是在冒泡阶段被触发。IE9、Firefox、Safari、Chrome
   和 Opera 支持 DOM2 级事件处理程序。

   btn.addEventListener('click', function(event){
   	console.log(this.id);    //"myBtn" },false);
   btn.addEventListener("click", function(){// 添加多个回调,触发的时候依次调用
       alert("Hello world!"); }, false); ```
   

3. 对于ie8之前的可以使用attachEvent添加事件、detachEvent解除事件。

   btn.attachEvent("onclick", function(){// 事件类型必须是onclick，跟dom2不一样
       alert("Clicked"); }); ```
   
   

三者的区别

1、dom2、attachEvent可以为一个事件添加多个相应函数，彼此之间不会覆盖。dom0则不可以。
2、dom0的兼容性好，支持所有的浏览器。dom2不支持ie浏览器，所以对于ie浏览器事件处理使用attachEvent。由于IE只支持冒泡事件，所以attachEvent没有第三个参数
3、dom0在注销事件的时候，只要将对应的事件属性置为null即可。dom2调用removeEventListener函数的时候，参数要与addEventListener一样，也就是说，在addEventListener指定的函数的回调不能是一个匿名函数，不然在注销不到。因为两个函数对象是不一样的，虽然内容一样。

var btn = document.getElementById("myBtn");
var handler = function(){// 必须将回调函数显示声明
	alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);// 将函数的引用传递进removeEventListener中才能注销回调

对于attachEvent回调函数中的this对象是window，dom0的回调函数是当前捕获事件的对象。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
alert(this === window); //true
});

浏览器事件兼容性处理

var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
		} 
	},
	getEvent: function(event){
    	return event ? event : window.event;// ie中获取事件对象通过window.event
	},
	getTarget: function(event){
    	return event.target || event.srcElement;
	},
	preventDefault: function(event){
    	if (event.preventDefault){
			event.preventDefault();
		} else {
			event.returnValue = false;
		}
	},
	stopPropagation: function(event){
		if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
		}
	}
};

事件对象

如果将回调函数直接绑定到目标对象上，那么this、target、currentTarget都是一样的，都是目标对象

var btn = document.getElementById(“myBtn”);
btn.onclick = function(event){
console.log(event.currentTarget === this);
console.log(event.target === this);
};

如果是绑定到父级元素上，那么this 和 currentTarget 都等于父级元素，也即是回调函数被绑定的对象，target才是真正触发的对象。

document.body.onclick = function(event) {
console.log(event.currentTarget === document.body); // true
console.log(this === document.body); // true
console.log(event.target === document.getElementById(“myBtn”));// true
};

document加载事件回调
DOMContentLoaded：在dom树加载完成之后被触发，不等待css、js、img等下载
onload：等待页面的内容都加载完毕之后被触发
————————————————
原文链接：https://blog.csdn.net/sinat_20894673/article/details/88381471