Вызовите метод экземпляра класса onclick javascript

Question

У меня есть файл JavaScript с классами, которые содержат функции метода.Мне было интересно, как выполнить вызов метода экземпляра класса из события onClick.

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        document.write(this.instanceData);
    }
}

var classInstance = new MyClass();

Как бы я вызвал функцию DisplayData для classInstance из события onClick.Например:

<button onClick="classInstance.DisplayData()">Click Me!</button>

Что не работает, но помогает мне уточнить, что я хочу сделать.Есть предложения?

Answer 1

http://jsfiddle.net/EyMCQ/1/

Как вы заметили, это не работает, потому что объявленная вами переменная остается в области действия исполняемого блока. Если вы удалите var, он будет работать, потому что classInstance теперь находится в глобальной области видимости.

function MyClass() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    }
}

classInstance = new MyClass();​

и назовите это так:

<button onClick="classInstance.DisplayData.call(classInstance)">Click Me!</button>​

http://jsfiddle.net/EyMCQ/2/

Answer 2

Ваш код работает нормально, если он находится в глобальной области, за исключением того, что вы не можете использовать document.write после загрузки страницы.Итак:

function MyClass()
{
    this.instanceData = "Display Me";

    this.DisplayData = function()
    {
        alert(this.instanceData); // <=== only change here
    }
}

var classInstance = new MyClass();

... отлично работает с вашим атрибутом onclick. Живой пример | source

document.write в основном предназначен для использования во время загрузки страницы.Если вы вызываете его после загрузки страницы, это подразумевает document.open, который стирает текущий документ, а заменяет его содержимым, которое вы пишете.Если вы хотите добавить страницу после загрузки страницы, используйте createElement и appendChild, устанавливая содержимое элемента с помощью innerHTML.Например:

var p = document.createElement('p');
p.innerHTML = "Hi there";
document.body.appendChild(p);

... добавляет на страницу абзац, содержащий «Привет!».

Однако , я призываю вас не использовать onclickатрибуты и тому подобное, не в последнюю очередь потому, что они требуют доступа к глобальным переменным и функциям, и я рекомендую избегать использования глобальных переменных и функций в максимально возможной степени (и вы можете почти полностью избежать их).Вместо этого используйте современные методы подключения обработчиков событий: addEventListener и (для поддержки IE8 и более ранних версий) attachEvent.

Так измените свой пример так, чтобыон не создает глобальные переменные:

(function() {
    function MyClass()
    {
        this.instanceData = "Display Me";

        this.DisplayData = function()
        {
            alert(this.instanceData);
        }
    }

    var classInstance = new MyClass();

    // ...and hook it up
    var button = document.getElementById("theButton");
    if (button.addEventListener) {
        button.addEventListener('click', function() {
            classInstance.DisplayData();
        }, false);
    }
    else if (button.attachEvent) {
        button.attachEvent('onclick', function() {
            classInstance.DisplayData();
        });
    }
    else {
        // Very old browser, complain
    }
})();

(обратите внимание, что имя события "click" с addEventListener, "onclick" с attachEvent.)

Это предполагаеткнопка выглядит следующим образом:

<button id="theButton">Click Me!</button>

... и что ваш код запускается после того, как кнопка уже была помещена на страницу (например, ваш скрипт внизу страницы или запускается в ответ на какое-либо событие).

Теперь трудно проверить, использовать ли addEventListener или attachEvent каждый раз.Кроме того, вы можете не захотеть, чтобы каждый элемент, с которым вам нужно работать, имел id.Здесь используется хорошая библиотека JavaScript, такая как jQuery , Prototype , YUI , Closure или любой из нескольких других полезно.Они сглаживают материал событий (и многие другие особенности) для вас и предоставляют полезные функции для нахождения элементов другими способами, кроме id (во многих случаях, поддерживая почти все селекторы в стиле CSS, даже в старых браузерах, которые неquerySelector / querySelectorAll встроенный.

Answer 3

Все ответы, приведенные выше, немного усложняют ситуацию.

Я просто использую это:

MyClass = new function() {
    this.instanceData = "Display Me";

    this.DisplayData = function() {
        alert(this.instanceData);
    };
};

А вот кнопка:

<button onClick="MyClass.DisplayData()">Click Me!</button>

А вот скрипка, демонстрирующая это: Скрипка