Question

我尝试学习js。我想在一个元素上添加多个事件。我试过了，但是我的代码没有用。任何人都可以更正我的代码。我的代码：

var val=document.getElementById("val").addEventListener("event",change1);
function change1(){
  if ("event"="click"){
    document.getElementById("div1").style.color="red";
    var inp=document.getElementsByName("customer");
    inp[0].value="test user";
  }
  else if ("event"="mouseover"){
    document.getElementById("div1").style.color="blue";
    var inp=document.getElementsByName("customer");
    inp[0].value="Wellcome Customer";
  }
}

Answer 1

您应该为每个事件添加一个回调（它还可以提高可读性和调试速度）：

var val=document.getElementById("val").addEventListener("click",change1);
var val=document.getElementById("val").addEventListener("mouseover",change2);

function change1(){
    document.getElementById("div1").style.color="red";
    var inp=document.getElementsByName("customer");
    inp[0].value="test user";
}

function change2(){
    document.getElementById("div1").style.color="blue";
    var inp=document.getElementsByName("customer");
    inp[0].value="Wellcome Customer";
}

Answer 2

const val = document.getElementById("val");
const div1 = document.getElementById("div1")
const inp = document.getElementsByName('customer')[0];

val.addEventListener("click", eventHandler);
val.addEventListener("mouseover", eventHandler);

function eventHandler(event) {
    if (event.type === "click"){
        div1.style.color = "red";
        inp.value = "test user";
    }
    else if (event.type === "mouseover") {
         div1.style.color = "blue";
         inp.value = "Wellcome Customer";
    }
}

1）您无需在此处分配作业： var val = document.getElementById("val")...

此处val包含undefined且从未使用过

2）addEventListener的第一个参数必须是事件类型，而不是字符串'event'（about events）

3）在if语句("event"="click")必须比较的情况下，而不是赋值（about comparison operators）

4）如果每次触发事件时都使用div1和inp，则一次查找此元素，分配给变量，然后引用它们

一个元素上的多个事件

2 个答案: