javascript - 将附加参数传递到事件处理程序中

发布于 2024-09-04 16:36:42 字数 1747 浏览 7 评论 0原文

我有一个 javascript 对象，它有一些定义的变量并附加一些事件处理程序。我希望事件处理程序能够访问已定义的变量。有办法做到这一点吗？事件处理程序位于其自己的本地范围内，因此无法访问对象变量。有没有办法在不使用全局变量的情况下传递它们？

我有一个想法，闭包可以解决这个问题，但我不确定如何解决。

下面的代码将在页面加载时打印对象名称，但是当您单击地图 dom 对象时，它会显示名称未定义。

非常感谢所有帮助。

科尔姆

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Test</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            window.onload = function() {
                var e = new EvtTest();
                e.printName();
                e.attachEvents();
            };

            function EvtTest() {
                this.name = "EvtTest";
            }

            EvtTest.prototype.name = null;

            EvtTest.prototype.attachEvents = function () {
                var map = document.getElementById("map");
                map.addEventListener ('click', this.evtHandler, false);
            };

            EvtTest.prototype.printName = function () {
                console.log ("This Name : " + this.name);
            };

            EvtTest.prototype.evtHandler = function (e) {
                e.preventDefault();
                console.log ("Name : " + this.name);
            };
        </script>
        <style type="text/css">
            html, body {
                height:100%;
                width:100%;
                margin: 0;
                background-color:red;
            }
            #map {
                height: 300px;
                width: 300px;
                background-color:yellow;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

    </body>
</html>

原文

I have a javascript object which has some defined variables and attaches some event handlers. I'd like the event handlers to have access to the defined variables. Is there a way to do that ? The event-handlers are within their own local scope so don't have access to the object variables. Is there a way to pass them in without using global variables ?

I have an idea that closures would solves this but I'm not sure how.

the code below will print the object name when the page loads but when you click on the map dom object it will say name is undefined.

All help much appreciated.

Colm

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Map Test</title>
        <meta charset="utf-8" />
        <script type="text/javascript">
            window.onload = function() {
                var e = new EvtTest();
                e.printName();
                e.attachEvents();
            };

            function EvtTest() {
                this.name = "EvtTest";
            }

            EvtTest.prototype.name = null;

            EvtTest.prototype.attachEvents = function () {
                var map = document.getElementById("map");
                map.addEventListener ('click', this.evtHandler, false);
            };

            EvtTest.prototype.printName = function () {
                console.log ("This Name : " + this.name);
            };

            EvtTest.prototype.evtHandler = function (e) {
                e.preventDefault();
                console.log ("Name : " + this.name);
            };
        </script>
        <style type="text/css">
            html, body {
                height:100%;
                width:100%;
                margin: 0;
                background-color:red;
            }
            #map {
                height: 300px;
                width: 300px;
                background-color:yellow;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

    </body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷雾森÷林ヴ 2024-09-11 16:36:42

一点点摆弄：

EvtTest.prototype.attachEvents = function () {
    var that = this;
    var map = document.getElementById("map");

    map.addEventListener ('click', function () {
        that.evtHandler();
    }, false);
};

现在 evtHandler 中的 this 引用了您期望的对象。

A little bit of fiddling:

EvtTest.prototype.attachEvents = function () {
    var that = this;
    var map = document.getElementById("map");

    map.addEventListener ('click', function () {
        that.evtHandler();
    }, false);
};

Now this inside evtHandler references the object you expected.

回复收藏 0 原文

~没有更多了~