JS事件模型解释

蔚落 2022-06-07 06:12 235阅读 0赞

**1.事件(Event)**  
\* 可以理解为JavaScript中的函数(function)、行为、动作，当对页面进行某些交互时，事件触发。交互包括【页面加载onload、点击元素onclick、鼠标经过onmouseover、键盘点击事件onkeydown等】，监听发生的事情，js中的事件是对这些交互做出响应。  
\*  
**2.事件的分类**  
\*2.事件的分类  
事件顺序类型：事件捕捉型和事件冒泡型  
【层次】  
document  
html  
body  
div

【事件捕捉型】：
        事件按照从最不确定的事件目标到最确定的事件目标的顺序触发。
        父级元素先触发，子级元素后触发
         document -> html -> body -> div 
    【事件冒泡型】：
        事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。
        子级元素先触发，父级元素后触发
        div -> body -> html -> document 
    
    选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数。

ele.addEventListener('click',doThings,true)
    ---->
    ele.addEventListener('事件','函数','捕获/冒泡') 
    【注】true=捕获 false=冒泡

**测试样例，div是父级元素，p时子级元素**

【code】
            <body>
                <div id="click_div">
                    <p id="click_p">click me</p>
                </div>
            </body>
            <script> var click_p = document.getElementById("click_p"); var click_div = document.getElementById("click_div"); .......xxxx......... </script>

*【….xxx事件捕捉类型…..】*

click_p.addEventListener('click',function(){ 
                    console.log("Event One");
                },true);
    
                click_div.addEventListener('click',function(){ 
                    console.log("Event Two");
                },true);

*【结果】*

Event Two
    Event One

*【分析】：子级先于父级触发*  
*【….xxx事件冒泡类型…..】*

click_p.addEventListener('click',function(){ 
                    console.log("Event One");
                },false);
    
                click_div.addEventListener('click',function(){ 
                    console.log("Event Two");
                },false);

*【结果】*

Event One
    Event Two

*【分析】：父级先于子级触发*