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事件流的主要内容,如果未能解决你的问题,请参考以下文章

js事件事件委托

JS事件流

js013-事件

js事件流

JS里关于事件的常被考察的知识点:事件流事件广播原生JS实现事件代理

JS高程3:事件