js事件

最新推荐文章于 2024-06-10 17:00:16 发布

爱傻笑的人

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量114

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34838522/article/details/79455416

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、事件冒泡
例如当我们触发一个节点的按钮事件时，这个事件会由这个节点沿着DOM树向上传播，在每一个节点都会发生直到文档节点。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div onclick="click()">点击</div>
</body>
</html>

例如上面这段代码的冒泡顺序为div>body>html>document.
二、事件捕获
事件捕获的思路与事件冒泡的思路刚好相反，同样以上面的例子为例，节点接收到事件的顺序为document>html>body>div。那么现在就要思如下问题，事件冒泡与事件捕获是否相互矛盾？如何利用它们以及避免它们？
三、DOM事件流
DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，截获具体事件，然后是目标接收到事件，最后是事件冒泡。所以最初哪个例子的事件执行顺序应该为：点击按钮、document捕获到事件向下传递直到具体目标div，然后从div沿着DOM树向上冒泡，将事件传回document（文档）。
四、事件处理程序
有如下几种：

HTML处理程序
在HTML标签中添加事件

<input type="button" name="input" onclick="show();">

D0M0级处理程序

var btn=document.getElementById('button');
    btn.onclick=function(){
        alert(this.id);
}

DOM2级事件处理程序
使用addEventListener()监听事件，removeEventListener()移除事件。它们都包含三个参数，第一个为事件名称，第二个为事件响应的函数、第三个位布尔值，true表示捕获阶段，false表冒泡阶段。上面的按钮事件可以替换为
```
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
```
removeEventListener()移除事件时，里面的参数必须与addEventListener()的一样。addEventListener()可以监听多个事件，事件发生的顺序跟事件添加的顺序相同
IE事件处理程序
在IE中有两个与DOM类似的方法：attachEvent()和detachEvent(),接收两个参数。
在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用 attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。attachEvent()添加多个事件时的，事件的执行顺序跟addEventListener()相反
- 跨浏览器事件处理程序

要保证处理事件的代码能在大多数浏览器下一致地运行，只需关注冒泡阶段。思路：创建一个对象，对象中包含两个方法分别为添加事件和移除事件，在函数中做跨浏览器的事件处理。

var obj={
        add:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent(type,handler);
            }else{
                element['on'+type]=handler;
            }
        },
        remove:function(){
            if(element.removeEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent(type,handler);
            }else{
                element['on'+type]=null;
            }
        }
    }
    var btn = document.getElementById("button");
    obj.addHandler(btn, "click", handler);

五、事件对象

DOM事件对象
1. 理解this、currentTarget和target
2. 使用preventDefault()阻止默认行为(只有当cancelable为true时)
3. stopPropagation()方法用于立即停止事件在 DOM 层次中的传播，即取消进一步的事件捕获或冒泡
4. eventPhase 用来确定事件当前正位于事件流的哪个阶段，即捕获、目标还是冒泡
IE事件对象
理解returnValue、cancelBubble、srcElement、和this
跨浏览器事件对象

var obj={
        add:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent(type,handler);
            }else{
                element['on'+type]=handler;
            }
        },
        remove:function(){
            if(element.removeEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent(type,handler);
            }else{
                element['on'+type]=null;
            }
        },

        getEvent: function(event){
            return event ? event : window.event;//返回事件对象的引用
        },
        getTarget: function(event){//返回事件的目标
            return event.target || event.srcElement;
        },
        preventDefault: function(event){//阻止默认行为
            if (event.preventDefault){
                event.preventDefault();
        } else {
                event.returnValue = false;
            }
        },
    }

六、实现事件代理
什么是事件代理？事件代理其实就是事件委托，是用来解决事件处理程序过多的一种方案，利用了事件冒泡。思路：在DOM树尽量高的层次上设置一个事件处理程序。如为下面每个div添加一个click事件。传统的解决方法为

    var div1=document.getElementById('div1');
        var div2=document.getElementById('div2');
        var div3=document.getElementById('div3');

        div1.onclick=function(e){
            console.log(e.target)
        }
        div2.onclick=function(e){
            console.log(e.target)
        }
        div3.onclick=function(e){
            console.log(e.target)
        }

使用事件代理

var div=document.getElementById('div');
    div.onclick=function(e){
        switch(e.target.id){
            case 'div1':console.log(e.target.id);break;
            case 'div2':console.log(e.target.id);break;
            case 'div3':console.log(e.target.id);break;
        }
    }

使用事件代理的好处：

document对象可以很快就访问，而且可以在页面生命周期的任何时点为它添加事件处理程序
在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花时间也更少。
整个页面占用的内存空间更少，能够提升整体性能。

练习：自己实现一个事件模型，有两个函数，一个bind一个trigger，分别实现绑定事件和触发事件，核心需求就是可以对某一个事件名称绑定多个事件响应函数，然后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。

爱傻笑的人

关注

0
点赞
踩
0

收藏

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

一、事件冒泡例如当我们触发一个节点的按钮事件时，这个事件会由这个节点沿着DOM树向上传播，在每一个节点都会发生直到文档节点。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div onclick=&qu
复制链接

扫一扫