web-dev-qa-db-ja.com

javascriptを使用してonclickをhtml要素に動的に追加する方法

以下に示すように、ボタン要素を作成し、onclickイベントを追加できます。

elem.onclick=function()
{
alert("qweqweqwe");
}

イベント内で関数を定義する代わりに、事前定義された関数を使用するにはどうすればよいですか？何かのようなもの：

elem.onclick=func();
javascripthtmlonclicklistener
12
user3454558

呼び出す関数が定義されている要素にeventlistenerを追加します。

elem.addEventListener("click", func, false); //where func is your function name

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener

19
ylerjen

自分で見つけた最良の方法は以下のようなものです。

const li = document.createElement('li');
        li.innerText = "client";
        li.id ="key";
        li.className = "client-class";
        li.setAttribute("onclick","valid;");
7
Achuth hadnoor

1）

function myfunction(){
alert("hello");
}

elem.onclick=myfunction();

または

2）

var myfunction=function(){
alert("hello");
}
elem.onclick=myfunction;
//or
elem.onclick=myfunction.call();
3
Tuhin
var clickHandler = function(){

};

elem.onclick = clickHandler;

function clickHandler(){

};

elem.onclick = clickHandler;

基本的に、functionsはjavascriptの一種の変数です

方法1のように行った場合、それは明らかです。

ただし、方法2のように実行しても、同じことを行い、clickHandlerという名前の変数を作成し、functionという値を関数本体として作成します。

あなたがするとき

elem.onclick = function(){};

名前のない匿名関数を作成し、それを要素のonclickに割り当てています

Meanwhileハンドラーをイベントにバインドするこのメソッドは、非推奨になっています。ほとんどのブラウザーには、同じイベントに複数のハンドラーを追加するなどの多くの一般的な問題を解決するための、より優れた方法があります。この機能の概念を理解すると、この従来のモデルとは対照的に、w3cモデルのイベント登録を続行して確認します。従来の方法を使用することは十分にサポートされており、問題ありません。より優れた設計オプションがある場合があります。

0
sabithpocker