Как я могу программно вызвать событие onclick () из тега привязки, сохранив ссылку this в функции onclick?

Следующее не работает ... (по крайней мере, не в Firefox: document.getElementById('linkid').click()это не функция)

<script type="text/javascript">
    function doOnClick() {
        document.getElementById('linkid').click();
        //Should alert('/testlocation');
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Вам нужен applyобработчик событий в контексте этого элемента:

var elem = document.getElementById("linkid");
if (typeof elem.onclick == "function") {
    elem.onclick.apply(elem);
}

В противном случае thisбудет ссылаться на контекст, в котором выполняется приведенный выше код.

Лучший способ решить эту проблему - использовать Vanilla JS, но если вы уже используете jQuery, есть очень простое решение:

<script type="text/javascript">
    function doOnClick() {
        $('#linkid').click();
    }
</script>
<a id="linkid" href="/testlocation" onclick="alert(this.href);">Testlink</a>

Протестировано в IE8-10, Chrome, Firefox.

Чтобы вызвать событие, вы просто вызываете обработчик событий для этого элемента. Небольшое изменение в вашем коде.

var a = document.getElementById("element");
var evnt = a["onclick"];

if (typeof(evnt) == "function") {
    evnt.call(a);
}

$("#linkid").trigger("click");

Конечно, OP очень похожим образом заявил, что это не сработало, но для меня это сработало. Судя по заметкам в моем источнике, похоже, что это было реализовано примерно во время или после публикации OP. Возможно, сейчас это более стандартно.

document.getElementsByName('MyElementsName')[0].click();

В моем случае у моей кнопки не было идентификатора. Если у вашего элемента есть идентификатор, желательно использовать следующий (непроверенный).

document.getElementById('MyElementsId').click();

Первоначально я пробовал этот метод, но он не сработал. После поиска в Google я вернулся и понял, что мой элемент был назван по имени и не имел идентификатора. Дважды проверьте, что вы вызываете правильный атрибут.

Источник: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Взгляните на метод handleEvent
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

"Необработанный" Javascript:

function MyObj() {
   this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
   console.log("caught event: "+e.type);
   console.log(this.abc);
}

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj);

Теперь щелкните свой элемент (с идентификатором «myElement»), и он должен напечатать в консоли следующее:

пойманное событие: нажмите
ABC

Это позволяет использовать метод объекта в качестве обработчика событий и иметь доступ ко всем свойствам объекта в этом методе.

Вы не можете просто передать метод объекта в addEventListener напрямую (вот так:) element.addEventListener('click',myObj.myMethod);и ожидать, что он myMethodбудет действовать так, как если бы меня обычно вызывали для объекта. Я предполагаю, что любая функция, переданная в addEventListener, каким-то образом копируется, а не упоминается. Например, если вы передадите ссылку на функцию прослушивателя событий в addEventListener (в форме переменной), а затем отключите эту ссылку, прослушиватель событий по-прежнему будет выполняться при обнаружении событий.

Другой (менее элегантный) обходной путь для передачи метода в качестве прослушивателя событий и стиля thisи при сохранении доступа к свойствам объекта в прослушивателе событий будет примерно таким:

// see above for definition of MyObj

var myObj = new MyObj();

document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));

Старая ветка, но вопрос все еще актуален, так что ...

(1) Пример в вашем вопросе теперь ДЕЙСТВИТЕЛЬНО работает в Firefox. Однако помимо вызова обработчика событий (который отображает предупреждение), он ТАКЖЕ щелкает ссылку, вызывая навигацию (после закрытия предупреждения).

(2) Чтобы ПРОСТО вызвать обработчик событий (без запуска навигации), просто замените:

document.getElementById('linkid').click();

с участием

document.getElementById('linkid').onclick();

Если вы используете это исключительно для ссылки на функцию в атрибуте onclick, это кажется очень плохой идеей. Встроенные события - вообще плохая идея.

Я бы посоветовал следующее:

function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

handler = function(){
   showHref(el);
}

showHref = function(el) {
   alert(el.href);
}

var el = document.getElementById('linkid');

addEvent(el, 'click', handler);

Если вы хотите вызвать ту же функцию из другого кода javascript, имитация щелчка для вызова функции - не лучший способ. Рассматривать:

function doOnClick() {
   showHref(document.getElementById('linkid'));
}

В общем, я бы не рекомендовал вызывать обработчики событий «вручную».

• Непонятно, что выполняется из-за нескольких зарегистрированных слушателей
• Опасность попадания в рекурсивный и бесконечный цикл событий (щелчок A запускает щелчок B, запускает щелчок A и т. Д.)
• Избыточные обновления DOM
• Трудно отличить фактические изменения в представлении, вызванные пользователем, от изменений, внесенных в качестве кода инициализации (который следует запускать только один раз).

Лучше выяснить, что именно вы хотите, чтобы произошло, поместите это в функцию и вызовите ее вручную И зарегистрируйте ее как прослушиватель событий.