JS基础面试题

1、什么是事件冒泡

IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

2、如何利用事件冒泡

1. 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

    <div onclick="eventHandle(event)" id="outSide" 
            style="width:100px;
             height:100px; 
             background:#000; 
             padding:50px">

        <div id="inSide" style="width:100px; height:100px; background:#CCC"></div>

    </div>


    function eventHandle (e) {
         var e=e||window.event;
         var obj=e.target||e.srcElement;
         console.log(obj.id+' was click')
     }

0.jpg

2. 让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情

    <div onclick="outSideWork()"
            id="outSide" 
            style="width:100px; height:100px; background:#000; padding:50px">

        <div onclick="inSideWork()"
                id="inSide" 
                style="width:100px; height:100px; background:#CCC"></div>

    </div>

function outSideWork(){  // 点击外层div，内层不会被触发
    alert('My name is outSide,I was working...');  
}
function inSideWork(){    // 点击里面的div，这个事件完了再直接上一层
    alert('My name is inSide,I was working...');
}

3、如何阻止冒泡

e.stopPropagation()
window.event.cancelBubble = true

<div    onclick="showMsg(this,event)" 
        id="outSide" 
        style="width:100px; height:100px; background:#000; padding:50px">

    <div    onclick="showMsg(this,event)" 
            id="inSide" 
            style="width:100px; height:100px; background:#CCC"></div>
</div>


function stopBubble(e){
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
function showMsg(obj,e){
    alert(obj.id);
    stopBubble(e)
}