什么是事件：
事件是交互体验的核心功能
一．事件冒泡：
当一个事件发生时，这个事件会从内向外逐层传递。
二．为什么会有事件冒泡：
因为该事件源本身可能没有处理该事件的能力，所以事件源会把事件交给父级处理
三．事件捕获：
事件捕获和事件冒泡正好是相反的顺序
标准浏览器：
1.Dom.addEventListener(‘click’,function(){},false);
为dom对象添加一个事件监听器 ，与直接绑定的方式不同 直接绑定的方式 绑定函数只执行一次
addEventListener()可以多次使用重复执行 这里添加的事件处理程序是在其依副的元素作用域中运行
第一个参数是事件类型，第二个参数是回调函数（即用来执行的代码），第三个参数默认为false，当改为true时，代表事件捕获；
2.Dom.removeEventListener('click',function(){});
为dom对象移除监听器，用addEventListener（）绑定的事件只能用removeEventListener（）解除
removeEventListener（）第一个参数是事件类型，第二个是要移除的回调函数
IE浏览器：
dom.attachEvent(‘onclick’,function(){})
dom.detachEvent(‘onclick’,function(){})
在使用attachEvent()方法的情况下，事件处理程序在全局作用域下运行，其中的this等于window。并且用attachEvent（）添加的这些事件处理程序不是以添加他们的顺序执行，而是以相反的顺序触发
语句绑定的方式：
Btn.onclick=function(){…};//绑定
Btn.onckick-null;//解除绑定
eg：
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;
}
}
};
两种绑定事件的区别：
句柄绑定：当前this指向当前节点 支持事件冒泡 不能重复绑定 重复绑定会导致覆盖
监听器绑定：当前this指向当前元素 支持事件冒泡和捕获 可以重复多次进行事件绑定
ie事件绑定：当前this不指向当前元素 不支持事件捕获 可以重复多次进行事件绑定
三．currentTarget与target：
currentTarget等于this，target等于当前元素
例如：点击了button按钮 但是当按钮没有绑定点击事件时该事件便会冒泡到可以处理该事件的父级中（假定是body），那么此时currentTarget=this=body，target=button。
所以target指向触发事件的对象，currentTarget指向处理事件的对象
四．标准浏览器和IE浏览器的事件对象：
标准浏览器下事件对象是event,打印目标对象：event.target
IE浏览器下事件对象是window.event，打印目标对象：window.event.srcElement
五．阻止对象默认行为：
标准浏览器：event.preventDefault（）；
IE浏览器：window.event.returnValue=false;
六．阻止事件冒泡：
标准浏览器：event.stopPropagation();
IE浏览器：window.event.cancel.Bubble=true；
Eg：
varEventUtil = {
addHandler:function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}elseif(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);
}elseif(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else{
element["on" +type] =null;
}
},
getEvent:function(event) {
returnevent ? event : window.event;
},
getTarget:function(event) {
returnevent.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;
}
}
};
七．焦点事件：
blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持。
foucs：在元素获得焦点时触发，这个事件不会冒泡，所有浏览器都支持。
八．鼠标事件：
1.click事件：在用户单击鼠标按钮或者按下回车键触发；
2.dblclick事件：在用户双击鼠标按钮时被触发；
3.mousedown事件：在用户按下了任意鼠标按钮时被触发，mousedown的事件对象中有一个属性叫做button，这个属性的值是0的时候代表我们按下的是左键，1的时候代表按下的中键，2的时候代表按下的是右键。
4.mouseenter事件：在鼠标光标从元素外部移动到元素范围之内被触发
5.mousemove事件：当鼠标指针在元素内部移动时重复地触发。
6.mouseout事件：用户将其移入另一个元素内被触发。
7.mouseover事件：鼠标指针在元素外部，用户将移入另一个元素的边界时触发，感觉和mouseenter事件类似；
8.mouseup事件：用户释放鼠标按钮时触发；
除了mouseenter和mouseleave，所有鼠标事件都会冒泡
所有的鼠标事件都有clientX和clientY，代表的是鼠标点击的位置，我们可以通过e.clientX和e.clentY来查看。
Eg：
拖拽事件的实现：
var div = document.getElementsByTagName('div')[0]
function drag(elem) {
var disX,
dixY;
addEvent(elem, 'mousedown', function (e) {
var event = e || window.event;
disX = event.clientX - parseInt(getStyle(elem, 'left'));
disY = event.clientY - parseInt(getStyle(elem, 'top'));
addEvent(document, 'mousemove', mouseMove);
addEvent(document, 'mouseup', mouseUp);
stopBubble(e);
cancelHandler(e);
});
function mouseMove(e) {
var event = e || window.event;
elem.style.left = event.clientX - disX + 'px';
elem.style.top = event.clientY - disY + 'px';
}
function mouseUp (e) {
removeEvent(document, 'mousemove', mouseMove);
removeEvent(document, 'mouseup', arguments.callee);
}
}
九．事件委托：
利用事件源对象和事件冒泡来处理的方式就叫做事件委托。
十．事件委托的优点：
1.性能不需要循环所有的子元素一个个绑定事件
2.灵活当有新的子元素被加入的时候不需要重新绑定事件
十一.键盘事件：
当用户按下键盘时键盘的触发顺序分别是keydown、keypress、keyup。
keydown和keypress：
1.相同点：
当用户按住键盘不放时两者会一直响应下去
keyCode和which每个方法都有，表示的是这个键的唯一标示，可以告诉浏览器我们按下的是键盘上的哪一个键，比如空格是32，32就代表空格。不过我们一般都用which，keyCode用的较少。
2.不同点：
keydown可以响应所有按键，keypress只响应字符按键（即有ascii码的按键）
keypress有charCode属性这个属性代表这个字符的ASCII码，配合SHIFT之类的按键可以直接获取大写字母等。
String上有一个方法叫做fromCharCode，可以接受一个Unicode值（包含ASCII值），然后返回对应的字符串，我们可以配合这个方法和charCode来直接获取输入的字符。
网友评论