您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript学习笔记-事件绑定及深入
发布时间：2018-04-05 18:15:22编辑：雪饮阅读（）
传统事件绑定的缺陷(多绑定的覆盖问题)
由于实际项目开发中可能一个js由多个人编写，所以有可能会导致多绑定覆盖的问题
window.onload=function(){
alert("雪饮");
};
window.onload=function(){
alert("杜敏捷");
}
事件多绑定造成的覆盖问题的解决
window.onload=function(){
alert("雪饮");
};
if(typeof window.onload == 'function'){
var saved=window.onload;
}
window.onload=function(){
saved();
alert("杜敏捷");
}
w3c提供的事件添加方法可实现多事件的绑定（ie不支持）
第一个参数传入待绑定事件，第二个参数传入待绑定的函数，第三个函数决定该绑定是否冒泡，false为冒泡，true为捕获。
事件绑定中的匿名函数中this指向被绑定的元素
window.addEventListener('load',function(){alert("杜敏捷")},false);
window.addEventListener('load',function(){alert("雪饮")},false);
w3c提供的事件移除(ie不支持)
window.removeEventListener('load',aa,false);
ie提供的多事件绑定
IE 不支持捕获，只支持冒泡
添加多个相同的函数名则不会只使用一个，而是全部使用。
事件绑定中的匿名函数中this不指向被绑定的元素
window.attachEvent('onload',function(){
alert('杜敏捷');
});
window.attachEvent('onload',function(){
alert('雪饮');
})
另外传统的方法绑定事件则无法获取事件对象，而提供的这个方法却可以
window.attachEvent('onload',function(){
var box=document.getElementById("box");
/*
box.onclick=function(evt){alert(evt);};
*/
box.attachEvent('onclick',function(evt){alert(evt);});
});
ie提供的事件移除
window.detachEvent('onload',aa);
获取mouseover来源(ie不支持)
比如之前在div标签上，而我们给span标签绑定了获取mouserover来源的方法，那么当鼠标从div上移入span中则获取的来源为该div，当然移动过程中是会经过好多个元素，而获取来源则是获取的到目标元素最近的并且在来源路径中的元素
window.onload=function(){
var sp=document.getElementById("sp");
sp.addEventListener('mouseover',function(evt){
alert(evt.relatedTarget);
});
}
获取mouseout移出路径最近的元素(ie不支持)
和mouserover获取来源相反，这个则是从元素本身移出时候所经过路径中的最近的元素的获取
window.onload=function(){
var sp=document.getElementById("sp");
sp.addEventListener('mouseout',function(evt){
alert(evt.relatedTarget);
});
}
获取mouserover来源(ie支持)
window.onload=function(){
var sp=document.getElementById("sp");
sp.attachEvent('onmouseover',function(){
alert(window.event.fromElement);
});
}
获取mouseout移出路径最近的元素(ie支持)
window.onload=function(){
var sp=document.getElementById("sp");
sp.attachEvent('onmouseout',function(){
alert(window.event.toElement);
});
}
阻止默认行为
a标签一般只要点击就会进入其href的地址，这里可以阻止其默认的这种行为
var a=document.getElementById("a");
a.onclick=function(){return false;}
这种通过return false的方法不能使用于多事件绑定
w3c提供的阻止默认行为(ie不支持)
var a=document.getElementById("a");
a.addEventListener('click',function(evt){
evt.preventDefault();
},false);
ie提供的阻止默认行为
var a=document.getElementById("a");
a.attachEvent('onclick',function(){
window.event.returnValue = false;
});
利用contextmenu制作自定义鼠标右键菜单(上下文菜单)
<script>
window.onload=function(){
var text=document.getElementById("text");
var menu=document.getElementById("menu");
text.addEventListener('contextmenu',function(evt){
evt.preventDefault();
menu.style.left=evt.clientX+'px';
menu.style.top=evt.clientY+'px';
menu.style.display="block";
},false);
}
</script>
<style>
#menu{
width:200px;
height:150px;
background:pink;
display:none;
position:absolute;
}
</style>
<textarea id="text"></textarea>
<ul id="menu">
<li>菜单项目1</li>
<li>菜单项目2</li>
<li>菜单项目3</li>
</ul>
获取刷新或离开当前页面的提示(火狐支持)
window.onload=function(){
window.addEventListener('beforeunload',function(evt){
evt.preventDefault();
},false);
}
获取刷新或离开当前页面的提示(ie支持)
这里需要注意的是在停止默认事件的时候若直接设置为false则会弹出false，所以这里需要将停止默认事件的返回值设置为你的自定义信息。
window.onload=function(){
window.attachEvent('onbeforeunload',function(){
//window.event.returnValue = false;
window.event.returnValue='你真的要离开吗';
});
获取鼠标滚轮滚动值(谷歌支持)
window.onload=function(){
window.addEventListener('mousewheel',function(evt){
alert(evt.wheelDelta);
},false);
}
}
获取鼠标滚轮滚动值(火狐支持)
window.onload=function(){
window.addEventListener('DOMMouseScroll',function(evt){
alert(evt.detail);
},false);
}
获取鼠标滚轮滚动值(ie支持)
document.attachEvent('onmousewheel',function(){
alert(window.event.wheelDelta);
});
关键字词：javascript,事件,绑定