在没有jQuery的情况下传递事件对象

Question

道歉的基本问题。 如果不找到包含jQuery的说明，就很难找到有关JS事件处理的信息，我正在尝试使用纯Javascript操作DOM。 它一直在帮助我更好地了解浏览器的工作方式。

我正在尝试调用一个函数，以向具有相同类的元素添加一个附加类。

有人可以在这里解释正确的语法吗？

是否需要引用ID？

我尝试了多种方法。 非常感谢。

 function animateSquare(e) { var id = e.target.id var el = document.getElementById(id); el.className = el.className + "newClass"; }; window.onload = function() { var anim = document.getElementsByClassName("squareThing"); for (var i = 0; i < anim.length; i++) { anim[i].click(function(e) { animateSquare(e); }); } } 

 <div class="squarething" id="one"></div> <div class="squarething" id="two"></div> 

Answer 1

与jQuery中的.on()类似，添加事件绑定的标准Javascript方法是addEventListener 。

并且，当您向el.className添加一个类时，需要在其前面包含一个空格，以将其与现有类分开。

您不需要使用getElementById(id) ，因为e.target是元素本身-您正在获取元素，获取其ID，然后再次通过ID查找该元素，这是多余的。

 function animateSquare(e) { var el = e.target; el.className = el.className + " newClass"; }; window.onload = function() { var anim = document.getElementsByClassName("squarething"); for (var i = 0; i < anim.length; i++) { anim[i].addEventListener('click', function(e) { animateSquare(e); }); } } 

 .squarething { width: 50px; height: 50px; background-color: green; margin: 2px; } .newClass { background-color: red; } 

 <div class="squarething" id="one"></div> <div class="squarething" id="two"></div> 

Answer 2

这应该足够了。 试试吧：

 function animateSquare() { this.className += " newClass"; } window.onload = function() { var anim = document.getElementsByClassName("squarething"); for (var i = 0; i < anim.length; i++) { anim[i].onclick = animateSquare; } } 

 .squarething { padding: 1em; margin: .5em; float: left; background: blue; } .squarething.newClass { background: orange; } 

 <div class="squarething" id="one"></div> <div class="squarething" id="two"></div> 

Answer 3

.click(handler)是jQuery方法-您需要.onclick或addEventListener方法：

window.onload = function() {
    var anim = document.getElementsByClassName("squarething");
    for (var i = 0; i < anim.length; i++) {
        anim[i].onclick = animateSquare;
    }
}

您还可以在处理函数中使用this函数：

function animateSquare(e) {
    this.className = el.className + "newClass";
};