javascript - 为基于鼠标事件的动态div创建一个类

Question

我正在使用 javascript 创建动态 div。在这里我想动态分配类名。像下面的条件。

1. 鼠标悬停时将类设​​置为a
2. 鼠标单击时将类设置为 b
3. 否则将其设置为类c

我的代码如下。

var elementRange = document.getElementById("div");
 var elementSpan = document.createElement("span");
 if (elementSpan.onmouseover) {
    elementSpan.className = "a";
 } else if (elementSpan.onclick) {
   elementSpan.className = "b";
 } else {
   elementSpan.className = "c";
}
elementRange.appendChild(elementSpan);

<div id="div"></div>

当我运行此命令时，鼠标悬停/单击不起作用，只有默认的鼠标悬停/单击起作用。请让我知道我该怎么做。

而且，我只使用 javascript。

谢谢

Answer 1

您首先还需要通过 if else 语句绑定(bind) EventListener，这对于作为事件切换器的事件不起作用，您尝试的方式如下:

    var elementRange = document.getElementById("div");
    var elementSpan = document.createElement("span");
    elementSpan.addEventListener("click", function(){
        elementSpan.className = "a";
    });
    elementSpan.addEventListener("mouseover", function(){
        elementSpan.className = "b";
    });
    elementSpan.addEventListener("mouseout", function(){
        elementSpan.className = "c";
    });
    elementSpan.innerHTML = "Lorem Ipsum"; //I added this line at least make span visible purpose
    elementRange.appendChild(elementSpan);