js事件流

Posted 2020-07-16

 ##  **事件流**：##

事件发生后沿着某一方向传播的行为
> 事件流分为冒泡和捕获

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方法
                }