Як я можу програмно викликати подію 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 так само заявив, що це не спрацювало, але це зробило для мене. Виходячи з приміток у моєму джерелі, здається, це було застосовано приблизно в той час або після публікації ОП. Можливо, зараз це більш стандартно.

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

У моєму випадку моя кнопка не мала посвідчення особи. Якщо ваш елемент має ідентифікатор, бажано використовувати наступний (неперевірений).

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

Я спочатку спробував цей метод, і він не спрацював. Після Googling я повернувся і зрозумів, що мій елемент по імені, і не мав посвідчення особи. Перевірте, чи ви викликаєте правильний атрибут.

Джерело: 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
• Важко відрізнити фактичні зміни у поданні, спричинені користувачем, від змін, внесених як код ініціалізації (які слід запускати лише один раз).

Краще зрозуміти, що саме ви хочете, щоб сталося, ввести це у функцію та викликати це вручну І зареєструвати як прослуховувач подій.