将内联事件处理程序移动到chrome扩展的javascript工作表

Moving inline event handlers to javascript sheet for chrome extension

本文关键字：扩展 javascript 工作 chrome 事件处理 程序 移动      更新时间：2023-09-26

我正在创建一个井字游戏的chrome扩展。然而，我的html代码有内联事件处理程序，由于内容安全性的原因，这些处理程序是不允许的。我需要弄清楚如何将这些事件处理程序转移到javascript页面。

这是HTML页面，内联事件处理程序在按钮中，它们调用函数gamestart:

  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link href="game.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="singleplayer.js"></script>
  </head>
 <body>
 <center><u><h1>Single Player Mode</h1></u>
 <table> <tr><td>
 <button style="background-color:lightblue ; color: black" id="0" onclick = "gamestart(0)">
 </button></td>
 <td>
 <button style="background-color:lightblue ; color: black" id="1" onclick = "gamestart(1)">    
 </button>
 </td><td>
 <button style="background-color:lightblue ; color: black" id="2" onclick = "gamestart(2)">   
 </button>
 </td></tr>
 <tr><td>
 <button style="background-color:lightblue ; color: black" id="3" onclick = "gamestart(3)">   
 </button>
 </td><td>
 <button style="background-color:lightblue ; color: black" id="4" onclick = "gamestart(4)">   
 </button>
 </td><td>
 <button style="background-color:lightblue ; color: black" id="5" onclick = "gamestart(5)">
 </button>
 </td></tr><tr><td>
 <button style="background-color:lightblue ; color: black" id="6" onclick = "gamestart(6)">
 </button>
 </td><td>
 <button style="background-color:lightblue ; color: black" id="7" onclick = "gamestart(7)">
 </button>
 </td><td>
 <button style="background-color:lightblue ; color: black" id="8" onclick = "gamestart(8)">
 </button>
 </td></tr></table></center>
 </body>
 </html>

在javascript表上，这里是使用事件处理程序调用的函数：

var counter=0;
function gamestart(id){
    console.log(id);
    counter=counter+2
    if(counter%1==0){
    document.getElementById(id).innerHTML = "X";
    checkX("X");
    stopbutton("X");    
    setTimeout('player2()',500);
    checktie();
    }
}

document.onclick = function (event) {
    if (event.target.nodeName === 'BUTTON') {
        gamestart(event.target.id);
    }
}

您可以在这些行中执行某些操作。

使用addEventListener附加事件，并使用getElementsByTagName属性定位元素

var elem = document.getElementsByTagName('button'),
    counter = 0;
for(var i=0;i< elem.length;i++) {
    elem[i].addEventListener('click', gamestart);
}
function gamestart(e){
   var id = this.id;
    console.log(id);
    counter=counter+2
    if(counter%1==0){
        document.getElementById(id).innerHTML = "X";
        checkX("X");
        stopbutton("X");    
        setTimeout('player2()',500);
        checktie();
}

检查Fiddle

另外，将内联样式分离出来并将它们放在类中也是一种很好的做法。

.highlight {
    background-color:lightblue;
    color: black
}

按钮的HTML看起来像这个

 <button class="highlight" id="1">Button 1</button>

漂亮干净，只保留了元素的结构、功能和风格。

现在，您甚至可以基于类瞄准元素

var elem = document.getElementsByClassName('highlight')
相关文章：