web-dev-qa-db-ja.com

onClickハンドラーを動的に変更する方法は？

これについては100万件の投稿があると確信していますが、驚くべきことに何かを見つけるのに苦労しています。

ページの初期化時に<A>リンクのonClickハンドラーを設定する簡単なスクリプトがあります。

これを実行すると、immediately「foo」アラートボックスが表示され、リンクをクリックしたときにのみアラートが表示されるはずです。

どのような愚かなことを間違っていますか？ （click =およびonClick =を試しました）...

<script language="javascript">

    function init(){

        document.getElementById("foo").click = new function() { alert('foo'); };
    }

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

Edit：受け入れられた回答をjQueryの回答に変更しました。 ' MárÖrlygsson 'による回答は、技術的には元の質問に対する正しい回答です（clickはonclickであり、newは削除する必要があります） I強くお勧めしません「document.getElementById（...）をコードで直接使用することはできません。代わりに jQuery を使用します。

javascriptfunction
49
Simon_Weaver

jQuery：

$('#foo').click(function() { alert('foo'); });

または、リンクhrefをたくない場合：

$('#foo').click(function() { alert('foo'); return false; });
22
Darryl Hein

試してください：

document.getElementById("foo").onclick = function (){alert('foo');};
69
CMS

つかいます .onclick（すべて小文字）。そのようです：

document.getElementById("foo").onclick = function () {
  alert('foo'); // do your stuff
  return false; // <-- to suppress the default link behaviour
};

実際、いくつかの優れたライブラリ（いくつかの理由で jQuery を使用することをお勧めします）を使用して、正常なjavascriptを作成する方が良いでしょう。

クロスブラウザ（非）互換性は、誰にとっても対処すべき正しい地獄です-始めたばかりの人は言うまでもありません。

35
Már Örlygsson

現在の関数から変数を渡したい場合、これを行う別の方法は、例えば：

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

この関数から情報を渡す必要がない場合、それは次のとおりです。

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
10
yuttadhammo

先日、他のソリューションを多かれ少なかれ試しましたが、このいずれかを試すまで、それらのどれも私のために働きませんでした：

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

私が知る限り、それは完全に機能します。

10
Selin Ebeci

OMG ...「jQuery Library」と「getElementById」の問題だけではありません。

もちろん、jQueryはクロスブラウザの問題を回避するのに役立ちますが、JavaScriptを十分に理解していれば、ライブラリを使用しない従来の方法を使用しても引き続き機能します!!!

@MárÖrlygssonと@Darryl Heinの両方が、前者は伝統的な方法を使用し、後者はjQueryの方法を使用した、優れた代替物（私は、それらは単なる代替手段であり、アンカーではない）を与えました。しかし、あなたは本当にあなたの問題への答えを知っていますか？コードの何が問題になっていますか？

まず、_.click_はjQueryの方法です。従来の方法を使用する場合は、代わりに.onclickを使用します。または、混乱する場合に備えて、jQueryのみを使用することを学ぶことに集中することをお勧めします。 jQueryは、DOMを十分に知らなくても使用できる優れたツールです。

2番目の問題は、重大な問題であるnew function(){}は非常に悪い構文であるか、間違った構文であると言います。

JQueryを使用するか使用しないかに関係なく、jQueryを明確にする必要があります。

関数を宣言する3つの基本的な方法があります。

_function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object
_

Javascriptは大文字と小文字を区別するであるため、new function()はjavascriptの標準構文ではないことに注意してください。ブラウザは意味を誤解する場合があります。

したがって、コードは次の2番目の方法を使用して変更できます。

_ = function(){alert();}
_

または、3番目の方法を使用して

_ = new Function("alert();");
_

詳しく説明すると、2番目の方法は3番目の方法とほぼ同じように機能し、2番目の方法は非常に一般的ですが、3番目の方法はまれです。どちらのベストアンサーも2番目の方法を使用します。

ただし、3番目の方法では、「実行時」と「コンパイル時間」のために、2番目の方法ではできないことができます。 new Function()が時々役立つことをご理解いただければ幸いです。ある日、function(){}を使用して問題に遭遇した場合、new Function()を忘れないでください。

さらに理解するには、<< JavaScript：The Definitive Guide、6th Edition >>、O'Reillyを読むことをお勧めします。

5
Eric

JQueryを使用することが最良の選択肢であることに同意します。また、bodyのonload関数の使用を避け、代わりにjQueryのready関数を使用する必要があります。イベントリスナーに関しては、1つの引数を取る関数である必要があります。

document.getElementById("foo").onclick = function (event){alert('foo');};

またはjQueryで：

$('#foo').click(function(event) { alert('foo'); }
2
kgiannakakis

上記のjQuery投稿に対応するYUIは次のとおりです。

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>
1
blak3r

アラートが発行された理由を説明するために、実際に起こっていた問題に誰も対処しませんでした。

このコード：document.getElementById("foo").click = new function() { alert('foo'); };は、#foo要素のクリックプロパティを空のオブジェクトに割り当てます。ここにある匿名関数は、オブジェクトを初期化するためのものです。このタイプの関数をコンストラクターと考えるのが好きです。そこにアラートを配置すると、関数がすぐに呼び出されるため、アラートが呼び出されます。

この質問 を参照してください。

0
Steven Lu

JQueryの 。bind および 。unBind メソッドを使用したいと思います。私のテストでは、.clickおよび.onclickを使用してクリックイベントを変更すると、実際には新しく割り当てられたイベントが呼び出され、無限ループが発生しました。

たとえば、切り替えるイベントがhide（）とunHide（）であり、一方をクリックするとクリックイベントが他方に切り替わると、連続ループになります。より良い方法はこれを行うことです：

$(element).unbind().bind( 'click' , function(){ alert('!') } );
0
lamarant

上記のYUIの例は、実際には次のようになります。

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>
0
Web Development Guy