Question

在下面的代码HTML +脚本中，

使用setAttribute(...)在页面加载后附加事件处理程序。
事件处理程序会传递一个动态读取的参数。
事件处理程序已成功附加（由getAttribute(...)

但是，处理程序不会触发。

下面的代码段有什么问题？

<HTML>
 <BODY onload="loader();">
   <table>
        <tbody>
            <tr>
                <td id="myId">FirstColumn</td>
                <td id="otherId">SecondColumn</td>
                <td id="lastId">Balderdash</td>
            </tr>
        </tbody>
   </table>
 </BODY>
 <script language="javascript">
    function loader(){

    document.getElementById('myId').setAttribute('onmouseover','showMessage("'+document.getElementById('otherId').innerHTML+'");');
    alert(document.getElementById('myId').getAttribute('onmouseover'));

    document.getElementById('myId').setAttribute('onmouseout','alert(\"'+document.getElementById('otherId').innerHTML+'\");');
    alert(document.getElementById('myId').getAttribute('onmouseout'));
    document.getElementById('lastId').setAttribute('onmouseout','alert("hohoho");');

    alert(document.getElementById('lastId').getAttribute('onmouseout'));
    function showMessage( aMessage ){
        alert(aMessage);
    }
 </script>
</HTML>

Answer 1

不要使用setAttribute在DOM节点上设置事件处理程序。只需直接使用事件处理程序属性，并为其分配函数而不是字符串：

document.getElementById('myId').onmouseover = function() {
  showMessage(document.getElementById('otherId').innerHTML);
};

Answer 2

蒂姆在那里的帖子帮助我搞清楚了;虽然我的理解是经验性的。

除了直接分配

e.g。

document.getElementById(...).onMouseOver = stuff;
function stuff(){//do the Deed};

代替

document.getElementById(...).setAttribute(...);

显然附加的事件处理程序可能接受任何参数。

我改变了我的处理程序签名以接受0个参数，并且它有效！

如何将参数传递/转义到使用javascript附加的事件处理程序？

2 个答案: