Question

将事件处理程序附加到 DOM 元素

2012-09-30

2987

javascript html

我正在开发一款井字游戏，目前已经接近完成。我唯一想知道的是，是否可以从我的 .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);

如果您想继续使用 vanilla JS，您可以执行以下操作：

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