我正在制作一个几乎完成的tic tac toe游戏。我唯一想知道的是,是否可以从我的.js文件中为onclick
添加事件处理程序,而不是直接从HTML属性中调用它。以下是使用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>
对此事的任何想法都将不胜感激。
答案 0 :(得分:2)
如果你使用jQuery这样的东西应该工作:
$(document).ready(function() {
$('#board div').click(playerMove);
});
答案 1 :(得分: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);
}
}
答案 2 :(得分:1)
你应该考虑使用jQuery。如果你使用的是jQuery,那就简单了:
$('#board > div').click(playerMove);
如果你想坚持使用香草JS,你可以这样做:
var items = document.getElementById('board').children;
for(x in items) {
items[x].onclick = function() {
playerMove(items[x]);
};
}
答案 3 :(得分:0)
尝试:
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);
};
}
答案 4 :(得分:0)
使用此:
document.getElementById('element_id').onclick = function(){ playerMove(this); };
对于每个Div,将'element_id'更改为'one','two',...
答案 5 :(得分:0)
您的答案如下5行。试试吧:)如果有人在新帖子或我的帖子中复制/转换我的代码到j-query,欢迎没问题。
var yourDivID = document.getElementById('your_Div_ID');
yourDivID.addEventListener('click', function (){ playerMove(this); }, false);
function playerMove(divElement)
{
alert(divElement.id);
}
我试图将完整的演示文稿 Here on jsfiddle.net ,您可以点击九个中的任意一个来检查其事件如果链接不起作用,那么您可以检查以下代码(为我工作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>