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は、上記のコードが実行されるコンテキストを参照します。

これを解決する最善の方法はVanillaJSを使用することですが、すでに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();

私の場合、ボタンにIDがありませんでした。要素にIDがある場合は、できれば次のものを使用してください（テストされていません）。

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

私はもともとこの方法を試しましたが、うまくいきませんでした。グーグルした後、私は戻ってきて、自分の要素が名前であり、IDを持っていないことに気づきました。正しい属性を呼び出していることを再確認してください。

ソース：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);

次に、要素（IDが「myElement」）をクリックすると、コンソールに次のように出力されます。

キャッチされたイベント：
ABCをクリックします

これにより、オブジェクトメソッドをイベントハンドラーとして使用し、そのメソッドのすべてのオブジェクトプロパティにアクセスできます。

オブジェクトのメソッドをaddEventListenerに直接渡して（次のように）、通常はオブジェクトで呼び出されたかのように動作することを期待することはできません。addEventListenerに渡された関数は、参照されるのではなく、何らかの形でコピーされていると思います。たとえば、イベントリスナー関数参照を（変数の形式で）addEventListenerに渡してから、この参照の設定を解除すると、イベントがキャッチされたときにイベントリスナーが実行されます。element.addEventListener('click',myObj.myMethod);myMethod

メソッドをイベントリスナーおよびstilとして渡し、イベントリスナーthis内のオブジェクトプロパティにアクセスできるようにする別の（あまりエレガントではない）回避策 は、次のようになります。

// see above for definition of MyObj

var myObj = new MyObj();

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

古いスレッドですが、質問はまだ関連しているので...

（1）あなたの質問の例では、今DOES Firefoxで仕事を。しかし、（警告を表示）イベントハンドラを呼び出すことに加えて、それがALSO（アラートが却下された後）ナビゲーションを引き起こし、リンクをクリック。

（2）〜JUSTは：単に置き換える（ナビゲーションをトリガすることなく）イベントハンドラを呼び出します

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の冗長な更新
• ユーザーによって引き起こされたビューの実際の変更と、初期化コードとして行われた変更（1回だけ実行する必要があります）を区別するのは困難です。

より良いのは、何をしたいのかを正確に把握し、それを関数に入れて手動で呼び出し、イベントリスナーとして登録することです。