將事件處理程序附加到DOM元素

Question

我正在玩井字游戲，該游戲即將完成。 我唯一想知道的是，是否可以從我的.js文件中為onclick添加事件處理程序，而不是直接從HTML屬性中調用它。 以下是使用onclick的HTML：

<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>

任何對此事的想法將不勝感激。

Answer 1

如果您使用jQuery，則應該可以執行以下操作：

$(document).ready(function() {
  $('#board div').click(playerMove);
});

Answer 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);
    }
}

Answer 3

您應該真正考慮為此使用jQuery。 如果您使用的是jQuery，這將非常簡單：

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

如果您想使用香草JS，可以執行以下操作：

var items = document.getElementById('board').children;
for(x in items) {
    items[x].onclick = function() {
        playerMove(items[x]);
    };
}

Answer 4

嘗試：

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); 
      };
}

Answer 5

用這個：

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

對於每個Div，將“ element_id”更改為“一個”，“兩個”，...

Answer 6

您的答案在以下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中單擊任意一個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>

將事件處理程序附加到DOM元素

問題描述

6 個解決方案

解決方案1
2 2012-09-30 05:59:15

解決方案2
2 2012-09-30 06:01:05

解決方案3
1 2012-09-30 06:00:55

解決方案4
0 2012-09-30 05:58:33

解決方案5
0 已采納 2012-09-30 06:01:00

解決方案6
0 2012-09-30 06:56:47

將事件處理程序附加到DOM元素

問題描述

6 個解決方案

解決方案1 2 2012-09-30 05:59:15

解決方案2 2 2012-09-30 06:01:05

解決方案3 1 2012-09-30 06:00:55

解決方案4 0 2012-09-30 05:58:33

解決方案5 0 已采納 2012-09-30 06:01:00

解決方案6 0 2012-09-30 06:56:47

解決方案1
2 2012-09-30 05:59:15

解決方案2
2 2012-09-30 06:01:05

解決方案3
1 2012-09-30 06:00:55

解決方案4
0 2012-09-30 05:58:33

解決方案5
0 已采納 2012-09-30 06:01:00

解決方案6
0 2012-09-30 06:56:47