js事件学习心得

事件处理程序

var EventUtil = {
addFunction:function(element,type,functionName){
if(element.addEventListener){
element.addEventListener(type,functionName,false);//ie9之前不支持
}else if(element.attachEvent){
element.attachEvent("on"+type,functionName);}//支持ie
else{
element["on"+type] = functionName;//旧式浏览器一般用不到，每个事件只支持一个事件处理程序
}
},
removeFunction:function(element,type,functionName){
if(element.removeEventListener){
element.removeEventListener(type,functionName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,functionName);}
else{
element["on"+type] = null;
}
}
};
function getBtn(){
alert("hello");
}
var btn = document.getElementById("btn1");
EventUtil.addFunction(btn,"click",getBtn);

*this有差别： *

addEventListener事件处理程序在元素的作用域中运行，this引用该当前元素；

attachEvent在全局环境中运行，this等于window。

跨浏览器的事件对象

var EventUtil = {
addFunction:function(element,type,functionName){
if(element.addEventListener){
element.addEventListener(type,functionName,false);//ie9之前不支持
}else if(element.attachEvent){
element.attachEvent("on"+type,functionName);}//支持ie
else{
element["on"+type] = functionName;//旧式浏览器一般用不到
}
},
removeFunction:function(element,type,functionName){
if(element.removeEventListener){
element.removeEventListener(type,functionName,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,functionName);}
else{
element["on"+type] = null;
}
},
getEvent:function(event){
return event ? event : 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;
}
}
};
function getBtn(){
alert("hello");
}
var btn = document.getElementById("btn1");
btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
console.log(target);
alert(target);
};

事件冒泡及应用

一、什么是事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

二、事件冒泡有什么作用

（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。

注意：不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

三、阻止事件冒泡

【不想激活的事件被激活例子】

<div id="div-outside" class="outside">
<div id="div-inside" class="inside">内层的div</div>
</div>

var divOutside = document.getElementById("div-outside");
var divInside = document.getElementById("div-inside");
divOutside.addEventListener("click",function(){
alert("外层的div被点击了");
},false);
divInside.addEventListener("click",function(event){
alert("里面的div被点击了");
},false);

在上面函数中添加一下代码，可以阻止事件冒泡

divInside.addEventListener("click",function(event){
event = event ||window.event;
event.stopPropagation();
alert("里面的div被点击了");
},false);

function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble = true;
}
};//阻止事件冒泡后，里层div只弹一次对话框了

事件委托

事件处理程序过多的解决方法——事件委托，即利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如“click”事件会一直冒泡到document层次，我们就可以为整个页面指定一个click事件，而不必给每个可单击元素添加事件处理程序。

<ul id="mymenu">
<li id="menu1">11111111111</li>
<li id="menu2">22222222222</li>
<li id="menu3">33333333333</li>
</ul>

var list = document.getElementById("mymenu");
EventUtil.addFunction(list,"click",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "menu1":
alert("列表1");
break;
case "menu2":
alert("列表2");
break;
case "menu3":
alert("列表3");
break;
}
});

表单操作

让表单第一个输入框获得焦点

window.addEventListener("load",function(){
document.forms[0].elements[2].focus();
document.forms[0].elements[1].disabled=true;//禁用当前字段
},false);

【避免重复递交表格–监听submit事件】

var form1 = document.getElementById("form1");
form1.addEventListener("submit",function(event){
event = event ||window.event;
var target = event.target || event.srcElement;
var btn = target.elements["submit-btn"];
btn.disabled = true;
console.log(btn);
},false);