一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流
事件冒泡:
事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)。------由内到外
事件捕获:
不太具体的节点应该更早的接收到事件,具体的节点最后接收到事件。----由外到内
事件处理程序:
HTML事件处理程序:
缺点:html和js 紧密的耦合在一起。
DOM0级事件处理程序:
是一种较传统的方式,把一个函数赋值给一个事件处理程序的属性。在第四代web浏览器中出现。
优势: 目前支持的比较好,用的比较多。简单,跨浏览器的优势。
元素.事件=null;//删除DOM0级事件
DOM2级事件处理程序(IE不支持):
定义了两个方法:用于处理指定和删除时间处理程序的操作。
addEventListener()和removeEventListener():接收三个参数:要处理的事件名(不带on)、作为事件处理程序的函数、boolean(true:在捕获阶段处理事件处理程序。false:在冒泡阶段处理事件处理程序。)
可以添加多个事件处理程序。按顺序执行。
IE事件处理程序:
添加事件和删除事件分别是:attachEvent()和detachEvent():接收两个参数:要处理的事件名(必须带on)、作为事件处理程序的函数。
不使用第三个参数的原因是:IE8及其更早的浏览器版本只支持事件冒泡。所以默认冒泡。
支持IE事件处理程序的浏览器:IE和OPERA.
跨浏览器的事件处理程序:
var eventUtil={
//添加
addHandler:function(element,type,handler){
//是否支持dom2级
if(element.addEventListener){
element.addEventListener(type,handler,false);
//是否支持ie
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//dom0级
}else{
//js中,所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]
element['on'+type]=handler;
}
},
//删除
delHandler:function(element,type,handler){
//是否支持dom2级
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
//是否支持ie
}else if(element.detachEvent){
element.detachEvent('on'+type,handler);
//dom0级
}else{
//js中,所有用.的地方都可以用[]代替。element.onclick===element['onclick']此处不能用.,因此替换为[]
element['on'+type]=null;
}
}
}
事件对象:
在触发DOM上的事件时都会产生一个对象。
事件对象EVENT.
DOM中的事件对象:
(1)type 获取事件类型(click,mouseover,mouseout....)
(2)target 获取事件目标(即事件所在的dom元素)
(3)stopPropagation() 阻止事件冒泡
(4)preventDefault() 阻止事件的默认行为
eg:<a href='#'>超链接</a> 默认行为是点击跳转
IE中的时间对象:
(1)type 获取事件类型(click,mouseover,mouseout....)
(2)srcElement 获取事件目标(即事件所在的dom元素)
(3)cancelBubble属性 阻止事件冒泡 true 阻止冒泡,false 不阻止冒泡
(4)returnValue属性 阻止事件的默认行为 false 阻止事件默认行为
eg:<a href='#'>超链接</a> 默认行为是点击跳转
eventUtil中再添加以下方法:
getEvent:function(event){
//在ie8 之前的浏览器,必须用window.event才能获取到event
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target || event.srcElement;
},
//阻止默认事件
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
事件类型:
鼠标事件,键盘事件。
键盘事件:
keyDown:按下键盘上任意键触发,如果按住不放的话,会重复触发此事件
keyPress:按下键盘上字符键触发,如果按住不放,会重复触发此事件。
keyUp: 释放键盘上的键时触发。
event 对象的keyCode属性用于得到键盘对应键的键码值。
相关推荐
DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM事件(ppt)DOM...
JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源代码)JavaScript之DOM事件(源...
DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件总结(教辅)DOM事件...
HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用,函数不会在事件发生前被执行! (如用户点击按钮)。 提示: 在 W3C 2 级 DOM 事件中规范了事件模型。
DOM事件的区别
通过原生JavaScript实现一个简单的DOM事件模型,关于该资源的描述请参考:http://blog.csdn.net/gameloft9/article/details/51228191
DOM事件总结(教辅).pdf
详细介绍HTML DOM事件
DOM事件流的示意图,清晰的展示了DOM事件流的捕获过程,以及冒泡过程
DOM事件(ppt).pdf
目录(一)DOM事件流① 定义② 图解③ 历史(二)冒泡(三)捕获(四)在不同的阶段执行事件(五)提高内存和性能 — 事件委托① 实例② 优点 (一)DOM事件流 ① 定义 DOM事件流包括三个阶段: 捕获阶段 目标阶段 ...
js逆向实战之DOM事件断点调试
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题.docx
DOM事件流 “DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段...
DOM事件的级别DOM事件的级别,准确来说,是DOM标准定义的级别。DOM2的写法:【重要】上面的第三参数中,true表示事件在捕获阶段触发,false表示事件
js中DOM事件绑定分析.docx
下文主要通过一个例子带你 分析DOM事件的传递、事件处理 ,然后在此基础上再 深入总结对事件监听的优化方案 ,最终总结下DOM事件机制 在开源框架中的实战应用 。 一、从实例看事件传递 以下面这个普通的html...
WEB开发 之 JavaScript HTML DOM 事件.docx
Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-...DOM事件冒泡与Angular可以无缝工作,具体示例如下: import { Component } from '@angular/core'; @Component({ selector: 'exe-app',