• 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高级程序设计》摘抄,在加上自己的一些理解。如果有错误,欢迎指正。

  • 相关阅读:
    swift2.2当中的inout参数的使用
    Swift的7大误区
    Swift 设计指南之 编程规范
    我为什么用 SQLite 和 FMDB 而不用 Core Data
    ios学习笔记——代理设计模式
    ios学习笔记——UIImagePickerController
    ios学习笔记——保存图片到相册
    KVC中setValuesForKeysWithDictionary: (转载)
    ios学习笔记——GCD简介
    ios学习笔记——操作队列NSOperation的基本操作
  • 原文地址:https://www.cnblogs.com/ycherry/p/7281075.html
Copyright © 2020-2023  润新知