すべての単語にJavaScriptイベントが発生します

Question

通常、JavaScriptはDOM要素のイベントをバインドします。しかし、私はユーザーがどの単語をクリックしたかを知りたい。ちょうどここのように、すべての単語をラップされた私にとってはお馴染みの道：

<a href="javascript:onClick()">And</a> <a href="javascript:onClick()">now</a> <a href="javascript:onClick()">the</a> 
<a href="javascript:onClick()">kung</a> <a href="javascript:onClick()">pao</a> <a href="javascript:onClick()">chicken</a>. 

私はそれは冗長なコードだし、それは、コードをより簡潔にすることができると思いますか？ありがとう

Answer 1

実行可能な方法でこれを行うには、おそらくあなたはやっているように別の要素に各単語をラップする必要がありますが、少なくともすべてのインラインJavaScriptを取り除くことができます。

偶数リスナーを単語の親要素に追加します。単語要素が受け取るすべてのイベントは親要素にバブリングされ、イベントターゲットプロパティを参照すると、クリックされた単語を見つけることができます。

あなたはJSライブラリを使用していますか、まったく働いていませんか？

編集：ライブラリーを使用していないので、jQueryが人気のある選択肢（人気があるので、人気があります。ここでは、あなたはjQueryを使ってそれを行うだろう方法は次のとおりです。

http://jsfiddle.net/eKvdn/（単語をクリックしてください）

しかし、それを使用する前に、それについての詳細を読むために非常に良いでしょう。

Answer 2

さて、あなたは常にあなたのためのすべての単語をラップするためにJavaScript関数を書くことができます：もちろん

function wrapWords(element) { 
    var html = element.innerHTML; 
    var words = html.split(/ /); 
    var newHtml = ''; 

    for (var i = 0; i < words.length; i++) { 
     newHtml += '<span>' + words[i] + '</span> '; 
    } 

    element.innerHTML = newHtml; 
} 

、これは、要素がそれではない他のHTMLを持っていることを前提としています。これをMattiの提案と組み合わせることで、コードをもっと綺麗にすることができます。

Answer 3

アンカーまたはスパン内の各単語を検索してラップし、それにonclickハンドラを追加することができます。 how to get a word under cursor using JavaScriptを参照してください。