JS 事件深入

最新推荐文章于 2024-05-05 20:09:05 发布

怖呆

最新推荐文章于 2024-05-05 20:09:05 发布

阅读量212

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/u012733415/article/details/51057628

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS 事件分两种类型，冒泡型事件和捕获形事件。
冒泡事件是由微软公司提出的。
捕获事件是由netspace 公司提出的。
之后这两种事件被各大浏览器支持并应用。
IE 9 之前都不支持捕获事件。

code & model

<!DOCTYPE html>
<html>
<head>
    <title>

    </title>
</head>
<body>
    <div id="box">
        <button id="btn">click</button>
    </div>

    <script type="text/javascript">
        var box = document.getElementById('box');
        var btn = document.getElementById('btn');

        var isbubbled = false;

        box.addEventListener('click',function() {
            console.log('box')
        },isbubbled);

        btn.addEventListener('click',function() {
            console.log('btn')
        },isbubbled);

    </script>

</body>
</html>

这里写图片描述

冒泡型事件

冒泡事件的执行是从被点击的元素一步一步向父级元素。

首先button 的点击事件会被执行，而后div 的事件又被执行。

当div 的父级元素也有点击事件，则也会被执行(这里没有为div 的父级元素添加事件)。

当点击上面代码的button 元素时，则会输出

btn
box

捕获型事件

捕获事件的执行正好和冒泡事件的执行步骤相反，大部分浏览器都是使用的冒泡型事件，如果想更改为捕获型事件，则可以把addEventListener 函数的第三个参数设置为true。

停止事件传播

有时候有这个情况，当点击按钮时，希望父级元素的点击事件不被触发(父级元素有点击事件的情况下)，则可以使用事件对象的e.stopPropagation这个函数。

var clickEvent = function clickEvent(e){
    e.stopPropagation();
}

btn.addEventListener('click',clickEvent);

还有种情况是阻止一个元素的默认事件，比如一个超链接标签，它的默认事件是打开一个新的网页。如何组织这个事件的发生？可以使用preventDefault 函数。

var cancel = function cancelEvent(e){
    e.preventDefualt();
}

element.addEventListener('click',cancel);

IE 兼容

IE 9 之前的浏览器都是比较非主流，很多大众的js 函数都不支持，包括添加事件和移除事件。还有停止事件的传播和取消默认事件。

添加/移除事件

var show = function(e){alert()}
btn.attachEvent('onclick',show);
btn.detachEvent('onclick',show);

注意：使用attachEvent 和 detachEvent 函数对事件操作事件名称前要加 on

停止传播

var show = function(e){
    window.e.cancelBubble = true;
}

btn.attachEvent('onclick',show);

取消默认事件

var cancel = function(e){
    window.e.returnValue = null;
}
element.attachEvent('onclick',cancel)

怖呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 事件深入

JS 事件分两种类型，冒泡型事件和捕获形事件。冒泡事件是由微软公司提出的。捕获事件是由netspace 公司提出的。之后这两种事件被各大浏览器支持并应用。 IE 9 之前都不支持捕获事件。code & model<!DOCTYPE html><html><head> <title> </title></head><body> <div id="box">
复制链接

扫一扫