Javascript DOM Event对象方法详解
来源:互联网 发布:淘宝订单业务流程 编辑:程序博客网 时间:2024/05/21 22:31
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!
事件分为三个阶段: 事件捕获 --> 事件目标 --> 事件冒泡
事件捕获:事件发生时(onclick,onmouseover……)首先发生在document上,然后依次传递给body......最后到达目的节点(即事件目标)。
事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反
1、事件句柄 (Event Handlers)
HTML4.0的新特性之一是能够使HTML事件触发浏览器中的行为,比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
事件浏览器支持解说一般事件onclickIE3、N2鼠标点击时触发此事件ondblclickIE4、N4鼠标双击时触发此事件onmousedownIE4、N4按下鼠标时触发此事件onmouseupIE4、N4鼠标按下后松开鼠标时触发此事件onmouseoverIE3、N2当鼠标移动到某对象范围的上方时触发此事件onmousemoveIE4、N4鼠标移动时触发此事件onmouseoutIE4、N3当鼠标离开某对象范围时触发此事件onkeypressIE4、N4当键盘上的某个键被按下并且释放时触发此事件.onkeydownIE4、N4当键盘上某个按键被按下时触发此事件onkeyupIE4、N4当键盘上某个按键被按放开时触发此事件页面相关事件onabortIE4、N3图片在下载时被用户中断onbeforeunloadIE4、N当前页面的内容将要被改变时触发此事件onerrorIE4、N3出现错误时触发此事件onloadIE3、N2页面内容完成时触发此事件onmoveIE、N4浏览器的窗口被移动时触发此事件onresizeIE4、N4当浏览器的窗口大小被改变时触发此事件onscrollIE4、N浏览器的滚动条位置发生变化时触发此事件onstopIE5、N浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunloadIE3、N2当前页面将被改变时触发此事件表单相关事件onblurIE3、N2当前元素失去焦点时触发此事件onchangeIE3、N2当前元素失去焦点并且元素的内容发生改变而触发此事件onfocusIE3 、N2当某个元素获得焦点时触发此事件onresetIE4 、N3当表单中RESET的属性被激发时触发此事件(函数名前加return)onsubmitIE3 、N2一个表单被递交时触发此事件 (函数名前加return)滚动字幕事件onbounceIE4、N在Marquee内的内容移动至Marquee显示范围之外时触发此事件(behavior标记为aloernate时才有效)onfinishIE4、N当Marquee元素完成需要显示的内容后触发此事件onstartIE4、 N当Marquee元素开始显示内容时触发此事件编辑事件onbeforecopyIE5、N当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件(函数名前加return)onbeforecutIE5、 N当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件(函数名前加return)onbeforeeditfocusIE5、N当前元素将要进入编辑状态onbeforepasteIE5、 N内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件(返回true或false是无效的 使用clipboardData等)onbeforeupdateIE5、 N当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenuIE5、N当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件(函数名前加return)oncopyIE5、N当页面当前的被选择内容被复制后触发此事件(函数名前加return)oncutIE5、N当页面当前的被选择内容被剪切时触发此事件(函数名前加return)ondragIE5、N当某个对象被拖动时触发此事件 [活动事件]ondragdropIE、N4一个外部对象被鼠标拖进当前窗口或者帧ondragendIE5、N当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了ondragenterIE5、N当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleaveIE5、N当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragoverIE5、N当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstartIE4、N当某对象将被拖动时触发此事件ondropIE5、N在一个拖动过程中,释放鼠标键时触发此事件onlosecaptureIE5、N当元素失去鼠标移动所形成的选择焦点时触发此事件onpasteIE5、N当内容被粘贴时触发此事件(函数名前加return)onselectIE4、N当文本内容被选择时的事件(函数名前加return)onselectstartIE4、N当文本内容选择将开始发生时触发的事件(函数名前加return)数据绑定onafterupdateIE4、N当数据完成由数据源到对象的传送时触发此事件oncellchangeIE5、N当数据来源发生变化时ondataavailableIE4、N当数据接收完成时触发事件ondatasetchangedIE4、N数据在数据源发生变化时触发的事件ondatasetcompleteIE4、N当来子数据源的全部有效数据读取完毕时触发此事件onerrorupdateIE4、N当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件onrowenterIE5、N当前数据源的数据发生变化并且有新的有效数据时触发的事件onrowexitIE5、N当前数据源的数据将要发生变化时触发的事件onrowsdeleteIE5、N当前数据记录将被删除时触发此事件onrowsinsertedIE5、N当前数据源将要插入新数据记录时触发此事件外部事件onafterprintIE5、N当文档被打印后触发此事件onbeforeprintIE5、N当文档即将打印时触发此事件onfilterchangeIE4、N当某个对象的滤镜效果发生变化时触发的事件onhelpIE4、N当浏览者按下F1或者浏览器的帮助选择时触发此事件onpropertychangeIE5、N当对象的属性之一发生变化时触发此事件onreadystatechangeIE4、N当对象的初始化属性值发生变化时触发此事件
2、鼠标 / 键盘属性
button值
IE浏览器拥有不同的参数:
除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:
4、标准 Event 属性
下面列出了 2 级 DOM 事件标准定义的属性:
5、标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:
6、IE兼容相关
6.1 注册与移除事件监听器
1)addEventListener(event.type, handle, boolean);IE8及以下不支持,属于DOM2级的方法,可添加多个方法不被覆盖
//事件类型没有on,false 表示在事件第三阶段(冒泡)触发,true表示在事件第一阶段(捕获)触发。 如果handle是同一个方法,只执行一次。ele.addEventListener('click', function(){ }, false); //解绑事件,参数和绑定一样ele.removeEventListener(event.type, handle, boolean);
2)attachEvent(event.type, handle ); IE特有,兼容IE8及以下,可添加多个事件处理程序,只支持冒泡阶段
//如果handle是同一个方法,绑定几次执行几次,这点和addEventListener不同,事件类型要加on,例如onclick而不是clickele.attachEvent('onclick', function(){ }); //解绑事件,参数和绑定一样ele.detachEvent("onclick", function(){ });
3)接下来我们把事件绑定以及事件解绑封装成为一个函数,兼容浏览器,包括IE6及以上
// 事件绑定function addEvent(element, eType, handle, bol) { if(element.addEventListener){ //如果支持addEventListener element.addEventListener(eType, handle, bol); }else if(element.attachEvent){ //如果支持attachEvent element.attachEvent("on"+eType, handle); }else{ //否则使用兼容的onclick绑定 element["on"+eType] = handle; }}
// 事件解绑function removeEvent(element, eType, handle, bol) { if(element.addEventListener){ element.removeEventListener(eType, handle, bol); }else if(element.attachEvent){ element.detachEvent("on"+eType, handle); }else{ element["on"+eType] = null; }}
6.2 阻止事件传递后的默认处理
1)event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件(DOM标准)
element.addEventListener("click", function(e){ var event = e || window.event; …… event.preventDefault( ); //阻止默认事件},false);
2)event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件(IE)
element.attachEvent("onclick", function(e){ var event = e || window.event; …… event.returnValue = false; //阻止默认事件},false);
6.3 取消浏览器的事件传递
- Javascript DOM Event对象方法详解
- javascript event对象详解
- javascript event对象详解
- javascript Event对象详解
- Javascript的Event对象详解
- Javascript的Event对象详解
- javascript中event对象详解
- javascript中event对象详解
- Javascript的Event对象详解
- Javascript的Event对象详解
- JavaScript中event对象详解
- Javascript DOM Document|Element|Attribute对象方法详解
- JavaScript方法中的DOM对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- HTML DOM Event 对象
- 搭建Solr6.0.1+tomcat8服务器
- 客户端加密
- CoreText 设置文字属性和插入图片
- mysql mybatis 批量update
- NoSQL之Redis---持久化(persistence)示例
- Javascript DOM Event对象方法详解
- numpy 备忘录
- U盘超级加密3000
- c#下出现“”未处理System.BadImageFormatException“错误
- 1010 problem J
- iOS 人脸识别(检测)
- prewitt边缘检测原理
- Activity横竖屏切换时的生命周期
- 学生信息管理系统