为了账号安全,请及时绑定邮箱和手机立即绑定

DOM事件

标签:
JavaScript

1.DOM事件的级别

DOM0:element.=function(){},在html中属性上加js语句;
DOM2:element.addEventListener('click',function(){},false), 第三个参数如果是true则表示在捕获阶段调用,为false表示在冒泡阶段调用(默认);
DOM3:element.addEventListener('keyup',function(){},false),事件类型增加了很多,例如:鼠标事件,键盘事件等等。

2.DOM事件模型(原理)

指的就是捕获(从上到下,true),冒泡(从当前元素向上,false)。

3.DOM事件流

三个阶段,1事件捕获阶段,2目标阶段,3事件冒泡阶段。

4.DOM事件的捕获流程

捕获的具体流程:window->document->html标签->body->..父->子..->目标元素。
反之,为冒泡流程。
小补充:
document.documentElement是文档对象根节点(html)的引用,
document.body是DOM中Document对象里的body节点。
<div id="ev"> <style> #ev{ width: 300px; height: 100px; line-height: 100px; background-color: red; color: #FFF; text-align: center; } </style> 目标元素 </div> <script> //true为捕获时调用,顺序为window->document->html->body->ev,和定义的顺序无关,和响应的顺序有关。 //false为冒泡时调用(默认),顺序为ev->body->html->document->window var ev = document.getElementById("ev"); //定义
ev.addEventListener("click",function(){
console.log("ev captrue");
},true);
window.addEventListener("click",function(){
console.log("window captrue");
},true);
document.addEventListener("click",function(){
console.log("document captrue");
},true);
document.documentElement.addEventListener("click",function(){
console.log("html captrue");
},true);
document.body.addEventListener("click",function(){
console.log("body captrue");
},true);
//响应结果
//window captrue
//document captrue
//html captrue
//body captrue
//ev captrue
</script>

5.Event对象的常见应用

1.DOM事件原理(冒泡,捕获,及流程);
2.注册事件(监听用户的交互行为);
3.做响应的时候Event对象非常重要。
0.event获取鼠标值( pageX=event.clientX+document.documentElement.scrollTop||document.body.scrollTop;)图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别,键盘值(event.keyCode)。JS-事件类型(鼠标事件中event对象的独有属性)
1.event.preventDefault(),阻止默认事件,例如对a标签阻止跳转。
2.event.stopPropagation(),阻止冒泡事件,单击子元素响应事件a,单击父元素响应事件b,当单击a时阻止事件b的响应。
3.event.stopImmediatePropagation(),事件响应优先级,当一个按钮中同时绑定事件a和事件b,那么在a的响应事件中加入此句话,将会阻止事件b的执行。
4.event.currentTarget(),当前所绑定事件对象,即父元素 。(经常考察,eg:一个for循环,给一个DOM注册了n多个事件,怎么优化?)事件代理,把子元素的事件代理都转移到父元素上,在父元素上绑定一次事件就可以了,当响应的时候就要区分当前是哪个元素被点击。
5.event.target(),当前被点击的子元素,一个父元素下有十个子元素,只需要在父元素上绑定一次事件即可,需判断是哪个子元素被点击了(经常考察,与4一起)。

6.自定义事件

            
var eve = new Event('custome');//声明一个自定义事件,只能指定事件名
            ev.addEventListener('custome',function(){
                console.log('custome');
            });//ev指一个DOM对象
            //触发自定义事件
            setTimeout(function(){
                ev.dispatchEvent(eve);
            },1000);
            //CustomEvent,可以指定事件名,后边可以跟一个obj来做指定参数
    <p>var signin = new Event("event");//声明一个自定义事件,只能指定事件名</p>
    <div id="ev2">
         <style>
            #ev2{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
        </style>
        Event自定义事件            
    </div>  
    <p>var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });可以指定事件名,后边可以跟一个obj来做指定参数 </p>
     <div id="ev3">
         <style>
            #ev3{
                width: 300px;
                height: 100px;
                line-height: 100px;
                background-color: red;
                color: #FFF;
                text-align: center;                
            }
         </style>
        CustomEvent自定义事件            
    </div>
        var ev2 = document.getElementById("ev2");        
        var signin = new Event("event");
        ev2.addEventListener("event",function(){
            console.log("event dispatch");
        });
        setTimeout(function(){
            ev2.dispatchEvent(signin);//此处传入的是事件对象signin,而不是事件名event
        },1000);        
        var ev3 = document.getElementById("ev3");        
        var signout = new CustomEvent("CustomEvent",{
            detail:{
                name:"ld",sex:"female"
            }
        });
        ev3.addEventListener("CustomEvent",function(e){
            console.log("CustomEvent dispatch");
            console.log(e);
            console.log(e.detail.name);
        });
        setTimeout(function(){
            ev3.dispatchEvent(signout);
        },1000);        
//输出结果
//event dispatch
//CustomEvent dispatch
//CustomEvent {isTrusted: false, detail: {…}, type: "CustomEvent", target: div#ev3, currentTarget: div#ev3, …}bubbles: falsecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falsedetail: {name: "ld", sex: "female"}eventPhase: 0isTrusted: falsepath: (5) [div#ev3, body, html, document, Window]returnValue: truesrcElement: div#ev3target: div#ev3timeStamp: 37.19999999884749type: "CustomEvent"__proto__: CustomEvent
//ld


点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消