事件模型
2015-08-12 21:59
645 查看
一.事件流
<!document html>\
<html>
<head>
<title>
Event Bubbling Examole
</title>
</head>
<body>
<div id="mydiv">
click me
</div>
</body>
</html>
1.事件冒泡:由最具体的元素接受，然后逐渐向上到不具体的元素
当你单击了div(id=mydiv)的时候 那么这个click事件会从
div->body->html->document的顺序传送
如图:
2.事件捕获:与事件冒泡相反是从document->div的顺序传递click事件
document->html->body->div
如图:
3.dom事件流
DOM2级 规定事件流分为三个阶段:事件捕获-》处于目标阶段-》事件冒泡阶段
如图:
ie8 不支持dom流只有捕获事件
IE9,Opera,Firefox,Chrome,Safari,Opera 9.5都会在捕获阶段触发对象上的事件，结果有两个机会在目标对象上操作事件
13.2 事件处理程序
1.HTML事件处理程序:直接在元素上面添加的onclick 程序
eg:<div onclick="function(){}"></div>
不足:
1.存在一个时差,因为用户可能会在HTML元素一出现在页面上面就触发相应的事件，但是当时的事假处理程序却不一定具有执行的条件。比如事件的函数定义在按钮下方,如果用户在页面解析到函数之前就点击
了事件，则会报错.可以用try-catch来解决这种情况 \
eg:<input type="button" value="" onclick="try{showMessage();} catch(ex){}" />
2.这样的扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果
3.HTML与JavaScript代码紧密耦合
其中两个重要的事件对象
this:事件目标元素
event:事件对象
2.DOM0级事件处理程序
obj.onclick=function(){}
注意:1.这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
2.obj.onclick=null 删除事件
3.this引用当前的元素
3.DOM2级
obj.addEventListener("click",function,boole);
参数说明:1:事件类型
2:事件处理函数
3:布尔值
3的值如果是
true:捕获的时候处理
false:冒泡的时候处理
能用removeEventListener()来移除事件处理函数这也说明添加匿名的事件是无法删除的
IE 事件处理程序
1.attachEvent("onclick",function)
2.detachEvent()
因为IE8只支持冒泡所以通过次两种方法添加的都只在冒泡阶段执行
总结:通用的事件处理程序
var EventUtil={
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler.false)
}
else
{ if(element.attachEvent)
{
element.attachEvent("on"+type,function(){
handler.call(element)
});
}
else
{
element['on'+type]=handler;
}
}
}
removeHandler:function(element,type,handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}
else
{
if(element.removeattachEvent)
{
element.detachEvent('on'+type,handler);
}
else
{
element['on'=type]=null;
}
}
}
}
二:事件对象
1.DOM事件对象 event
常用属性:
currentTarget:表示事件处理程序正在处理的那个元素类似与this
常用方法:
preventDefault()
取消默认的事件
stopPropagation()
取消事件的进一步传递
target
事件的目标
注意区别:event.target this currentTarget 三者的区别
其中event.target 表示事件真正的目标
this currentTarget 两者相等,表示事件处理程序是注册到这两个元素上面去的或者说是事件正在被处理的元素
eg:
<html>
<body>
<button>
</button>
</body>
</html>
当你点button时会触发下面的事件;
document.body.onclick=function()
{
在这里:currentTarget=this 都是body元素
target=button 是button元素
}
2.IE事件对象
在DOM0中event走位window的对象的一个属性存在
eg:
btn.oncli
eab8
ck=function()
{
var event = window.event;
alert(event)//click
}
在attachEvent中就是作为一个参数传入
attachEvent('onclick',function(event)
{
alert(event);//click
})
其中的方法和属性
cancelBubble 取消事件的进一步传递
returnValue
阻止默认的事件
srcElement 事件的源元素相对与target
跨浏览器的事件对象
var EventUtil={
getEvent:function(event)
{
return event? event:window.event;
}
getTarget:function(){
return event.target ||event.srcElement;
}
preventDefault；function()
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue=false;
}
}
stopPropagation:function()
{
if(event.stopPropagation)
{
event.stopPropagation()
}
else
{
event.cancelBubble=ture;
}
}
}
2.事件捕获:与事件冒泡相反是从document->div的顺序传递click事件
document->html->body->div
如图:
3.dom事件流
DOM2级 规定事件流分为三个阶段:事件捕获-》处于目标阶段-》事件冒泡阶段
如图:
ie8 不支持dom流只有捕获事件
IE9,Opera,Firefox,Chrome,Safari,Opera 9.5都会在捕获阶段触发对象上的事件，结果有两个机会在目标对象上操作事件
13.2 事件处理程序
1.HTML事件处理程序:直接在元素上面添加的onclick 程序
eg:<div onclick="function(){}"></div>
不足:
1.存在一个时差,因为用户可能会在HTML元素一出现在页面上面就触发相应的事件，但是当时的事假处理程序却不一定具有执行的条件。比如事件的函数定义在按钮下方,如果用户在页面解析到函数之前就点击
了事件，则会报错.可以用try-catch来解决这种情况 \
eg:<input type="button" value="" onclick="try{showMessage();} catch(ex){}" />
2.这样的扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果
3.HTML与JavaScript代码紧密耦合
其中两个重要的事件对象
this:事件目标元素
event:事件对象
2.DOM0级事件处理程序
obj.onclick=function(){}
注意:1.这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
2.obj.onclick=null 删除事件
3.this引用当前的元素
3.DOM2级
obj.addEventListener("click",function,boole);
参数说明:1:事件类型
2:事件处理函数
3:布尔值
3的值如果是
true:捕获的时候处理
false:冒泡的时候处理
能用removeEventListener()来移除事件处理函数这也说明添加匿名的事件是无法删除的
IE 事件处理程序
1.attachEvent("onclick",function)
2.detachEvent()
因为IE8只支持冒泡所以通过次两种方法添加的都只在冒泡阶段执行
总结:通用的事件处理程序
var EventUtil={
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler.false)
}
else
{ if(element.attachEvent)
{
element.attachEvent("on"+type,function(){
handler.call(element)
});
}
else
{
element['on'+type]=handler;
}
}
}
removeHandler:function(element,type,handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}
else
{
if(element.removeattachEvent)
{
element.detachEvent('on'+type,handler);
}
else
{
element['on'=type]=null;
}
}
}
}
二:事件对象
1.DOM事件对象 event
常用属性:
currentTarget:表示事件处理程序正在处理的那个元素类似与this
常用方法:
preventDefault()
取消默认的事件
stopPropagation()
取消事件的进一步传递
target
事件的目标
注意区别:event.target this currentTarget 三者的区别
其中event.target 表示事件真正的目标
this currentTarget 两者相等,表示事件处理程序是注册到这两个元素上面去的或者说是事件正在被处理的元素
eg:
<html>
<body>
<button>
</button>
</body>
</html>
当你点button时会触发下面的事件;
document.body.onclick=function()
{
在这里:currentTarget=this 都是body元素
target=button 是button元素
}
2.IE事件对象
在DOM0中event走位window的对象的一个属性存在
eg:
btn.onclick=function()
{
var event = window.event;
alert(event)//click
}
在attachEvent中就是作为一个参数传入
attachEvent('onclick',function(event)
{
alert(event);//click
})
其中的方法和属性
cancelBubble 取消事件的进一步传递
returnValue
阻止默认的事件
srcElement 事件的源元素相对与target
跨浏览器的事件对象
var EventUtil={
getEvent:function(event)
{
return event? event:window.event;
}
getTarget:function(){
return event.target ||event.srcElement;
}
preventDefault；function()
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue=false;
}
}
stopPropagation:function()
{
if(event.stopPropagation)
{
event.stopPropagation()
}
else
{
event.cancelBubble=ture;
}
}
}
<!document html>\
<html>
<head>
<title>
Event Bubbling Examole
</title>
</head>
<body>
<div id="mydiv">
click me
</div>
</body>
</html>
1.事件冒泡:由最具体的元素接受，然后逐渐向上到不具体的元素
当你单击了div(id=mydiv)的时候 那么这个click事件会从
div->body->html->document的顺序传送
如图:
2.事件捕获:与事件冒泡相反是从document->div的顺序传递click事件
document->html->body->div
如图:
3.dom事件流
DOM2级 规定事件流分为三个阶段:事件捕获-》处于目标阶段-》事件冒泡阶段
如图:
ie8 不支持dom流只有捕获事件
IE9,Opera,Firefox,Chrome,Safari,Opera 9.5都会在捕获阶段触发对象上的事件，结果有两个机会在目标对象上操作事件
13.2 事件处理程序
1.HTML事件处理程序:直接在元素上面添加的onclick 程序
eg:<div onclick="function(){}"></div>
不足:
1.存在一个时差,因为用户可能会在HTML元素一出现在页面上面就触发相应的事件，但是当时的事假处理程序却不一定具有执行的条件。比如事件的函数定义在按钮下方,如果用户在页面解析到函数之前就点击
了事件，则会报错.可以用try-catch来解决这种情况 \
eg:<input type="button" value="" onclick="try{showMessage();} catch(ex){}" />
2.这样的扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果
3.HTML与JavaScript代码紧密耦合
其中两个重要的事件对象
this:事件目标元素
event:事件对象
2.DOM0级事件处理程序
obj.onclick=function(){}
注意:1.这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
2.obj.onclick=null 删除事件
3.this引用当前的元素
3.DOM2级
obj.addEventListener("click",function,boole);
参数说明:1:事件类型
2:事件处理函数
3:布尔值
3的值如果是
true:捕获的时候处理
false:冒泡的时候处理
能用removeEventListener()来移除事件处理函数这也说明添加匿名的事件是无法删除的
IE 事件处理程序
1.attachEvent("onclick",function)
2.detachEvent()
因为IE8只支持冒泡所以通过次两种方法添加的都只在冒泡阶段执行
总结:通用的事件处理程序
var EventUtil={
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler.false)
}
else
{ if(element.attachEvent)
{
element.attachEvent("on"+type,function(){
handler.call(element)
});
}
else
{
element['on'+type]=handler;
}
}
}
removeHandler:function(element,type,handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}
else
{
if(element.removeattachEvent)
{
element.detachEvent('on'+type,handler);
}
else
{
element['on'=type]=null;
}
}
}
}
二:事件对象
1.DOM事件对象 event
常用属性:
currentTarget:表示事件处理程序正在处理的那个元素类似与this
常用方法:
preventDefault()
取消默认的事件
stopPropagation()
取消事件的进一步传递
target
事件的目标
注意区别:event.target this currentTarget 三者的区别
其中event.target 表示事件真正的目标
this currentTarget 两者相等,表示事件处理程序是注册到这两个元素上面去的或者说是事件正在被处理的元素
eg:
<html>
<body>
<button>
</button>
</body>
</html>
当你点button时会触发下面的事件;
document.body.onclick=function()
{
在这里:currentTarget=this 都是body元素
target=button 是button元素
}
2.IE事件对象
在DOM0中event走位window的对象的一个属性存在
eg:
btn.oncli
eab8
ck=function()
{
var event = window.event;
alert(event)//click
}
在attachEvent中就是作为一个参数传入
attachEvent('onclick',function(event)
{
alert(event);//click
})
其中的方法和属性
cancelBubble 取消事件的进一步传递
returnValue
阻止默认的事件
srcElement 事件的源元素相对与target
跨浏览器的事件对象
var EventUtil={
getEvent:function(event)
{
return event? event:window.event;
}
getTarget:function(){
return event.target ||event.srcElement;
}
preventDefault；function()
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue=false;
}
}
stopPropagation:function()
{
if(event.stopPropagation)
{
event.stopPropagation()
}
else
{
event.cancelBubble=ture;
}
}
}
2.事件捕获:与事件冒泡相反是从document->div的顺序传递click事件
document->html->body->div
如图:
3.dom事件流
DOM2级 规定事件流分为三个阶段:事件捕获-》处于目标阶段-》事件冒泡阶段
如图:
ie8 不支持dom流只有捕获事件
IE9,Opera,Firefox,Chrome,Safari,Opera 9.5都会在捕获阶段触发对象上的事件，结果有两个机会在目标对象上操作事件
13.2 事件处理程序
1.HTML事件处理程序:直接在元素上面添加的onclick 程序
eg:<div onclick="function(){}"></div>
不足:
1.存在一个时差,因为用户可能会在HTML元素一出现在页面上面就触发相应的事件，但是当时的事假处理程序却不一定具有执行的条件。比如事件的函数定义在按钮下方,如果用户在页面解析到函数之前就点击
了事件，则会报错.可以用try-catch来解决这种情况 \
eg:<input type="button" value="" onclick="try{showMessage();} catch(ex){}" />
2.这样的扩展事件处理程序的作用域链在不同浏览器中会导致不同的结果
3.HTML与JavaScript代码紧密耦合
其中两个重要的事件对象
this:事件目标元素
event:事件对象
2.DOM0级事件处理程序
obj.onclick=function(){}
注意:1.这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
2.obj.onclick=null 删除事件
3.this引用当前的元素
3.DOM2级
obj.addEventListener("click",function,boole);
参数说明:1:事件类型
2:事件处理函数
3:布尔值
3的值如果是
true:捕获的时候处理
false:冒泡的时候处理
能用removeEventListener()来移除事件处理函数这也说明添加匿名的事件是无法删除的
IE 事件处理程序
1.attachEvent("onclick",function)
2.detachEvent()
因为IE8只支持冒泡所以通过次两种方法添加的都只在冒泡阶段执行
总结:通用的事件处理程序
var EventUtil={
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler.false)
}
else
{ if(element.attachEvent)
{
element.attachEvent("on"+type,function(){
handler.call(element)
});
}
else
{
element['on'+type]=handler;
}
}
}
removeHandler:function(element,type,handler)
{
if(element.removeEventListener)
{
element.removeEventListener(type,handler,false)
}
else
{
if(element.removeattachEvent)
{
element.detachEvent('on'+type,handler);
}
else
{
element['on'=type]=null;
}
}
}
}
二:事件对象
1.DOM事件对象 event
常用属性:
currentTarget:表示事件处理程序正在处理的那个元素类似与this
常用方法:
preventDefault()
取消默认的事件
stopPropagation()
取消事件的进一步传递
target
事件的目标
注意区别:event.target this currentTarget 三者的区别
其中event.target 表示事件真正的目标
this currentTarget 两者相等,表示事件处理程序是注册到这两个元素上面去的或者说是事件正在被处理的元素
eg:
<html>
<body>
<button>
</button>
</body>
</html>
当你点button时会触发下面的事件;
document.body.onclick=function()
{
在这里:currentTarget=this 都是body元素
target=button 是button元素
}
2.IE事件对象
在DOM0中event走位window的对象的一个属性存在
eg:
btn.onclick=function()
{
var event = window.event;
alert(event)//click
}
在attachEvent中就是作为一个参数传入
attachEvent('onclick',function(event)
{
alert(event);//click
})
其中的方法和属性
cancelBubble 取消事件的进一步传递
returnValue
阻止默认的事件
srcElement 事件的源元素相对与target
跨浏览器的事件对象
var EventUtil={
getEvent:function(event)
{
return event? event:window.event;
}
getTarget:function(){
return event.target ||event.srcElement;
}
preventDefault；function()
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue=false;
}
}
stopPropagation:function()
{
if(event.stopPropagation)
{
event.stopPropagation()
}
else
{
event.cancelBubble=ture;
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理