32

javascriptを使用してonclickイベントを設定しようとしています。次のコードが機能します。

var link = document.createElement('a');
link.setAttribute('href', "#");
link.setAttribute('onclick', "alert('click')");

次に、appendChildを使用して、ドキュメントの残りの部分へのリンクを追加します。

しかし、私は明らかにアラートよりも複雑なコールバックが欲しいので、これを試しました：

link.onclick = function() {alert('clicked');};

この：

link.onclick = (function() {alert('clicked');});

しかし、それは何もしません。リンクをクリックしても何も起こりません。chromeを使用してテストしましたが、DOMオブジェクトを参照すると、その要素についてonclick属性がNULLであることがわかります。

関数をonclickに渡せないのはなぜですか？

編集：

以下に提案するようにaddEventListenerを使用してみましたが、同じ結果になりました。リンクのDOMは、onclickをnullとして表示します。

私の問題は、この要素のDOMがまだ完全に構築されていない可能性があることです。この時点でページが読み込まれ、ユーザーはボタンをクリックします。ボタンは、document.body.appendChildを呼び出すことによってページに追加する新しいdivを構築するjavascriptを実行します。このリンクは新しいdivのメンバーです。これが私の問題である場合、どうすれば回避できますか？

4

5 に答える 5

29

問題を再現できませんでした。OPの調査結果とは異なり、以下の行は、IE、FF、Opera、Chrome、Safariの最新バージョンで正常に機能します。

link.onclick = function() {alert('clicked');};

このjsFiddleにアクセスして、自分のブラウザでテストできます。

http://jsfiddle.net/6MjgB/7/

htmlページにこれがあると仮定します：

<div id="x"></div>

次のコードは、私が試したブラウザーで正常に機能します。

var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}

document.getElementById("x").appendChild(link);

ブラウザの互換性の問題がある場合、jQueryを使用するとそれが解決され、コードがはるかに簡潔になります。

var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})

$("#x").html($link)

簡潔さがjQueryを使用するための十分に強力な議論ではない場合、ブラウザーの互換性は...である必要があり、その逆も同様です:-)

注：jsFiddleが気に入らないようであるため、コードでalert（）を使用していません:-(

于 2012-11-30T01:08:52.663 に答える
5

addEventListener(...)Davidが言ったように、。を使用してDOMリスナーを追加することもできます。attachEventIEとの互換性のために含めました。

var link = document.createElement('a');
link.setAttribute('href', "#");
if(link.addEventListener){
   link.addEventListener('click', function(){
      alert('clicked');
   });
}else if(link.attachEvent){
   link.attachEvent('onclick', function(){
      alert('clicked');
   });
}
于 2012-11-30T00:22:29.267 に答える
5

JavaScriptでこれを行う場合は、、addEventListener()withを使用しaddEventListener('click', function(e) {...})て、イベントをとして保存しeます。このようなイベントに合格しないと、アクセスできなくなります（Chromeはこれを理解するのに十分賢いように見えますが、すべてのブラウザーがChromeであるとは限りません）。

完全に機能するJSBinデモ。

StackOverflowデモ...

document.getElementById('my-link').addEventListener('click', function(e) {
  console.log('Click happened for: ' + e.target.id);
});
<a href="#" id="my-link">Link</a>

于 2021-02-08T17:58:44.113 に答える
2

属性の設定が正しくないようです。最も簡単な方法はこれだけです：

link.onclick = function() {
    alert('click');
};

ただしaddEventListener、JCOC611が提案するように使用すると、複数のイベントハンドラーを同じ要素にバインドできるため、より柔軟になります。attachEvent古いInternetExplorerバージョンとの互換性のためにフォールバックが必要になる場合があることに注意してください。

于 2012-11-30T00:26:40.953 に答える
2

必要に応じて、次のようにsthを使用します。

<button id="myBtn">Try it</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>
于 2012-11-30T00:30:33.443 に答える