单击事件并将 JavaScript 从 HTML 中分离出来答案

【问题标题】：Click event and separate JavaScript from HTML单击事件并将 JavaScript 从 HTML 中分离出来
【发布时间】：2015-11-13 18:30:12
【问题描述】：

对于一个概要网络应用程序，我试图在您单击时更改图像。我已经编写了如下代码（在 jsp 文件中），但我想将 JavaScript 与 HTML 分开（下一个代码运行良好）：

<head>
    <script type='text/javascript'>
        function ChangeState(){
            if(document.getElementById('imageStateBlue')!=null){
                var img=document.getElementById('imageStateBlue');
                img.setAttribute('alt', 'State: red');
                img.setAttribute('id', 'imageStateRed');
                img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
            else{
                if(document.getElementById('imageStateRed')!=null){
                    var img=document.getElementById('imageStateRed');
                    img.setAttribute('alt', 'State: blue');
                    img.setAttribute('id', 'imageStateBlue');
                    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}}}
    </script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

所以，我尝试了（在 ChangeState.js 中使用相同的 js 代码）（下一个代码不能正常工作）：

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

以及（这两个接下来的代码不能很好地工作）：

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' src='pages/synoptique/src/images/blue.png'/>
</body>

像这样使用 ChangeState.js：

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}
function imgClick(){
    document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}
window.addEventListener('load', imgClick, true);

但没有任何效果。它似乎没有在页面加载时导入。（当代码不能正常工作时，我的意思是点击时图像不会改变）。

【问题讨论】：

标签： javascript html dom javascript-events onclick

【解决方案1】：

您没有正确添加点击事件。

document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}

一旦你改变它，它就会从事件中删除id，对吗？因此，您需要做的是在更改 ID 后重新分配事件侦听器。所以在toBlue 和toRed 函数中，都要重新声明事件监听器。

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}

第一个imgClick 会失败，因为其中一个图像不存在。这也可能导致事件设置失败。

【讨论】：

【解决方案2】：

您不能指定让处理程序响应 id 更改

function ChangeState() {
  var img = this;
  if (/blue.png$/.test(img.src)) {
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
  } else {
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
  }
}

function imgClick() {
  document.getElementById('imageState').addEventListener('click', ChangeState, true);
}
window.addEventListener('load', imgClick, true);

&lt;img alt='State: blue' id='imageState' src='pages/synoptique/src/images/blue.png' /&gt;

【讨论】：