从 HTML 调用 JavaScript 函数

Calling JavaScript functions from HTML

本文关键字：函数 JavaScript 调用 HTML      更新时间：2023-09-26

如何从HTML链接执行JS对象的函数属性？我有以下JS：

function Tester(elem) {
    this.elem = document.getElementById(elem);
}
Tester.prototype.show = function() {
    this.elem.innerHTML = '<a href="javascript: this.test();">test</a>';
};
Tester.prototype.test = function() {
    alert("a");
};  
​

这是 HTML：

<script type="text/javascript">
    var test = new Tester("test");
    test.show();
</script>

当我单击呈现的链接时，它无法识别test()函数。当用户单击链接时，我将如何获得它，执行test()函数？

正确的方法是创建一个 DOM 元素并使用 JavaScript 附加事件处理程序：

Tester.prototype.show = function() {
    var a = document.createElement('a'),
        self = this; // assign this to a variable we can access in the 
                     // event handler
    a.href = '#';
    a.innerHTML = 'test';
    a.onclick = function() {     
        self.test();
        return false; // to prevent the browser following the link
    };
    this.elem.appendChild(a);
};

由于事件处理程序形成闭包，因此它可以访问外部函数(Tester.prototype.show(中定义的变量。请注意，在事件处理程序中，this 不引用您的实例，而是引用处理程序绑定到的元素(在本例中为 a (。MDN对this有很好的描述。

quirksmode.org 有一些关于事件处理、绑定事件处理程序的各种方法、它们的优缺点、浏览器的差异以及this在事件处理程序中的行为方式的精彩文章。

让自己熟悉 DOM 接口当然也很有帮助。

相关文章：