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

  • 相关阅读:
    Ext JS学习第三天 我们所熟悉的javascript(二)
    Ext JS学习第二天 我们所熟悉的javascript(一)
    Ext JS学习第十七天 事件机制event(二)
    Ext JS学习第十六天 事件机制event(一)
    Ext JS学习第十五天 Ext基础之 Ext.DomQuery
    Ext JS学习第十四天 Ext基础之 Ext.DomHelper
    Ext JS学习第十三天 Ext基础之 Ext.Element
    Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
    针对错误 “服务器提交了协议冲突. Section=ResponseHeader Detail=CR 后面必须是 LF” 的原因分析
    C# 使用HttpWebRequest通过PHP接口 上传文件
  • 原文地址:https://www.cnblogs.com/ycherry/p/7281075.html
Copyright © 2020-2023  润新知