JavaScript的事件对象_事件流

 

事件流
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。


事件冒泡,是从里往外逐个触发。事件捕获,是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的 Netscape 默认情况。而现在的浏览器要使用 DOM2 级模型的事件绑定机制才能手动定义事件流模式。
JavaScript的事件对象_事件流

<script type="text/javascript">



    window.onload = function(){

        document.onclick = function () {

            alert('我是 document');

        };

        document.documentElement.onclick = function () {

            alert('我是 html');

        };

        document.body.onclick = function () {

            alert('我是 body');

        };

        document.getElementById('box').onclick = function () {

            alert('我是 div');

        };

        document.getElementsByTagName('input')[0].onclick = function () {

            alert('我是 input');

        };

    };

    

</script>

</head>

<body>

    <div id="box" style="width:100px; height:100px; background-color:#F00">

           <input  type="button" value="按钮"/>

    </div>

</body>

 阻止冒泡

<script type="text/javascript">



    window.onload = function(){

        document.onclick = function () {

            alert('我是 document');

        };

        document.documentElement.onclick = function () {

            alert('我是 html');

        };

        document.body.onclick = function () {

            alert('我是 body');

        };

        document.getElementById('box').onclick = function () {

            alert('我是 div');

        };

        document.getElementsByTagName('input')[0].onclick = function (evt) {

            var e = evt || window.event;

            alert('我是 input');

            e.stopPropagation()

        };

    };

</script>

</head>

<body>

    <div id="box" style="width:100px; height:100px; background-color:#F00">

           <input  type="button" value="按钮"/>

    </div>

</body>

 

你可能感兴趣的:(JavaScript)