JavaScript 事件冒泡/事件捕获/事件委托

版权声明：【原创】GitHub：https://github.com/susuGirl，微信公众号：fuxiaodexing，博客：https://blog.csdn.net/weixin_41845146 https://blog.csdn.net/weixin_41845146/article/details/84991738

事件处理机制：IE 、opera 是事件冒泡，火狐是事件捕获

事件冒泡

• 事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签

事件捕获

• 事件从最上一级标签开始往下查找，直到捕获到事件目标(target)

• 事件由父元素向子元素传播

DOM 事件流

• 事件流：从页面接受事件的顺序 --> 事件冒泡  事件捕获

• 同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及 DOM 中的所有对象，从 document 对象开始，也在 document 对象结束

• IE 和 DOM 事件流的区别

• 执行顺序不一样

• 参数不一样

• 事件加不加 on

• this 指向问题

阻止冒泡事件

• element1.addEventListener('click',doSomething2,false)

• 第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数

• window.event.cancelBubble = true      IE

• e.stopPropagation()

• window.event ? window.event.cancelBubble = true : e.stopPropagation();

阻止浏览器默认行为

• window.event ? window.event.returnValue = false : e.preventDefault();

• 原生 JavaScript 中的 return false 只阻止默认行为，不阻止冒泡

• jQuery 中的 return false 既阻止默认行为又阻止冒泡

注册事件监听：

• IE 、opera --> attachEvent( "on"+type,fn )

• 其他浏览器 --> addEventListener( type，fn，boolean ) --> boolean（true：捕获阶段）（false：冒泡阶段）

事件委托

• 利用事件冒泡的原理，让自己所触发的事件，让它的父元素代替执行

jQuery：
* $("ul").on("click","li",function(){}); 这样写有事件委托，$("ul li").on();这样写法则没有
* 需求：鼠标放到 li 上对应的 li 背景变灰

$("ul").on("mouseover",function(e){
    $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
* siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
* $("p").siblings(".selected")  查找每个 p 元素的所有类名为 "selected" 的所有同胞元素

原生JS：
function () {
    var ul = document.getElementsByTagName('ul')[0];
    ul.onclick = function (e) {
        e = e || window.event
        var target = e.target || e.srcElement; // 获取事件的来源对象
        ..............
    }
}