Attaching event handler to DOM elements

前端未结

关注

 6  657

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 fro

相关标签:

6条回答

予麋鹿

2021-01-28 12:40

Your answer is in following 5 lines. Try it :) If someone copies/converts my code in new post or my post to j-query, That is welcome with no problem.

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

I have tried to put complete demo Here on jsfiddle.net, You can click any div out of nine to check its event if link does not work, then you can check the following code (working for me WIN7 and 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>

0 讨论(0)

遥遥无期

2021-01-28 12:41

In plain javascript (no cross platform libraries), event handlers can be added via javascript code with addEventListener (modern browsers) or attachEvent (older versions of IE).

Here's a simple function that adds an event handler in a cross browser fashion:

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

Example usage (called after the page DOM has loaded):

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

Or, to install event handlers for all the board divs, you could do this:

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

0 讨论(0)

天命终不由人

2021-01-28 12:50

Try:

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

For binding the event handler in js file:

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

0 讨论(0)

灰色年华

2021-01-28 12:56
If you use jQuery something like this should work:
```
$(document).ready(function() {
  $('#board div').click(playerMove);
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
梦如初夏

2021-01-28 13:03
Use this:
```
document.getElementById('element_id').onclick = function(){ playerMove(this); };
```
For each Div, change 'element_id' with 'one', 'two', ...
0 讨论(0)
发布评论:

提交评论
- 加载中...
走了就别回头了

2021-01-28 13:04
You should really consider using jQuery for this. If you were using jQuery, this would have been as simple as:
```
$('#board > div').click(playerMove);
```
In case you want to stick with vanilla JS, you can do:
```
var items = document.getElementById('board').children;
for(x in items) {
    items[x].onclick = function() {
        playerMove(items[x]);
    };
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...