javascript - 加载事件导致我的函数触发而不是单击事件

Question

我正在尝试在没有 JavaScript 的情况下向元素添加一个类。我定义了一个函数，单击按钮时将触发该函数，但是当我加载页面时，会使用 onload 事件立即添加该类，而不是指定的单击事件。这很奇怪，

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click">

#div1 {
width: 150px;
height: 100px;
background-color: red;
position: relative;
transition: top, left 0.43s 0.56s ease-in-out;
}
.move {
    top: 200px;
    left: 450px;
    transition: top, left 0,4s 0.58s ease-in-out;
}

function ulterClass (el, newClass) {
var currentClass = el.getAttribute('class');
if (typeof currentClass!== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' '+ newClass);
}else{
    el.setAttribute('class', newClass);
}
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
function ulterClass (el, newClass) {
var currentClass = el.getAttribute('class');
if (typeof currentClass!== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' '+ newClass);
}else{
    el.setAttribute('class', newClass);
}
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');

btn.addEventListener('click', ulterClass(div, 'move'));

Answer 1

问题出在这个声明上。当它运行时，它会执行该函数。

btn.onclick = ulterClass(div, 'move');

相反，您可以使用按钮本身的 onclick 属性来分配事件处理程序。像这样:

<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')">

function ulterClass(el, newClass) {
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');
// When this statement runs, it executes the function.
//btn.onclick = ulterClass(div, 'move');

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')">

我还建议您可以在事件处理程序中提供其 ID，而不是引用全局变量 div。看这个:

function ulterClass(elementId, newClass) {
  var el = document.getElementById(elementId);
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
//var div = document.getElementById('div1');
//var btn = document.getElementById('btn');
// When this statement runs, it executes the function.
//btn.onclick = ulterClass(div, 'move');

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" onclick="ulterClass('div1', 'move')">

以下是使用 addEventListener 实现此操作的方法:

function ulterClass(el, newClass) {
  var currentClass = el.getAttribute('class');
  if (typeof currentClass !== 'undefined' && currentClass) {
    el.setAttribute('class', currentClass + ' ' + newClass);
  } else {
    el.setAttribute('class', newClass);
  }
}
var div = document.getElementById('div1');
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  ulterClass(div, 'move');
});

#div1 {
  width: 150px;
  height: 100px;
  background-color: red;
  position: relative;
  transition: top, left 0.43s 0.56s ease-in-out;
}

.move {
  top: 200px;
  left: 450px;
  transition: top, left 0, 4s 0.58s ease-in-out;
}

<div id="div1" class="mydiv">A DIV</div>
<input type="button" id="btn" value="click" >