javascript - スクリプトを使用して onclick イベントを設定する

Question

scriptセットonclickを a のプロパティにしたい<div>。

私はこのHtmlコードを使用します:

<div id="forgotpass">Forgot Password?</div>

ユーザーが関数をクリックし<div>てforgotpass()実行したいのですが、これは使用したくありません。

<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>

Answer 1

または、jQuery を使用していない場合:

document.getElementById('forgotpass').onclick = forgotpass;

Answer 2

純粋な JavaScript:

function addListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.addEventListener(eventName, handler, false);
  }
  else if (element.attachEvent) {
    element.attachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = handler;
  }
}

function removeListener(element, eventName, handler) {
  if (element.addEventListener) {
    element.removeEventListener(eventName, handler, false);
  }
  else if (element.detachEvent) {
    element.detachEvent('on' + eventName, handler);
  }
  else {
    element['on' + eventName] = null;
  }
}

addListener(document.getElementById('forgotpass'), 'click', forgotpass);

jQuery:

$(document).ready(function() {
  $("#forgotpass").click(forgotPass);
});

または：

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});

Answer 3

IE 9+ ( source )のみをサポートする必要がある場合はEventTarget.addEventListener、純粋な JavaScript で使用できます。

function forgotpass() {
  alert("Hello, world!");
}

var element = document.getElementById("forgotpass");
element.addEventListener("click", forgotpass, false);

<button id="forgotpass">Forgot Password?</button>

古いブラウザーをサポートする必要がある場合は、Speransky Danil の回答をお勧めします。

Answer 4

のようなjQueryでそれを行うことができます

$("#forgotpass").click(function() {
  alert("Handler for .click() called.");
});

Answer 5

純粋な JavaScript では、次のことができます。

function forgotpass() {
 //..code
}

var el = document.getElementById("forgotpass");
el.onclick = forgotpass;

しかし、これは非常に素朴で柔軟性がなく、おそらく悪い習慣です。

jQuery を使用している場合は、次のことができます。

function forgotpass() {
 //..code
}

$(document).ready(function() {
  $("#forgotpass").click(function() {
    forgotPass();
  });
});

Answer 6

jQuery を使用している場合は、次のようにすると最適です。関数呼び出しが複数回実行されると、複数のイベント ハンドルが登録されます。次のアプローチにより、以前のハンドラーが確実に削除されます

$("#forgotpass").off().on('click', function () { 
    forgotPass(); 
});