事件处理程序
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);