Js DOM 详解

最新推荐文章于 2024-08-21 14:09:37 发布

weixin_30262255

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liangfengbo/p/7439717.html

版权

DOM事件类

基本概念 DOM事件的级别

1.DOM0 element.onclick = function(){}

2.DOM2 element.addEventListener("click",function(){},false)

3.DOM3 element.addEventListener("key",function(){},falses)

一、DOM事件模型


1.捕获 
2.冒泡

二、DOM事件流

当浏览器和用户交互的时候

事件捕获 - 目标 - 冒泡

三、描述DOM事件捕获的具体流程

具体流程： window - document - html - boby - element

四、Event对象的常见应用

elent.preventDefault() 阻止默认事件
elent.stopPropagation() 阻止冒泡流
elent.stopImmediatePropagation() 可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

elent.currentTarge()  当前被点击的元素
elent.target()  
当前被绑定的元素 （父元素）

五、自定义事件

var eve = new Event("custome");

ev.addEventListener("custome",function(){
    
    console.log("custome");
})

触发：

ev.dispatchEvent(eve);

代码演示

<body>

    <div id="ev">

        <style type="text/css">
            
            #ev{
                width: 300px;
                height:100px;
                background: red;
                color: #fff;
                text-align: center;;
                line-height: 100px;
            }
        </style>
        
        目标元素

    </div>
    <script type="text/javascript">
        
        // 捕获的流程 window-document - body - html - ev

        // **如果是冒泡 把 true 改为false

        // window

        var ev = document.getElementById("ev");

        window.addEventListener("click",function(){

            console.log("window captrue");

        },true);

        // document

        document.addEventListener("click",function(){

            console.log("document captrue");

        },true);

        // body

        document.documentElement.addEventListener("click",function(){

            console.log("body captrue");
        },true)

        // html

        document.documentElement.addEventListener("click",function(){

            console.log("html captrue");
        },true)

        // body

        document.documentElement.addEventListener("click",function(){

            console.log("body captrue");
        },true)

        // click

        ev.addEventListener("click",function(){

            console.log("ev captrue");
        },true)

        // 自定义事件

        var ev = new Event("test");

        ev.addEventListener("test",function () {

            console.log("test dispath");
        })

        ev.dispatchEvent(eves);


    </script>
</body>

当点击触发div时候，事件发生的顺序为：

window captrue
js.dom.html:54 document captrue
js.dom.html:62 body captrue
js.dom.html:69 html captrue
js.dom.html:76 body captrue
js.dom.html:83 ev captrue

转载于:https://www.cnblogs.com/liangfengbo/p/7439717.html

weixin_30262255

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js DOM 详解

DOM事件类基本概念 DOM事件的级别1.DOM0 element.onclick = function(){}2.DOM2 element.addEventListener("click",function(){},false)3.DOM3 element.addEventListener("key",function(){},falses)一、DOM事件模型1.捕获 2.冒...
复制链接

扫一扫