JS事件模型解释

来源：互联网发布：防火女捏脸数据编辑：程序博客网时间：2024/06/03 21:24

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 TwoEvent One

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

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

【结果】

Event OneEvent Two

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

阅读全文

0 0