как я могу добавить больше поведения к существующим событиям 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()

С уважением, Кешав

4
keshav84 17 Июл 2010 в 11:13

5 ответов

Лучший ответ

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

<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();
});
10
Anurag 17 Июл 2010 в 08:19

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

<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 делает это немного проще. См. Документацию по нажмите, bind и один для например, и вообще раздел вложение обработчика событий.

0
Weston C 17 Июл 2010 в 07:34

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

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

0
sushil bharwani 17 Июл 2010 в 07:31

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

<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>
0
Darin Dimitrov 17 Июл 2010 в 07:27

Другой не упомянутый способ - захват функции, назначенной в настоящее время атрибуту 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);

Рабочая демонстрация здесь.

6
Russ Cam 17 Июл 2010 в 07:50