事件

最新推荐文章于 2023-10-25 08:00:00 发布

南张门

最新推荐文章于 2023-10-25 08:00:00 发布

阅读量197

点赞数

分类专栏： Javascript 文章标签：事件 javascript

本文链接：https://blog.csdn.net/haochangdi123/article/details/77524929

版权

Javascript 专栏收录该内容

43 篇文章 3 订阅

订阅专栏

    JavaScript事件是由访问Web页面的用户引起的一系列操作，例如：用户点击。当用户执行某些操作的时候，再去执行一系列代码。

    事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。

一.事件流：

描述的是从页面中接收事件的顺序。
IE事件：事件冒泡
Netscape事件：事件捕获

1.事件冒泡

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv">click Me</div>
    </body>
    </html>
    如果你单击页面中的div,click事件顺序：
       div   
       body
       html
       document
    点击div，事件会顺着DOM树向上传播

2.事件捕获

    最具体的节点在最后接收事件。
        以上面的例子为例，点击div触发事件顺序为：
        document
        html
        body
        div
        document对象首先接收click事件，然后事件顺着DOM树依次向下。

3.DOM事件流

    “DOM2级事件流”规定事件流包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。
    即使“DOM2级事件”明文规定，事件捕获不会涉及事件目标。但是浏览器都涉及了，这就是说有2次机会触发事件对象上的事件。
    (IE8及之前不支持DOM事件流)

二.事件处理程序

click等叫做事件的名字。响应某个事件的函数叫事件处理程序(或事件监听器)

事件处理程序以“on”开头。
事件           事件处理程序
click        onclick
load         onload

1.HTML事件处理程序

<input type="button" value="click" onclick="alert('click')">
    单击按钮，弹出“click”。
    但是要注意不能使用未转义的HTML的语法字符。如<和>

也可以调用js中的函数
    <input type="button" value="click" onclick="add()">
    <script type="text/javascript">
        function add(){
            alert("pppppp")
        }
    </script>
    事件处理程序中的代码在执行时，有权访问全局环境下的任何代码。

这样指定的事件处理程序，会创建一个封装这元素属性值的函数。函数中有一个局部变量event，就是事件对象。
    <!--通过event变量，可以访问事件对象-->
    input type="button" value="click me" onclick="alert(event.type)">
    //"click"
    <!--在函数的内部this指事件的目标对象-->
    <input type="button" value="click me" onclick="alert(this.value)">
    //"click me"

缺点：

    1.时差问题，HTML加载快，可能用于点击按钮时，js还没有加载完成。就会报错。
    所以用try-catch语句，以便错误不会呈现给用户。
    <input type="button" value="click" onclick="try{add();}catch(ex){}">
    <script type="text/javascript">
        function add(){
            alert("pppppp")
        }
    </script>

    2.扩展事件处理程序的作用域链在不同的浏览器会导致不同的结果。

    3.HTML和js紧密耦合，如果要改变事件处理程序就要改两个地方

2.DOM0级事件处理程序

就是将一个函数赋值给一个事件处理程序。

    <button id="box">click</button>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.onclick = function(){
            alert(this.id);
        } 
        //"box"
    </script>
    this指的是当前元素。

这样添加的事件处理程序会在事件流的冒泡阶段被处理。
DOM0级事件可以删除
box.onclick = null;

3.DOM2级事件处理程序

"DOM2"级事件定义了两个方法，用于处理指定和删除事件处理程序的操作。

3.1.addEventListener()添加事件

参数： 1.事件名
      2.作为事件处理程序的函数
      3.false(捕获阶段)或true(冒泡阶段)

var box = document.getElementById("box");
box.addEventListener("click", function(){
        alert(this.id);
},false);
//"box"

可以添加两个事件，只要写两个addEventListener就行。
    box.addEventListener("click", function(){
            alert("this is click");
        },false);
    //"this is click"
这样就会弹出两个，先弹box后弹this is click。

3.2removeEventListener()移除事件

要求：添加的参数和addEventListener一样
*都是注意参数2事件处理程序要是一个，不是说一样，是一个*

    <button id="box">click</button>
    <script type="text/javascript">
        var box = document.getElementById("box");
        var a = function(){
            alert("this is click");
        }
        box.addEventListener("click", a,false);
        box.removeEventListener("click",a,false)
    </script>
    这样一样事件处理程序就是一个

如果以下这样就不能移除
    <button id="box">click</button>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.addEventListener("click", function(){
            alert(this.id);
        },false);
        box.removeEventListener("click",function(){
            alert(this.id);
        },false)
    </script>
    因为看着事件处理程序程序是一样的，其实不是一个。

为了更好地兼容，建议在事件冒泡阶段处理程序。

4.IE事件处理程序

在IE中
添加事件和删除事件   attachEvent()和detachEvent()
参数：事件处理程序名称()

4.1 attachEvent()事件处理程序

   IE8以及之前的版本只有冒泡
<button id="box">click</button>

<script type="text/javascript">
    var box = document.getElementById("box");
    box.attachEvent("onclick",function(){
        alert(this === window);
    })
    //true
</script>
DOM0级事件处理程序会在所属元素的作用域中运行。而IE事件处理程序会在全局环境下运行。所以this=window

可以用attachEvent添加多个方法。
box.attachEvent("onclick",function(){
    alert(this === window);
})
box.attachEvent("onclick",function(){
        alert("this is world");
    })
和DOM2不同的是，事件处理是从下向上的。
以上面为例
先弹出this is world后弹出true

4.2 detachEvent()移除事件

参数要求和attachEvent参数一样。其中事件处理程序要是一个。
和DOM2的attachEvent是一样的。
<button id="box">click</button>
<script type="text/javascript">
    var box = document.getElementById("box");
    var a = function(){
        alert("this is click");
    }
    box.attachEvent("click", a);
    box.detachEvent("click",a)
</script>

5.跨浏览器事件处理程序

<button id="box">click</button>
    <script type="text/javascript">
        var EventUtil = {
            addHandler:function(element,type,handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false)
                }else if(element.attachEvent){
                    element.attachEvent("on"+type,handler)
                }else{
                    element["on"+type] = handler;
                }
            },
            removeHandler:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false)
                }else if(element.detachEvent){
                    element.detachEvent("on"+type,handler)
                }else{
                    element["on"+type] = null;
                }
            }
        }

        var box = document.getElementById("box");
        var a = function(){
            alert("this is click")
        };
        EventUtil.addHandler(box,"click",a);
        EventUtil.removeHandler(box,"click",a)
    </script>