后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套自己的规则(事件冒泡)
再后来,有个叫W3C的媒婆,想撮合这两个孩子,将他们的特点融合在了一起,这下,事件产生的顺序变成:
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”;
执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”。
接下来我会详细地列出各种事件,以供参考!
例:<input type="button" οnclick="method();" value="事件大全"/>
鼠标事件:
1.onclick 鼠标点击事件;多用在某个对象控制的范围内的鼠标点击;常用于按钮;
2.ondblclick 鼠标双击事件,多用于按钮
3.onmousedown 鼠标按下事件
4.onmouseup 鼠标按下再松开后触发的事件
5.onmouseover 鼠标覆盖该对象时,触发的事件
6.onmouseout 鼠标覆盖该对象,然后再离开该对象时,触发的事件
7.onmousemove 鼠标指针在该对象上,并且移动了,就触发事件
8.onContextMenu 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
由于onmousedown事件能响应鼠标右键点击。所以在页面上需要用到某一区域右键点击事件时,可以先禁用右键,然后用onmousedown事件实现。
如何区分按下的是左键还是右键?
onmousedown事件有个 event.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键
禁用右键代码:
<script type="text/javascript">
window.onload = function ()
{
var table = document.getElementById ('table1');
table.oncontextmenu = function ()
{
return false;
}
}
</script>
禁止复制代码(在body标签中添加): <body onselectstart="event.returnValue=false">
onmouseover 和 onmousemove 的区别:
onmouseover:鼠标指针覆盖在该对象上触发事件,只触发一次。鼠标指针离开该对象再重新覆盖时才能再次触发事件。
onmousemove:鼠标指针覆盖在该对象上并移动鼠标就触发事件,每一次移动都触发一次事件(不断触发)。onmousemove比较耗资源,特殊情况才用,一般用于监控鼠标坐标的变化。
键盘事件:
1.onkeypress键盘上的某个键被按下并且释放时触发的事件
2.onkeydown键盘上的某个键被按下时触发的事件
3.onkeyup当键盘上某个按键被按下然后放开时,触发的事件
onkeypress,onkeydown,onkeyup三者区别:
onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。
onkeydown 在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。
onkeyup在用户放开任何先前按下的键盘键时发生。
onkeydown 事件最先执行,其次是onkeypress,最后是onkeyup;onkeydown 和onkeypress会影响onkeyup的执行。三个事件同事在的话,都是alert的话,只会弹出2个alert,onkeyup事件的alert不会弹出。
三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受。由于onkeydown 比onkeypress先执行,onkeydown 触发的时候输入流正要进入系统,也就是说onkeydown 事件一完,输入流就进入了系统,无法改变。所以通过onkeydown 事件可以改变用户是按了哪个键;而onkeypress事件则是在输入流进入系统后触发的,但输入流暂未被系统处理,此时已经不能改变输入流了;onkeyup则是输入流被系统处理后发生的。
所以当按下回车时,如果是onkeyup,因为输入流被系统处理后发生事件的。所以先失去焦点,页面重新载入。
页面相关事件:
onLoad页面加载完触发的事件,包括外部文件引入完成
表单相关事件
onBlur当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus当某个元素获得焦点时触发的事件
其他不常见事件:
onAbort 图片在下载时被用户中断 的事件
onBeforeUnload 当前页面的内容将要被改变时触发的事件
onError 捕抓当前页面因为某种原因而出现的错误,例如脚本错误,外部数据引用的错误
onResize 当浏览器的窗口大小被改变时触发的事件 ,在body上执行
onScroll 浏览器的滚动条位置发生变化时触发的事件
onStop 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload 当前页面将被改变时触发的事件
onReset 当表单中RESET的属性被激发时触发的事件
onSubmit 一个表单被递交时触发的事件
onDrag 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了
onDragEnter 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver 当某被拖动的对象在另一对象容器范围内拖动时触发的事件
onDragStart 当某对象将被拖动时触发的事件
onDrop 在一个拖动过程中,释放鼠标键时触发的事件
onPropertyChange当对象的属性之一发生变化时触发的事件