JS事件模型解释

1 篇文章 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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值