代码之家 › 专栏 › 技术社区 › Casey

原型JS事件侦听器和激发事件的问题

prototypejs javascript

Casey · 技术社区 · 15 年前

我正在学习原型框架和JavaScript的一般知识,并且正在尝试重构一些现有的代码,以便使用事件监听器从类内的数据创建一些HTML。我在让事件触发和让相应的侦听器代码工作方面遇到问题。下面是一个小例子,我不能开始工作:

<html>
<head>
    <title>Event Test</title>
    <script type="text/javascript" src="prototype.js"></script>

    <script type="text/javascript">
        MyClass = Class.create({
            initialize: function(args) {
                this.div_id = $(args['div_id']);
            },
            test: function() {
                this.div_id.fire('ag:test');
            }
        });

        var myclass = new MyClass({div_id:'test'});

        $('test').observe(myclass, 'ag:test', function(evt){
            $('test').insert('<p>Test</p>');
        });


        myclass.test();
    </script>
</head>

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

我的意图是,当类被实例化时,或者在类上调用其他方法时,我只想向DIV添加一点HTML。现在这个代码什么都不做。使用firebug,似乎我的类从未在这里被实例化。我一直在查看示例和原型文档,但无法找出我做错了什么。

谢谢!

编辑:在类构造函数中更改为Not Fire事件。

2 回复 | 直到 13 年前

BYK 15 年前

您聆听test div的ag:test事件,但在类上触发该事件,因此没有发生任何事情是非常正常的。您应该监听正在创建的类的事件,但之后就不能捕获实例化事件,因为在实例化类之前不能附加事件处理程序。所以你必须找到另一种方法。

Casey 15 年前

知道了!这是延迟加载的问题。在最初的问题中,我在头部定义了所有的javascript。它失败了,因为当我使用$(“test”)时,元素还不存在。正确的代码是:

<html>
<head>
    <title>Event Test</title>
    <script type="text/javascript" src="prototype.js"></script>

    <script type="text/javascript">
        MyClass = Class.create({
            initialize: function(args) {
                this.div_id = $(args['div_id']);
            },
            test: function() {
                this.div_id.fire('ag:test');
            }
        });


    </script>
</head>

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

    <script type="text/javascript">
        var myclass = new MyClass({div_id:'test'});

        $('test').observe('ag:test', function(evt){
            $('test').insert('<p>Test</p>');
        });


        myclass.test();
    </script>
</body>