web-dev-qa-db-ja.com

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

scriptに_<div>_のonclick特性を設定させたい。

このHtmlコードを使用します。

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

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

_<div id="forgotpass" onclick="forgotpass();">Forgot Password?</div>
_
javascripthtmleventsdomjavascript-events
21
Γεώργιος Βιδαλάκης

純粋な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();
  });
});
26
Danil Speransky

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

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

このような何かが動作する可能性があります。

var div = document.getElementById("forgotpass");
div.onclick=function(){ /*do something here */ };

関数を追加しない場合、javascriptはスクリプトを実行するとonclickを実行します。

3
Frøknen

純粋なjavascriptでできること：

function forgotpass() {
 //..code
}

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

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

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

function forgotpass() {
 //..code
}

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

あなたはjQueryでそれを行うことができます

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

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

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

HTMLにイベントリスナを直接追加します。

...
<div>
    <input type="button" value="Set Cookie" onclick="setCookie();" />
</div>
<script>
    function setCookie() {
        console.log('ready to set cookie?');
    }
</script>
...

参照： W3Schools

がんばろう！

0
Akash