代码之家 › 专栏 › 技术社区 › 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前