事件

来源：互联网发布：linux操作vasp计算编辑：程序博客网时间：2024/05/17 06:23

    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        onclickload         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>

阅读全文

0 0