zoukankan      html  css  js  c++  java
  • JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

    1.HTML事件处理程序

    某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定。这个特性的值应该是能够执行的JS代码。例如:按钮单击是要执行一些js代码,可以像下面:

    <input type="button" value="click me" onclick="showMessage()" />

    在js中就可以像下面一样处理:

    <script>

    function showMessage(){

    alert("hello function");

    alert(this == window) // true

    }

    </script>

    此时showMessage中的this指向的window,但是showMessage函数可以被多个元素同时调用。

    但是此方法有的缺陷就是js和html耦合在一起,如果要更换事件处理程序,需要改html和js两个地方。所以很多人喜欢用dom事件处理程序。

    2. DOM0级事件处理程序

    通过js指定事件处理程序的方式,就是将一个函数赋值给一个事件处理程序的属性。

    每个元素(包括window和document)都有自己的事件处理程序的属性,这些属性通常全部小写,就像onclick,将这个属性的值设置为一个函数,就可以指定事件处理程序。如下:

    <html>
        <head></head>
        <body>
            <input type="button" value="click me2" id="btn2">
            <script>
            var btn2 = document.getElementById("btn2");
            btn2.onclick = function(){
                console.log(this);
            }
            </script>
        </body>
    </html>

    上面的this输出的结果是:<input type="button" value="click me2" id="btn2">,说明dom0级事件处理程序中的this指向的是当前元素本身,而不是windows,通过this可以访问元素的任何属性和任何方法。

    3.DOM2级事件处理程序

    DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法,并且接受3个参数,要处理的事件名,作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true,则表示在捕获阶段,是false则表示在冒泡阶段。

    <html>
        <head></head>
        <body>
            <input type="button" value="click me2" id="btn2">
            <script>
            var btn2 = document.getElementById("btn2");
            //addEventListener接受3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true,则表示在捕获阶段,是false则表示在冒泡阶段
            btn2.addEventListener('click',function(){
                console.log(this);
            }, false);
            </script>
        </body>
    </html>

    上面代码输出的结果和dom0级代码输出的结果一样:<input type="button" value="click me2" id="btn2">,说明dom2级事件处理程序中的this指向的是当前元素本身,而不是windows。

    注意:addEventListener()方法只能通过removeEventListener()方法来移除。

    但是使用removeEventListener()方法移除事件的时候需要注意的一点:

    <html>
        <head></head>
        <body>
            <input type="button" value="click me2" id="btn2">
            <script>
            var btn2 = document.getElementById("btn2");
            btn2.addEventListener('click',function(){
                console.log(this);
            }, false);
            btn2.removeEventListener('click',function(){//没有用
                console.log(this);
            }, false);
            </script>
        </body>
    </html>

    上面的方法移除click事件是没有用的,为什么呢?因为addEventListener和removeEventListener的第二个参数需要同一个函数,而上面的代码看似是同一个函数,其实不然,它们是功能相同的,但是是不同的匿名函数。如果需要正真移除事件处理程序,需要向下面这样:

    <html>
        <head></head>
        <body>
            <input type="button" value="click me2" id="btn2">
            <script>
            var btn2 = document.getElementById("btn2");
            var handler = function(){
                console.log(this);
            }
            btn2.addEventListener('click', handler, false);
            btn2.removeEventListener('click',handler, false);
            </script>
        </body>
    </html>

    像上面一样,就可以保证addEventListener和removeEventListener的第二个参数是同一个函数。

    attachEvent()与detachEvent()

    在早期的IE浏览器,如:IE8中,没有实现addEventListener()removeEventListener(),但提供了两个替代方法attachEvent()detachEvent()。由于Microsoft当前最新的系统Windows 10中,已放弃IEedge浏览器替代,所在attachEvent()detachEvent()已没有意义。

    上面的内容基本上是从《JavaScript高级程序设计》摘抄,在加上自己的一些理解。如果有错误,欢迎指正。

  • 相关阅读:
    Chapter 2 Sockets and Patterns【选译,哈哈】 Part 2 Messags Partterns
    WPF动态更改Image控件图片路径
    Chapter 2 Sockets and Patterns【选译,哈哈】 Part 1
    Chapter 2 Sockets and Patterns【选译,哈哈】 Part 4 Handling Errors and ETERM
    Chapter 2 Sockets and Patterns【选译,哈哈】 Part 3 Messags Partterns
    Visual Studio 2008 测试项目无法正常显示解决办法
    Ext.NET控件介绍—Form控件
    ThoughtWorks(中国)程序员读书雷达
    Ext.net 中日期格式的计算
    Sql 分割 键值对字符串 得到某值对应的名称
  • 原文地址:https://www.cnblogs.com/ycherry/p/7281075.html
Copyright © 2011-2022 走看看