javascript事件的那些事
javascript语言中的事件是javascript的一个重要组成部分，所以清楚的了解javascript的事件是非常重要的。
js事件添加的方法
obj.addEventListen('event',function(){
// 代码部分
})
//on+事件名称
obj.onclick = function(){
// 代码部分
}
JS事件对象常用属性
给对象添加js事件后，我们在回调函数里面可以访问event对象，可以看到事件对象的所有属性和方法。
// 这儿以click事件作为例子来讲解
obj.onclick = function(event){
//由于IE9以下不支持参数event，为做到兼容
var event = event || window.event;
// 打印event对象的熟悉和方法
console.log(event);
}
js的事件对象中常用的属性：target、type、bubbles（是否支持冒泡）、timestamp（事件执行事件）、pageX、pageY、clientX、clientY、screenX、screenY
// target：执行事件的对象，IE的话使用srcElement var target = event.target || event.srcElement; // type: 事件的类型 var type = event.type // bubbles:是否支持冒泡，值一般为bool var bubbles = event.bubbles // timestamp:事件执行的事件 var times = event.timestamp // pageX / pageY 事件触发时鼠标距离文档（也就是body标签内容）的左距离 / 上距离 // 这儿IE又存在兼容问题，一般会使用clientX / clientY - scrollLeft / scrollTop 来表示 // scrollLeft / scrollTop 也会存在兼容性问题，后面讲到js动画要素的三大系列会讲到 var pageX = event.pageX || event.clientX - document.body.scrollLeft; var pageY = event.pageY || event.clientY - document.body.scrollTop; // clientX / clientY 事件触发时鼠标距离浏览器窗口左上角的横/纵方向上面的距离 var x = event.clientX; var y = event.clientY; // screenX /screenY 事件触发时鼠标距离屏幕窗口左上角的横/纵方向上面的距离 var x = event.screenX; var y = event.screenY;
js的事件对象中我们常用的方法：stopPropagation()
obj.onclick = function(event){
var event = event || window.event;
// 阻止事件的冒泡
event.stopPropagation();
}
js事件传播阶段
事件传播的三个阶段是：捕获、冒泡和目标。捕获阶段事件从最上一级标签开始往下查找，直到捕获到事件目标(target)；冒泡阶段事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
js事件的冒泡
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
冒泡顺序：
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
阻止冒泡：由于存在冒泡机制，事件执行时可能发生我们意想不到的事情，当不需要默认的冒泡机制时，我们可以选择手动阻止冒泡
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true
兼容代码如下：
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
我们知道js事件存在冒泡机制，但不是所有的事件都会冒泡，我们常用的js事件中也存在不冒泡的事件：focus、blur、unload、load、mouseenter、mouseleave。
javascript事件委托
上面讲到事件冒泡的时候，好像没发现事件冒泡机制有什么意义，好像先事件的时候都在阻止事件冒泡。下面我从一个小案例上讲事件冒泡的意义，事件委托就是通过事件冒泡完成的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委托</title>
</head>
<body>
<button>新增LI</button>
<ul>
<li>本地li</li>
<li>本地li</li>
<li>本地li</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
var liArr = ul.children;
var btn = document.getElementsByTagName('button')[0];
for (var i = 0; i < liArr.length; i++) {
liArr[i].onclick = function(){
console.log('this is li');
}
}
btn.onclick = function(){
var newLi = document.createElement('li');
newLi.innerHTML = "我是新增的li";
ul.appendChild(newLi);
}
</script>
</body>
</html>
执行上面的代码我们会发现，新增加的li上面是不能绑定点击事件的，这就是js事件弊端。这时候我们可以通过冒泡机制，给父元素绑定事件，判断事件的target是不是为li，是的话就执行事件。
<script>
var ul = document.getElementsByTagName('ul')[0];
var liArr = ul.children;
for (var i = 0; i < liArr.length; i++) {
ul.onclick = function(event){
var event = event || window.event;
// 兼容性
var target = event.target || event.srcElement;
if(target === 'Li'){
console.log('I am li')
}
}
}
var newLi = document.createElement('li');
ul.appendChild(newli);
</script>
上面是我在学习js的事件中遇到的一些难点，也都是我们学完后自己的领悟。
浙公网安备 33010602011771号