<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件</title>
</head>
<body>
1、事件冒泡：事件开始时由最具体的元素接受，逐级向上传播<br />
2、事件捕获：与冒泡相反，其用意在于时间到达预定目标之前捕获他<br />
大部分使用事件冒泡。<br />
DOM2级事件规定事件流：事件捕获阶段-->处于目标阶段-->事件冒泡阶段<br />
在Dom文档中：先由上到下（可以捕获）到达目标，再由下到上（做出响应）<br />
<form>
<input type="text" name="uesrname" /><br />
<input type="button" id="myBtn" value="cilck" onclick=""/><br />
</form>
<script type="text/javascript">
/*function message(){
with(document){//全局属性
with(this.form){//表单属性
with(this){
//本身属性
alert(this.value);
}
}
}
}*/
var btn = document.getElementById('myBtn');
btn.addEventListener("click",function(){
alert(this.id);
},false); //true-->捕獲階段。false-->冒泡階段
btn.addEventListener("click",function(){
alert("hello,world");
},true);//可以添加多個事件處理程序
//以上這種情況click的function()是匿名函數,不能用removeEventListener()移除
var handler = function(){
alert("clicked");
}
btn.addEventListener("click",handler,false);//可以用removeEventListener（）移除
btn.removeEventListener("click",handler);
//下面是IE中的方法
//添加
btn.attachEvent("onclick",function(){ //事件名字前要加on
alert("lalal");
});
//移除
btn.detachEvent("onclick",handler); //也不能移除匿名函數
</script>
</body>
</html>
<!--//跨瀏覽器事件處理程序-->
<script type="text/javascript">
//跨瀏覽器事件處理程序
var EventUtil = {
addHandler: function(element,type,handler){
if(element.addEventListener){ //判斷是否存在addEventListener方法(Dom方法)
element.addEventListener(type,handler,false);
} else if(element.attachEvent){ //判斷是否存在attachEvent方法（一般是IE）
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;
}
}
};
var btn = document.getElementById("myBtn");
var handler = function(){
alert("clicked!!!");
}
EventUtil.addHandler(btn,"click",handler);//調用
</script>
<!--
作者：1549303595@qq.com
时间：2017-02-27
描述：事件對象
-->
<script type="text/javascript">
//Dom中
btn.onclick = function(){
alert(event.type); //click
};
btn.addEventListener("click",function(event){
alert(event.type); //click
});
//事件對象有什麼用
btn.onclick = function(event){
//event.target;获取事件源
//event.preventDefault();取消默认行为，比如链接的跳转行为
//event.stopPropagation();阻断事件传播(冒泡與捕獲)
//还有一些不常用的
}
//IE中
btn.onclick = function(){
var event = window.event;
alert(event.type); //click
};
btn.attachEvent("onclick",function(event){
alert(event.type) //click
});
//事件對象有什麼用
btn.onclick = function(event){
window.event.cancelBubble //默認值是false，設置為true可取消事件冒泡，相當于stopPropagation()
window.event.returnValue //默認值是true，設置為false可取消默认行为，比如链接的跳转行为，相當於preventDefault()
window.event.srcElement //事件的目標，相當於target
}
//跨瀏覽器的事件對象
var EventUtil = {
addHandler: function(element,type,handler){},
getEvent: function(event){//返回对event对象的引用
return event ? event : window.event;
},
getTarget: function(event){//返回事件的目标
return event.target || event.srcElement;
},
preventDefault: function(event){//取消事件默认行为
if(event.preventDefault){//Dom中
event.preventDefault();
}else{
event.returnValue = false;//IE中
}
},
removeHandler: function (event){},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
}
</script>
<script type="text/javascript">
mouseover和mouseout 相关元素
Dom 对象中的relatedTarget属性提供了相关元素的信息.
var EventUtil = {
getRelatedTarget: function(){
if (event.relatedTarget) {//dom
return event.relatedTarget;
} else if(event.toElement) {//IE
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
}
</script>
浙公网安备 33010602011771号