美文网首页
事件冒泡

事件冒泡

作者: zhulichao | 来源:发表于2020-07-23 09:20 被阅读0次
    事件冒泡,从内到外;事件捕获,从外到内;DOM事件流,从外到内再从内到外回到原点。事件冒泡允许多个操作被集中处理,把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上,可以优化性能,在页面动态添加新元素后,这些新增的元素也不用再绑定事件,它还可以让你在对象层的不同级别捕获事件。
    
    blur、focus、load、unload不冒泡。使用addEventListener绑定事件的方法第三个参数可以控制事件触发顺序,true为事件捕获,false为事件冒泡,默认为false。使用attatchEvent绑定事件的方法不能控制事件触发顺序。
    
    阻止事件冒泡不能阻止对象默认行为,如submit按钮会提交表单数据。
    
    事件对象:
    ```
    event.keyCode // 返回keydown何keyup事件发生的时候按键的代码
    event.target // 发生事件的目标元素
    event.currentTarget // 当前处理事件的元素
    ```
    
    阻止冒泡:
    ```
    event.stopPropagation();
    event.stopImmediatePropagation(); // 除了该事件的冒泡行为被阻止之外,该元素绑定的后序相同类型事件的监听函数的执行也将被阻止
    window.event.cancelBubble = true; // IE下
    ```
    
    阻止默认行为:
    ```
    event.preventDefault();
    window.event.returnValue = false; // IE下
    ```
    
    在body上处理事件:
    ```
    window.onload = function() {
      document.body.addEventListener('click', function(e){
        console.log(e.target.id);
      });
    };
    ```
    

    相关文章

      网友评论

          本文标题:事件冒泡

          本文链接:https://www.haomeiwen.com/subject/zcxjhktx.html