<!DOCTYPE html>
<html οnclick="alert('冒泡test4')">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>dom事件流模型测试(IE)</title>
</head>
<script>
window.addEventListener("冒泡click",function(){
alert("test5");
});
/*
//按下键后会一直执行
window.addEventListener("keydown",function(e){
console.log("======"+e.keyCode);
});
*/
window.addEventListener("keypress",function(e){
console.log(e.type+"======"+e.keyCode+"--"+e.charCode);
var div=document.getElementById("fj");
//style属性可以获得html标签的样式,但是不能获取非行间样式,获取行间样式。
//moz:getComputedStyle(div,false)[attr]
//IE: currentStyle[attr]
//
var top=div.style.top,
cTop=div.currentStyle?parseInt(div.currentStyle["top"]):parseInt(getComputedStyle(div,true)["top"]),
cLeft=div.currentStyle?parseInt(div.currentStyle["left"]):parseInt(getComputedStyle(div,true)["left"]),
v= 1,
left=div.style.left;
switch(e.charCode){
case 119://W 上
if(div.currentStyle){
div.style.top=(parseInt(div.currentStyle["top"])-v)+"px";
}else{
div.style.top=(parseInt(getComputedStyle(div,false)["top"])-v)+"px";
}
console.log(top+"---------sss------------"+cTop);
// top= (cTop- v) + "px";
break;
case 115://s 下
if(div.currentStyle){
div.style.top=(parseInt(div.currentStyle["top"])+v)+"px";
}else{
div.style.top=(parseInt(getComputedStyle(div,false)["top"])+v)+"px";
}
break;
case 97://A左
if(div.currentStyle){
div.style.left=(parseInt(div.currentStyle["left"])-v)+"px";
}else{
div.style.left=(parseInt(getComputedStyle(div,false)["left"])-v)+"px";
}
break;
case 100://D 右
if(div.currentStyle){
div.style.left=(parseInt(div.currentStyle["left"])+v)+"px";
}else{
div.style.left=(parseInt(getComputedStyle(div,false)["left"])+v)+"px";
}
break;
}
});
window.addEventListener("keyup",function(e){ //释放按键时一直触发
console.log(e.type+"======"+e.keyCode);
var div=document.getElementById("fj");
var zd=document.createElement("div");
zd.style.background="#FF0000";
zd.style.width="5px";
zd.style.height="5px";
zd.style.position="absolute";
var content=document.getElementById("content");
if(e.keyCode==76){//L
if(div.currentStyle){
zd.style.left=(parseInt(div.currentStyle["left"])+10)+"px";
zd.style.top=(parseInt(div.currentStyle["top"])-20)+"px";
}else{
zd.style.top=(parseInt(getComputedStyle(div,false)["top"])-20)+"px";
zd.style.left=(parseInt(getComputedStyle(div,false)["left"])+10)+"px";
}
console.log(zd.style.top+"||"+zd.style.left);
content.appendChild(zd);
setInterval(function(){
if(parseInt(getComputedStyle(zd,false)["top"])==0){
clearInterval();
//content.removeChild();
}else{
zd.style.top=(parseInt(getComputedStyle(zd,false)["top"])-2)+"px";
}
},100)
}
});
/**
* Dom事件流标准包含:事件冒泡和事件捕获
* 事件流:不仅一个甚至多个元素响应同一事件。
* 事件冒泡:<源于IE>
* 最特定的事件目标(DOM:text)----->最不特定的目标(IE4:document,DOM:window)顺序触发;
* 事件捕获:<源于Mozille>
* 最不精确的(Mozille:window,DOM:window)----------->最精确的目标(DOM:text)顺序触发;
* (不会讲很多的元素暴露给事件)
* 事件冒泡模型:
*
* test5(window)------|
* ^ |
* | |
* 冒泡 test4(html<document>) <-| 捕获
* ^ |
* | |
* test3(body)<--|
* ^ |
* | |
* test2(parent_div)<-|
* ^ |
* | |
*(点击test的div) test(div) <---------|
*
* --------------
* 事件注册方法:|
* -------------
* 1 html 默认的是冒泡
* 2 js
* DOM:
* ----注册事件-----
* 参数: evnetName:string 事件名
* fn:function 事件处理回调函数,参数event对象
* useCapture:boolean false:不用捕获用冒泡 ,true :用捕获不用冒泡
* ele.addEventListener(eventName,fn,useCapture);
* ----移除事件-----
* 参数:同注册事件
* ele.removeEventListener(eventName,fn,useCapture)
*
* IE:
* ----注册事件----- (只有冒泡)
* 参数: evnetName:string 事件名
* fnHandler:function 事件处理回调函数,参数event对象
* ele.attachEvent(eventName,fnHandler);
* ----移除事件-----
* 参数:同注册事件
* ele.detachEvent(eventName,fnHandler)
* //一个元素一个事件绑定多个处理函数顺序执行
*
* //阻止事件冒泡的方法:
*
* ----------
* 事件对象 -|
* ----------
* 事件对象:捕获事件的信息。
* 包含信息:
* 1--引起事件的对象
* 2--事件发生时鼠标的信息
* 3--事件发生时键盘的信息
* 时空(生命期和作用域):
* 1--创建,只能在事件发生时创建
* 2--销毁,事件处理函数执行完毕后销毁
* 3--作用域,只有事件处理函数才能访问
* IE和DOM事件对象的异同:
* 相同点:
* 1 获取事件类型:oEvent.type
* 2 获取按键代码(keydown/keyup):oEvent.keyCode
* keyCode总包含代表按下按键的一个代码,他可能是一个字符,也可能不是。
* 3 检测shift、alt、ctrl键:
* 检测是否被按下:boolean
* oEvent.shiftKey;
* oEvent.altKey;
* oEvent.ctrlKey;
* 4 获取客户端座标:
* 在鼠标事件中,可用clientX和clientY属性获取鼠标指针在客户端区域的位置。
* oEvent.clientX;
* oEvent.clientY;
* 5 获取屏幕座标:
* 鼠标事件中,可以用screenX和clientY属性获取鼠标指针在计算机屏幕中的位置。
* oEvent.screenX;
* oEvent.clientY;
* 不同点:
* 1 获取目标 :
* IE:oEvent.srcElement;
* DOM:oEvent.target;
* 2 获取字符代码 :
* IE:oEvent.keyCode;//返回字符代码的Unicode值
* DOM: oEvent.keyCode;//获取实际的字符
* String.fromChatCode(oEvent.charCode);//获取实际的字符
* 如果不确定是否包含字符:
* if(oEvent.isChar){//判断
*
* }
* 3 阻止某个事件的默认行为 :
* IE:oEvent.returnValue=false; I
* Mozilla:oEvent.preventDefault();
* eg.1 右键阻止使用上下文菜单:
* document.body.οncοntextmenu=function(){
* if(isIE){
* oEvent=window.event;
* oEvent.returnValue=false;
* }else{
* oEvent.preventDefault();
* }
* }
* 4 停止事件复制(冒泡):
* 阻止事件进一步冒泡
* IE:oEvent.cancelBubble=true;
* moz:oEvent.stopPropagation();I
*
* ----------
* 事件类型 |
* ----------
* 鼠标事件:
* 事件:
* click
* dbclick
* mouseDown
* mouseout
* mouseover
* mouseup
* mousemove
* 属性:
* 座标属性-
* type属性-
* target(DOM)或srcElement(IE)属性-
* shiftkey、ctrlkey、aletKey和metaKey(DOM)属性
* button属性(只有在mousedown / mouseover/mouseout/mouseove/mouseup)
* 事件顺序:
* mousedown-->mouseup-->click-->mousedown-->mouseup-->click-->dbclick
* 键盘事件:
* 事件:
* keydown :按下某键时发生。一直按着,就会不断触发
* keypress:按下某键,并上升一个字符时发生(也不管类似shift的键)。
* 一直按会持续发生。
* keyup:释放按键时发生。
* 属性:
* keyCode属性-
* charCode属性(仅DOM)-
* target(DOM)或者srcElement(IE)属性-
* shiftKy ctrlKey altKey metaKey(DOM)属性-
* 顺序:
* keydown->keypress->keyup
* //如果用户按一次某非字符按键(例如 shift)
* keydown->keyup
* //如果按着字符键且不放,keydown和keypress事件将诸葛持续触发,知道松开。
* Html事件:
* load:页面完全加载后,在window对象上触发。所有的框架都载入后,
* 在框架集上触发;<img/>完全载入后触发;<object/>元素,
* 当其完全载入后在其上触发。
* unload:完全卸载后触发。
* abort:用户停止下载过程时,如果<object/>对象还未完全载入,就在其上触发。
* error:js脚本出错时,在window对象上触发;<img/>无法载入触发,
* <object/>元素无法载入,框架集中一个或多个无法载入时触发。
* select:
* 用户选择了文本框中的一个或多个字符时触发(<input>/<textarea>)
* change:
* <input/>或<textarea/>失去焦点时并且获取焦点后内容发生改变
* 时触发。<select/>元素的值发生改变时触发。
* submit :<input type='submit'/>点击时,在<from/>上触发。
* reset :<input type='reset'/>
* resize: 窗口或者框架的大小发生改变时触发。
* scroll:用户在任何带滚动条的元素上卷动它时触发。<body/>元素
* 包含载入页面的滚动条。
* focus: 任何元素或者窗口本身获取焦点时(用户点击它、Tab键切换到
* 它或者任何其他与它交互的手段)触发。
* blur:任何元素或者窗口本身失去焦点时
* 突变事件(DOM标准的一部分,但是目前没有主流浏览器实现):
*
*/
</script>
<body οnclick="alert('冒泡test3')">
<div οnclick="alert('冒泡test2')">
<div οnclick="alert('冒泡test');">冒泡test</div>
</div>
<div id="test1">
<div id="test">捕获test</div>
</div>
<script>
document.getElementById("test").addEventListener("click",function(e){
alert("捕获test");
},true);
document.getElementById("test").addEventListener("click",function(e){
alert("冒泡test");
},false);
document.getElementById("test1").addEventListener("click",function(e){
alert("捕获test1");
},true);
</script>
<div style="width:200px;height:200px;border: 2px #ff0000 solid" id="content">
<div id="fj" style="position: absolute;top:200px;left:90px;background:#1dc116;height: 20px;width: 20px; ">
</div>
</div>
</body>
</html>
例子:
http://www.oschina.net/question/54100_25614