0

私はほぼ完成している三目並べゲームに取り組んでいます。私が疑問に思っている唯一のことはonclick、HTML 属性から直接呼び出すのではなく、.js ファイルからイベント ハンドラーを追加できるかどうかです。を使用する HTML の一部を次に示しますonclick。

<div id="left">
        <div id="board">
            <div id="one" onclick="playerMove(this)">

            </div>
            <div id="two" onclick="playerMove(this)">

            </div>
            <div id="three" onclick="playerMove(this)">

            </div>
            <div id="four" onclick="playerMove(this)">

            </div>
            <div id="five" onclick="playerMove(this)">

            </div>
            <div id="six" onclick="playerMove(this)">

            </div>
            <div id="seven" onclick="playerMove(this)">

            </div>
            <div id="eight" onclick="playerMove(this)">

            </div>
            <div id="nine" onclick="playerMove(this)">

            </div>
        </div>
    </div>

この問題についてのご意見は大歓迎です。

4

6 に答える 6

2

jQuery を使用する場合、次のようなものが動作するはずです。

$(document).ready(function() {
  $('#board div').click(playerMove);
});
于 2012-09-30T05:59:15.767 に答える
2

プレーンな JavaScript (クロス プラットフォーム ライブラリなし) では、addEventListener(最新のブラウザー) またはattachEvent(古いバージョンの IE) を使用して JavaScript コードを介してイベント ハンドラーを追加できます。

クロス ブラウザー方式でイベント ハンドラーを追加する単純な関数を次に示します。

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

使用例 (ページ DOM がロードされた後に呼び出されます):

addEvent(document.getElementById("one"), 'click', playerMove);

または、すべてのボード div のイベント ハンドラーをインストールするには、次のようにします。

var divs = document.getElementById("board").children;
for (var i = 0, len = divs.length; i < len; i++) {
    // element nodes only
    if (divs[i].nodeType === 1) {
        addEvent(divs[i], 'click', playerMove);
    }
}
于 2012-09-30T06:01:05.463 に答える
1

これには jQuery の使用を検討する必要があります。jQuery を使用している場合、これは次のように簡単です。

$('#board > div').click(playerMove);

バニラ JS を使い続けたい場合は、次のようにします。

var items = document.getElementById('board').children;
for(x in items) {
    items[x].onclick = function() {
        playerMove(items[x]);
    };
}
于 2012-09-30T06:00:55.220 に答える
0

試す：

document.getElementById('one').onclick();

js ファイルでイベント ハンドラーをバインドする場合:

var board = document.getElementById('board'),
      divs = board.getElementsByTagName('div'),
      i, len = divs.length;
for (i = 0; i < len; i++) {
      divs[i].onclick = function() {
           playerMove(this); 
      };
}
于 2012-09-30T05:58:33.437 に答える
0

これを使って：

document.getElementById('element_id').onclick = function(){ playerMove(this); };

Div ごとに、「element_id」を「one」、「two」、... に変更します。

于 2012-09-30T06:01:00.857 に答える
0

あなたの答えは次の 5 行にあります。試してみてください:)誰かが私のコードを新しい投稿またはj-queryにコピー/変換した場合、それは問題なく歓迎されます。

var yourDivID = document.getElementById('your_Div_ID');
yourDivID.addEventListener('click', function (){  playerMove(this); }, false);
function playerMove(divElement)
{
    alert(divElement.id);
}

完全なデモをここに jsfiddle.netに配置しようとしました。リンクが機能しない場合は、9 つ​​のうち任意の div をクリックしてそのイベントを確認できます。次に、次のコードを確認できます (私は WIN7 と FireFox で動作します)。

<html>
<head>
<title> Add Events Dynamically </title>
<script type="text/javascript">
    function add_DivClick_Events() {
        var nodes = document.getElementById('board').childNodes;
        for (var i = 0; i < nodes.length; i++) {
            if (i % 2 == 1) {
                nodes[i].addEventListener('click', function () {
                    playerMove(this);
                }, false);
            }
        }    
    }
    function playerMove(divElement)
    {
        alert(divElement.id);
    }  
    </script>
    <style type="text/css">
    #board div
    {
        width:20px;
        height:20px;
        border:2px solid;        
    }
    </style>
</head>
     <body onload='add_DivClick_Events()'>   
        <div id="left">
        <div id="board">
            <div id="one">

            </div>
            <div id="two">

            </div>
            <div id="three">

            </div>
            <div id="four">

            </div>
            <div id="five">

            </div>
            <div id="six">

            </div>
            <div id="seven">

            </div>
            <div id="eight">

            </div>
            <div id="nine">

            </div>
        </div>
    </div>
    </body>    
 </html>
于 2012-09-30T06:56:47.223 に答える