Javascript事件模型
1、事件流：
事件冒泡：
主要是IE浏览器用于解决事件流的技术，就是重事件源的事件被触发
它就会向自己的父节点一层层的去触发事件。
事件捕获：
是Netscape用于解决事件流的技术，就是从父节点向子节点去触发事件。
DOM事件流：
是FireFox用于解决事件流的技术，既有事件冒泡和事件捕获。
2、事件处理程序：
1.传统事件：
一个事件源只能绑定一个函数。它的兼容性比较强如果绑定多个那么后面的函数就会将前面的函数覆盖掉。
2.现代事件：
一个事件源可以绑定多个函数，函数是重后往前面执行的兼容性比较差，有些浏览器不支持。
2.1 IE浏览器
attchEvent("事件名称",函数名) 添加事件
detachEvent("事件名称",函数名) 删除事件
两个方法接收两个参数
2.2DOM
addEventListener("事件名称",函数名,true or false) 添加事件
removeEventListener("事件名称",函数名,true or false) 删除事件
2.3解决兼容性问题
var fnClick1=function(){
alert("点我");
}
var fnClick2=function(){
alert("再点我");}
var oDiv=document.getElementById("div1");
if(document.addEventListener){//DOM
oDiv.addEventListener("click",fnClick1,true);
oDiv.addEventListener("click",fnClick2,true);
}
else if(document.attachEvent){//IE
oDiv.attachEvent("click",fnClick1);
oDiv.attachEvent("click",fnClick2);
}
2.4事件处理程序返回值
|
事件处理程序 |
返回false值效果 |
|
click |
单选按钮和复选框取消设置。对于submit按钮，表单提交被取消。对于reset按钮，表单不被重置。对于链接，不装载链接目标。 |
|
dragdrop |
取消拖拽 |
|
keydown |
在用户按住键不放时，取消随后的keypress事件 |
|
keypress |
取消keypress事件 |
|
mousedown |
取消默认行为（拖得开始，选择的开始，解除链接） |
|
mouseover |
导致对window的status或defaultStatus属性的改变被浏览器忽略 |
|
submit |
取消表单提交 |
3、event对象
event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。
IE浏览器的event对象属性和方法：
|
属性/方法 |
类型 |
是否可读写 |
描述 |
|
altkey |
boolean |
读写 |
指示是否按下alt键 |
|
button |
Integer |
读写 |
鼠标事件发生时候按下的鼠标按钮 0-没有按鼠标按钮 1-按了鼠标左按钮 2-按了鼠标右按钮 3-同时按下鼠标左右按钮 4-按了鼠标中间按钮 5-同时按下鼠标左按钮和中间按钮 6-同时按下鼠标右按钮和中间按钮 7-同时按下鼠标左、中、右三个按钮 |
|
cancelBubble |
boolean |
读写 |
将其设置为true可以取消事件冒泡 |
|
clientX clientY |
Integer |
读写 |
事件发生时，鼠标指针在客户区（不包括工具栏、滚动条等）的X坐标，Y坐标 |
|
ctrlkey |
boolean |
读写 |
指示是否按下ctrl键 |
|
fromElement |
element |
读写 |
在鼠标事件中鼠标移出的元素 |
|
keyCode |
Integer |
读写 |
对于keypress事件，指示按下的键的unicode字符； 对于keydown/keyup事件，指示按下的键盘是数字表示器 |
|
offsetX offsetY |
Integer |
读写 |
鼠标指针相对于引发的对象的X坐标，Y坐标 |
|
repeat |
boolean |
读 |
如果keydown事件被重复触发，值等于true否则false |
|
returnValue |
boolean |
读写 |
值为false时，取消事件的默认行为 |
|
screenX screenY |
Integer |
读写 |
鼠标指针相对于计算机屏幕的X坐标，Y坐标 |
|
shiftkey |
boolean |
读写 |
指示是否按下shift键 |
|
srcElenment |
element |
读写 |
导致事件发生的元素 |
|
toElement |
element |
读写 |
鼠标事件中，鼠标进入元素 |
|
type |
string |
读写 |
事件名称 |
|
x,y |
Integer |
读写 |
鼠标在相对于触发事件的元素的父元素X，Y坐标 |
DOM的event事件属性和方法：
|
属性/方法 |
类型 |
是否可读写 |
描述 |
|
altkey |
boolean |
读写 |
指示是否按下alt键 |
|
button |
Integer |
读 |
鼠标事件发生时候按下的鼠标按钮 0-没有按鼠标按钮 1-按了鼠标左按钮 2-按了鼠标右按钮 3-同时按下鼠标左右按钮 4-按了鼠标中间按钮 5-同时按下鼠标左按钮和中间按钮 6-同时按下鼠标右按钮和中间按钮 7-同时按下鼠标左、中、右三个按钮 |
|
cancelBubble |
boolean |
读写 |
指示事件冒泡是否已被取消 |
|
clientX clientY |
Integer |
读 |
事件发生时，鼠标指针在客户区（不包括工具栏、滚动条等）的X坐标，Y坐标 |
|
ctrlkey |
boolean |
读 |
指示是否按下ctrl键 |
|
keyCode |
Integer |
读写 |
指示按下的键盘的数字表示器 |
|
screenX screenY |
Integer |
读 |
鼠标指针相对于计算机屏幕的X坐标，Y坐标 |
|
shiftkey |
boolean |
读 |
指示是否按下shift键 |
|
type |
string |
读 |
事件名称 |
|
Bubbles |
boolean |
读 |
指示事件是否冒泡 |
|
cancellable |
boolean |
读 |
指示事件是否可以取消 |
|
charCode |
Integer |
读 |
被按下的键的unicode字符值 |
|
currentTarget |
element |
读 |
当前事件目标所在的元素 |
|
detail |
Integer |
读 |
鼠标按钮被点击的次数 |
|
eventPhase |
Integer |
读 |
事件的阶段：其值为 0-捕获节点 1-在目标上 2-冒泡阶段 |
|
isChar |
boolean |
读 |
指示被按下的键是否是一个字符 |
|
mateKey |
Integer |
读 |
指示是否按下META键 |
|
pageX,pageY |
Integer |
读 |
鼠标指针相对于页面的X坐标，Y坐标 |
|
preventDefault() |
function |
|
调用此方法可以阻止事件的默认行为 |
|
ralatedTarget |
element |
读 |
事件的下一个目标，经常用在鼠标事件中 |
|
stopPropagation() |
function |
|
调用该方法可以阻止事件的进一步传播（冒泡） |
|
target |
element |
读 |
触发的事件元素/对象 |
|
timeStamp |
long |
读 |
事件发生的时间 |
两种event事件对象的相同点：
1、获取事件类型
2、获取键盘代码（keydown/keyup事件）
3、检测shift、alt、ctrl
4、获取客户区坐标
5、获取屏幕坐标
不同点：
1、获取目标
IE：var oTarget=oEvent.srcElement；
DOM：var oTarget=oEvent.target；
2、获取字符码
3、阻止事件的默认行为
document.body.oncontextmenu=function(oEvent){
if (isIE){
oEvent=window.event;
oEvent.returnValue=false;
}else{
oEvent.preventDefault();
}
}
4、中止事件传播（冒泡）
4、鼠标事件：
onclick:鼠标单击时监听的事件
ondbclick: 鼠标双击时监听的事件
onmousedown: 鼠标按下时监听的事件
onmouseup: 鼠标弹起时监听的事件
onmousemove: 鼠标移动时监听的事件
onmouseout: 鼠标移出时监听的事件
onmouseover: 鼠标移进时监听的事件
5、键盘事件：
keydown:键盘按下一个键时的监听事件
keypress: 键盘按（按下并弹起）一个键时的监听事件
keyup: 键盘弹起一个键时的监听事件
事件属性：
keyCode属性
charCode属性（DOM）
Target（DOM）或srcElement（IE）属性
shiftKey、ctrlKey、altKey、metaKey（DOM）属性，按下将触发一个keyDown事件，并将相应的属性设置为true
6、HTML事件：
load:所有的东西全部被加载后触发的事件
unload：所有对象呗卸载后触发事件
abort:阻止安全装在
error:当页面发生错误时触发的一个事件
select:当文本框获得焦点时选中文本框中所有的数据
change:当下拉框中的数据发生改变时触发的事件
scroll:当页面中的滚动条发生滚动时 触发的事件
focus:让文本框获得焦点
blur: 让文本框失去焦点