Добавить больше поведения к существующему атрибуту onclick в javascript

Question

как я могу добавить больше поведения к существующим событиям onclick, например, если существующий объект выглядит как

<a href="http://abc" onclick="sayHello()">link</a>
<script>
function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}
</script>

как я могу добавить больше поведения в onclick, что будет также делать следующее

alert("say hello again");
sayGoodMorning()

С наилучшими пожеланиями, Кешав

Answer 1

Вот самый грязный путь:)

<a href=".." onclick='sayHello();alert("say hello again");sayGoodMorning()'>.</a>

Вот несколько более разумная версия.Оберните все в функцию:

<a href=".." onclick="sayItAll()">..</a>

JavaScript:

function sayItAll() {
    sayHello();
    alert("say hello again");
    sayGoodMorning();
}

И вот правильный способ сделать это.Используйте модель регистрации событий вместо того, чтобы полагаться на атрибут или свойство onclick.

<a id="linkId" href="...">some link</a>

JavaScript:

var link = document.getElementById("linkId");
addEvent(link, "click", sayHello);
addEvent(link, "click", function() {
    alert("say hello again");
});
addEvent(link, "click", sayGoodMorning);

Дается кросс-браузерная реализация функции addEventниже (из scottandrew.com ):

function addEvent(obj, evType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, false);
        return true;
    } else if (obj.attachEvent) {
        var r = obj.attachEvent("on" + evType, fn);
        return r;
    } else {
        alert("Handler could not be attached");
    }
}

Обратите внимание, что если все 3 действия должны выполняться последовательно, вы все равно должны пойти дальше и обернуть их в одну функцию.Но этот подход все еще превосходит второй подход, хотя он кажется немного многословным.

var link = document.getElementById("linkId");
addEvent(link, "click", function() {
    sayHello();
    alert("say hello again");
    sayGoodMorning();
});

Answer 2

Другим способом, не упомянутым выше, является захват функции, назначенной в настоящее время атрибуту element.onclick, а затем назначение новой функции, которая переносит старую. Простая реализация, чтобы продемонстрировать что-то вроде

function addEvent(element, type, fn) {
    var old = element['on' + type] || function() {};
    element['on' + type] = function () { old(); fn(); };
}

var a = document.getElementById('a');

function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}

addEvent(a, 'click', sayHello);
addEvent(a, 'click', sayGoodMorning);

Рабочая демоверсия здесь

Answer 3

При условии небольшого изменения в вашем коде:

<a href="http://abc" id="a1" onclick="sayHello()">link</a>

На обычном старом JavaScript вы бы сделали что-то вроде этого.

var a = document.getElementById('a1');
a.onclick = function () { alert('say hello again'); a.onclick(); }

Стоит отметить, что jQuery делает этонемного прощеСм., Например, документацию по click , bind и one , и в целом по разделу вложения обработчика событий .

Answer 4

<a href="http://abc" onclick="sayHello(),sayX(),sayY(),sayZ()">link</a>

также будет работать

Answer 5

Один из способов написать третью функцию:

<a href="http://abc" onclick="foo()">link</a>
<script>
function sayHello(){
    alert('hello');
}

function sayGoodMorning(){
    alert('Good Morning');
}

function foo() {
    alert("say hello again");
    sayGoodMorning();
}
</script>