javascript事件模型

来源：互联网发布：淘宝买家资料获取器编辑：程序博客网时间：2024/06/17 15:07

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>

阅读全文

0 0