javascript事件模型

最新推荐文章于 2024-09-26 21:28:22 发布

pobu168

最新推荐文章于 2024-09-26 21:28:22 发布

阅读量477

点赞数

分类专栏：前端文章标签： js事件模型 JavaScript事件模型

本文链接：https://blog.csdn.net/fengjingyu168/article/details/77575055

版权

前端专栏收录该内容

44 篇文章 1 订阅

订阅专栏

JavaScript事件模型通过下面的实例你一定可以搞清楚：

javascript中有两种事件模型：DOM0，DOM2

DOM0：

<body>
<p id = 'click'>click me</p>
</body>
<script>
    /**
     * javascript中有两种事件模型：DOM0，DOM2
     * DOM0中，一个dom对象只能注册一个同类型的函数，
     * 因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。
     */


    var click = document.getElementById('click');
    console.info(click)
    click.onclick = function(){
        alert('first function');
    };
    click.onclick = function(){
        alert('second function')
    }
</script>

DOM2：
<body>
    <div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
        <div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
    </div>
    <script>
        /**
         * javascript中有两种事件模型：DOM0，DOM2
         * 在DOM2级中使用addEventListener和removeEventListener来注册和解除事件
         * 一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数
         */


        /**
         * addEventListener('事件名称','事件回调','捕获/冒泡')
         * 在父节点中不包含事件的情况下，是捕捉还是冒泡没有分别
         */
        var click = document.getElementById('inner');
        click.addEventListener('click', function () {
            alert('click one');
        }, false);
        click.addEventListener('click', function () {
            alert('click two');
        }, false);
    </script>
    </body>

事件流发生机制：
<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
    <div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
    /**
     * addEventListener('事件名称','事件回调','捕获/冒泡')
     *true代表捕获事件，false代表冒泡事件
     *
     * 在父元素包含可触发事件时(子元素触发事件时也存在触发父元素可能)，
     * 子元素的事件设置为捕捉还是冒泡对事件的最终执行顺序无影响，
     * 关键在父元素，如果是捕捉，则父元素事件先执行，如果是冒泡则子元素事件先执行
     */
    var click = document.getElementById('inner');
    var clickouter = document.getElementById('outer');
    click.addEventListener('click', function () {
        alert('inner show');
    }, false);
    clickouter.addEventListener('click', function () {
        alert('outer show');
    }, false);


    /**
     * 同一元素注册多个相同事件的执行顺序与捕捉还是冒泡的状态无关，与注册的先后顺序有关
     */
//    var click = document.getElementById('inner');
//    click.addEventListener('click', function () {
//        alert('capture show');
//    }, false);
//    click.addEventListener('click', function () {
//        alert('bubble show');
//    }, true);


</script>
</body>

阻止冒泡事件：
<body>
<div id='outer' style='margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
    <div id="inner" style='margin-left:20px; width: 50px;height:50px; background: green;'></div>
</div>
<script>
    /**
     *可以使用event.stopPropagation()阻止事件冒泡，
     * 在此情况下就不会执行父级冒泡事件
     **/
    var click = document.getElementById('inner');
    var clickouter = document.getElementById('outer');
    click.addEventListener('click',function(event){
        alert('inner show');
        event.stopPropagation();
    },true);//子元素设置捕捉或冒泡对事件无影响
    clickouter.addEventListener('click',function(){
        alert('outer show');
    },false);
    //父元素若设置为捕捉，则会首先执行，阻止无效果
</script>
</body>