js 事件

最新推荐文章于 2024-02-01 17:49:56 发布

chen270

最新推荐文章于 2024-02-01 17:49:56 发布

阅读量170

点赞数

分类专栏： js前端学习

本文链接：https://blog.csdn.net/weixin_42513339/article/details/106576034

版权

js前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.绑定事件处理函数

1.ele.on xxx = function(event){}

2.dom.addEventListener(‘事件类型‘，处理函数，false)；

3.dom.attachEvent('on'+ 事件类型，处理函数)；

3.1 event.stopPropagation();

一.绑定事件处理函数

1.ele.on xxx = function(event){}

可直接看下面例子，就是一个触发事件

<body>
    <div style="width:100px;height:100px;background-color:red"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.onclick=function(){
            console.log('a');
        }
    </script>
</body>

这个例子就是在 div 绑定了一个事件处理函数，也是一种绑定函数的方法。兼容性很好，但是会产生属性覆盖，即一个对象的一个事件只能绑定一个处理函数，如下，只会打印 b

        div.onclick=function(){
            console.log('a');
        }
        div.onclick = function(){
            console.log('b');
        }

而且这种绑定函数方式和直接写在 html里面是相同的（句柄的方式），如下代码：

    <div style="width:100px;height:100px;background-color:red";
onclick="console.log('a')"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
       // div.onclick=function(){
           // console.log('a');
        //}
    </script>

2.dom.addEventListener(‘事件类型‘，处理函数，false)；

IE9以下不兼容，可以为一个事件绑定多个处理程序（W3C标准）
绑定同一个处理函数多次，不能执行多次
第三个参数指定事件是否在捕获或冒泡阶段执行

代码如下：

<body>
    <div style="width:100px;height:100px;background-color:red"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function(){
            console.log('a');
        },false)
    </script>
</body>

以下代码可打印2个‘a’

    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function(){
            console.log('a');
        },false)
        div.addEventListener('click',function(){
            console.log('a');
        },false)
    </script>

以下代码只执行一次

    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',test,false)
        div.addEventListener('click',test,false)

        function test(){
            console.log('a');
        }
    </script>

3.dom.attachEvent('on'+ 事件类型，处理函数)；

IE独有，一个事件同样可以绑定多个处理程序
绑定同一个处理函数多次，可以执行多次
示例：dom.attachEvent('onClick',function(){});

二.事件处理模型

1.事件冒泡

结构上（非视觉上）嵌套的元素，会存在事件冒泡功能，也就是说，同一事件，子元素会向父元素冒泡（自底向上）

如下代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrapper{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .content{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click',function(){console.log('wrapper')},false);
        content.addEventListener('click',function(){console.log('content')},false);
        box.addEventListener('click',function(){console.log('box')},false);   
    </script>
</body>

效果如下：

点击红色，打印 wrapper

点击绿色，打印 content，wrapper

点击黄色，打印 box，content，wrapper

这里冒泡的意思不是视觉上，而是代码层面，如下，点击到box时，会逐渐往外冒泡到父元素；

    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>

把style该成如下：

        .wrapper{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .content{
            margin: 300px;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .box{
            margin: 200px;
            width: 100px;
            height: 100px;
            background-color: orange;
        }

点击黄色图形区时，仍会打印：box，content，wrapper；这也证明这是非视觉上的冒泡

2.事件捕获

结构上存在嵌套的元素，会存在事件捕获，即同一事件，自window捕获至子元素（事件源元素）（自顶向下）
触发条件：ele.addEventListener(type, fn, true)

注：一个事件模型只能拥有一种事件处理模型，即要么冒泡，要么捕获（若绑两个，先捕获，后冒泡），事件捕获只在Google Chrome上好使；

把上面的代码中 false 改成 ture 即改成事件捕获；

        wrapper.addEventListener('click',function(){console.log('wrapper')},true);
        content.addEventListener('click',function(){console.log('content')},true);
        box.addEventListener('click',function(){console.log('box')},true);

点击黄色区域，log打印 wrapper，content，box；跟冒泡相反；

3.取消冒泡

3.1 event.stopPropagation();

注：IE9以下不支持

    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click',function(){console.log('wrapper')},false);
        content.addEventListener('click',function(){console.log('content')},false);
    </script>

上面代码执行后，点击黄色区域，log打印 content，box；

若加上取消冒泡，则log不打印任何东西；

    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click',function(){console.log('wrapper')},false);
        content.addEventListener('click',function(){console.log('content')},false);

        box.onclick = function(e){
            e.stopPropagation();
        }   
    </script>

chen270

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件

一.绑定事件处理函数1.ele.on xxx = function(event){}可直接看下面例子，就是一个触发事件<body> <div style="width:100px;height:100px;background-color:red"></div> <script> var div = document.getElementsByTagName('div')[0]; div.oncli
复制链接

扫一扫