将事件处理程序附加到DOM元素 [英] Attaching event handler to DOM elements

问题描述

我正在制作一个几乎完成的tic tac toe游戏。我唯一想知道的是，如果可以从我的.js文件中为 onclick 添加事件处理程序，而不是直接从HTML属性调用它。以下是使用 onclick 的一小段HTML：

 < div id =left> 
< div id =board> 
< div id =oneonclick =playerMove（this）> 
 
< / div> 
< div id =twoonclick =playerMove（this）> 
 
< / div> 
< div id =threeonclick =playerMove（this）> 
 
< / div> 
< div id =fouronclick =playerMove（this）> 
 
< / div> 
< div id =fiveonclick =playerMove（this）> 
 
< / div> 
< div id =sixonclick =playerMove（this）> 
 
< / div> 
< div id =sevenonclick =playerMove（this）> 
 
< / div> 
< div id =eightonclick =playerMove（this）> 
 
< / div> 
< div id =nineonclick =playerMove（this）> 
 
< / div> 
< / div> 
< / div> 
  

有关此事的任何想法都将不胜感激。

解决方案

使用这个：

pre $ document.getElementById（'element_id'）。 onclick = function（）{playerMove（this）; };

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

I am working on a tic tac toe game, which is almost complete. The only thing I am left wondering about is if it is possible to add an event handler for onclick from my .js file instead of directly calling it from an HTML attribute. Here is the bit of HTML that uses the 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>

Any thoughts on the matter would be greatly appreciated.

解决方案

Use this:

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

For each Div, change 'element_id' with 'one', 'two', ...

这篇关于将事件处理程序附加到DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！