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

【问题标题】：Attaching event handler to DOM elements将事件处理程序附加到 DOM 元素
【发布时间】：2012-09-30 05:55:41
【问题描述】：

我正在开发一款井字游戏，几乎完成了。我唯一想知道的是，是否可以从我的 .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>

对此事的任何想法将不胜感激。

【问题讨论】：

@gotguts。试试我的回答。希望如果我能够理解您的问题会有所帮助，我希望是的。它对我有用。
我想我的问题是双重的，我试图一次回答一个部分。我能够使用@Courses Web 的答案获得将事件处理程序放置在 js 中的答案。我的问题的第二部分，我不确定您的解决方案是否回答了这个问题，想知道是否有办法添加条件“如果单击一个元素，不要选择其他元素？（这部分游戏是在继续下一步之前回答某种类型的问题）。

标签： javascript html

【解决方案1】：

如果你使用 jQuery，这样的东西应该可以工作：

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

【讨论】：

但是，这个问题与jQuery无关。
注意参数是this，你的方式会将事件传递给函数playerMove

【解决方案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);
    }
}

【讨论】：

【解决方案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]);
    };
}

【讨论】：

【解决方案4】：

使用这个：

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

对于每个 Div，将 'element_id' 更改为 'one', 'two', ...

【讨论】：

这对我有用。我还有一个问题。有没有办法添加条件“如果单击一个元素，不要选择其他元素？（这个游戏的一部分是在继续下一步之前回答某种类型的问题）。谢谢！

【解决方案5】：

试试：

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

【讨论】：

@SnakesandCoffee 这取决于操作的要求。
他似乎想将相同的功能附加到所有 div 上
@SnakesandCoffee 为此更新。

【解决方案6】：

您的答案在以下 5 行中。试试看 :) 如果有人在新帖子中复制/转换我的代码或将我的帖子复制/转换为 j-query，这是欢迎的，没有问题。

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

我试过放完整的demoHere on 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>

【讨论】：