リストアイテムにクリックイベントを追加できません

これは、HTMLでJavascriptを使用する私の最初の試みです。私は順序リストのリスト項目にクリックイベントを追加しようとしていますが、私がそれをやっている方法についての何かがうまくいきません。誰かが私のためにこれについていくつかの光を当てることができますか？リストアイテムにクリックイベントを追加できません

私はheadの中で、指定されたリストのリスト項目のすべてのクリックイベントを特定の関数に委譲する関数を作成し、その関数ではリスト項目のテキストで簡単な警告を発生させようとします。最終的にはもっとやりたいと思っていますが、単純なクリックイベントが最初に機能するようにしようとしています。

<html> 
    <head> 
    <script type="text/javascript"> 
     // Attach an event handler to the 'topfriends' list to handle click events. 
     function attachEventHandlerToList() { 
      document.getElementById("#top4list").delegate("li", "click", function(clickEvent) { 
       alert(this.innerHTML()); 
      }); 
     } 
    </script> 
</head> 

<body> 

    <div id="topfriends"> 
     <h3>Top 4 Most Friendable Friends</h3> 
     <ol id="top4list" onload="attachEventHandlerToList()"> 
      <li>Brady</li> 
      <li>Graham</li> 
      <li>Josh</li> 
      <li>Sean</li> 
     </ol> 
    </div> 
</body>

出典

2013-07-14 DesAdams

Javascriptのイベントデリゲート http://davidwalsh.name/event-delegateでこの書き込みアップを参照してください今、この

<script type="text/javascript"> 
    // locate your element and add the Click Event Listener 
    document.getElementById("parent-list").addEventListener("click",function(e) { 
     // e.target is our targetted element. 
        // try doing console.log(e.target.nodeName), it will result LI 
     if(e.target && e.target.nodeName == "LI") { 
      console.log(e.target.id + " was clicked"); 
     } 
    }); 
</script>

ためにJavaScriptを書くのは、この

<ul id="parent-list"> 
    <li id="a">Item A</li> 
    <li id="b">Item B</li> 
    <li id="c">Item C</li> 
    <li id="d">Item D</li> 
    <li id="e">Item E</li> 
    <li id="f">Item F</li> 
</ul>

のようなものをやってみましょう

はまた、リンクの下に、私はこのことができます http://jsfiddle.net/REtHT/

希望を作成フィドルです！

出典

2013-07-14 03:04:50 Cooshal

ああ、これも動作します！そして、私は、それぞれのリストアイテムに個々のクリックイベントを割り当てるよりも効率的だと思います。これは、私が 'delegate（）'を使用して回避しようとしていたものです。 – DesAdams

待って！リストアイテム内のテキストをどのように取得できますか？ 'e.target.id'を使うと、' li'のidを取得できますか？私はこのリストを最終的に生成し、 'e.target.innerHTML'は何も出力しません。 – DesAdams

「innerHTML」はまったく問題ありません。私はそれが間違っているか、変更を保存していないと思う。私の悪い！ – DesAdams

-1

こんにちは理由のonClick

<script type="text/javascript"> 
function olClicked(){ 
alert(this.innerHTML()); 
} 
</script> 
<ol id="top4list" onClick="olClicked()">

出典

2013-07-14 02:41:00

これを試してみるとタイプエラーが発生します。 'これは明らかにウィンドウであり、リスト項目ではありません。私がデリゲートを使用していたのは、リスト項目ごとに異なる動作を指定する必要があるためです。 – DesAdams

delegate()でのonLoad directyを置き換えることにより、容易にそれをやっていない非推奨のjQueryの方法であり、そしてそのような方法は、プレーンJSに存在しません。
JSでイベントハンドラをアタッチする場合はaddEventListener、古いバージョンの場合はattachEventが必要です。そのため、クロスブラウザイベントハンドラでは少し難解です。
onclick,などはすべてのブラウザで機能しますが、addEventListener/attachEventを使用する方が良い方法です。

また、要素がDOMに追加された後でスクリプトを実行する必要があります。そうしないと、スクリプトは使用できません。通常の方法は、要素の後にスクリプトを挿入するか、DOM準備完了イベントハンドラを使用することです。

<html> 
<head> 
    <title>test</title> 
</head> 

<body> 

<div id="topfriends"> 
    <h3>Top 4 Most Friendable Friends</h3> 
    <ol id="top4list"> 
    <li>Brady</li> 
    <li>Graham</li> 
    <li>Josh</li> 
    <li>Sean</li> 
    </ol> 
</div> 

<script type="text/javascript"> 
    var lis = document.getElementById("top4list").getElementsByTagName('li'); 

    for (var i=0; i<lis.length; i++) { 
     lis[i].addEventListener('click', doStuff, false); 
    } 

    function doStuff() { 
     alert(this.innerHTML); 
    } 
</script> 
</body>

FIDDLE

出典

2013-07-14 02:45:57 adeneo

アドバイスをいただきありがとうございます！私はこれを試してみましょう。これは本当に自分のHTMLに振る舞いを追加するのは初めてのことなので、イベント処理について詳しくは分かりません。また、私はこれをテストしていたプロジェクトはJQueryを使用しているので、delegate（）メソッドはうまくいくと思っていましたが、私はそれを使うときにライブラリや何かを必要とするでしょうか？私はJSにも新しいです。 – DesAdams

本当にありがとう！ – DesAdams

リストアイテムにクリックイベントを追加できません

答えて

関連する問題