HTML的可变范围调用函数

Question

我试图了解如何从HTML调用对象的方法，而不将其声明为全局变量 。 可能吗？ 我真的不想污染全局范围，因此我认为必须有一种避免这种情况的方法...

假设我有一个javascript对象，其中的一种方法称为clearSelection() 。 此clearSelection()方法仅擦除html输入的文本值，并执行其他与该问题完全无关的其他操作。

问题是当我在$(function(){});声明此对象时$(function(){}); 作为该函数的局部变量，由于无法定义，我无法从输入的onclick html属性访问它。

我对此的解决方案是将这个对象声明为全局变量，可能不是在window对象内部，而是在window.document.body内部这样危害较小（我相信更糟的是在window对象内部声明它，所以我想这仍然很糟糕...）

这是为您提供的一些代码：

我的对象：

function MyObject(foo,bar){
    ...
    ...
    this.clearSelection() = function(){
        // do some useful stuff here
        ...
    }
}

我的html中的脚本标签：

<script>
$(function(){
    var myObject = new MyObject(baz,bal);
});
</script>

我的按钮declatarion @ html：

<button type="button" onclick="myObject.clearSelection()">Clear</button>

因此，javascript控制台会抱怨，因为未定义myObject ，并且我认为这是由于范围所致，因为从HTML我无法访问对象（ myObject ）所在的范围。

---

目前的方法

这就是我这样做的方式，因此它可以正常工作，但是我真的不喜欢它，我正在寻求另一种更清洁的方法。 对象结构和html button相同，因此我将跳过它们：

<script>
$(function(){
    window.document.body.myObject = new MyObject(baz,bal);
});
</script>

Answer 1

您应该使用.on（）并使用jQuery绑定事件处理程序，并摆脱难看的内联单击处理程序。

将ID属性添加到button元素并使用ID选择器（“ #id”）

$(function(){
    var myObject = new MyObject(baz,bal);
    $('#clearSelection').on('click', function(){
        myObject.clearSelection();
    })
});

HTML

<button type="button" id="clearSelection">Clear</button>