JS事件模型解释
程序员文章站
2022-06-16 09:16:03
...
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
【分析】:父级先于子级触发