js事件流
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件流相关的知识,希望对你有一定的参考价值。
事件流:
事件发生后沿着某一方向传播的行为
> 事件流分为冒泡和捕获
IE:只有冒泡
现代浏览器:两种都有,默认冒泡
网景:只有捕获(但是已经不存在)
----------
## **事件分级**:##
DOM0/DOM1:所有浏览器都有的DOM事件,好处是兼容所有浏览器,缺点是同一事件,只能定义一次,多次定义的结果是,后面的覆盖前面。例如X.onclick,只能定义一次。
DOM2:事件可以叠加,X.onclick可以定义两个事件,两个事件可以先后执行,但是不是所有浏览器都兼容。例如addEventListener(事件名称,执行代码,事件方想【true:冒泡|false:捕获】)事件,具体代码如下:
if(document.addEventListener){
p1.addEventListener("click",function(e){
alert("hello");
});
p1.addEventListener("click",function(e){
alert("hi");
});
}else{
p1.attachEvent("onclick",function(e){
alert("hello");
});
p1.attachEvent("onclick",function(e){
alert("hi");
});
}
网景:只有捕获(但是已经不存在)
----------
## **阻止事件发生**:##
阻止默认事件的发生:preventDefault(),例如表单验证失败阻止提交
<h1>注册</h1>
<form id="regForm" action="#" method="post">
<div>用户名:<input type="text" id="username" ></div>
<div>密码:<input type="password" id="pwd" ></div>
<div><input id="sub" type="button" ></div>
</form>
<script type="text/javascript">
sb.onclick = function(e){
regForm.onsubmit = function(e){
e = window.event || e;
alert("表单提交");
if(e.preventDefault){
e.preventDefault(); //现代浏览器方法
}else{
e.returnValue = false; //IE方法
}
}
</script>
阻止DOM2方法:
p1.onclick = function(e){
e = window.event || e; //兼容
if(e.stopPropagation){
e.stopPropagation(); //现代浏览器方法
}else{
e.cancelBubble = true; //IE方法
}
以上是关于js事件流的主要内容,如果未能解决你的问题,请参考以下文章