zoukankan      html  css  js  c++  java
  • JavaScript中原生事件

    DOM0事件模型:

    所有浏览器都支持,只能注册一种事件

    1.绑定:

    document.getElementById("id").onclick = function(e){};
    

     解除绑定:

    document.getElementById("id").onclick=null;
    

     2.绑定:

    <div id="test" class="test" onclick="func();" ></div>
    

     DOM2事件模型:

    支持同一个dom注册多种事件,增加了捕获和冒泡的概念

    捕获:某个元素触发了某个事件,最先得到通知的是window,然后是document,依次而入,直到真正触发事件的那个元素(目标元素)为止

    冒泡:事件会从目标元素开始起泡,再依次而出,直到window对象为止

    绑定:

    addEventListener(事件名称,事件回调,捕获/冒泡);false为冒泡,true为捕获

    var x=document.getElementById("id");
    if(x.addEventListener){
     addEventListener("click",function(e){},false);//IE8及IE8以下版本不支持
    }else if(x.attachEvent){
      x.attachEvent("onclick",function(e){});   //IE8及IE8以下版本支持
    }
    

     取消绑定:

    e.removeEventListener(event_type,event_name,捕获/冒泡);
    e.detachEvent(event_type,event_name);
    

     阻止事件冒泡:

        假如外层div和内层div都是注册的冒泡事件,点击内层div时,一定是内层div事件先执行,原理相同。

         细心的读者会发现,对于div嵌套的情况,如果点击内层的div,外层的div也会触发事件,这貌似会有问题!

         点击的明明是内层div,但是外层div的事件也触发了,这的确是个问题。

    其他主浏览器:e.stopPropagation();
    IE浏览器: e.calcelBubble=true;
    
    function stopBubble(e) { 
    //如果提供了事件对象,则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则,我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
    }
    

     阻止默认事件:

    其他主浏览器:e.preventDefault();
    IE浏览器:e.returnValue=false;
    
    //阻止浏览器的默认行为 
    function stopDefault( e ) { 
        //阻止默认浏览器动作(W3C) 
        if ( e && e.preventDefault ) 
            e.preventDefault(); 
        //IE中阻止函数器默认动作的方式 
        else 
            window.event.returnValue = false; 
        return false; 
    }
    

    return false:

    javascript的return false只会阻止默认行为,而是用jQuery的话则既阻止默认行为又防止对象冒泡。

  • 相关阅读:
    PHP mysqli_next_result() 函数
    PHP mysqli_multi_query() 函数
    PHP mysqli_num_fields() 函数
    PHP mysqli_more_results() 函数
    PHP mysqli_kill() 函数
    PHP mysqli_insert_id() 函数
    PHP mysqli_init() 函数
    PHP mysqli_info() 函数
    PHP mysqli_get_server_version() 函数
    PHP mysqli_get_server_info() 函数
  • 原文地址:https://www.cnblogs.com/zhaoxinmei-123/p/9056453.html
Copyright © 2011-2022 走看看