先来看addEvenListener事件
addEventListener() 方法用于向指定元素添加事件句柄。
提示: 使用 removeEventListener() 方法来移除
addEventListener() 方法添加的事件句柄。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="button1" >按键1</button>
<p id="event">鼠标事件</p>
<button id="button2">按钮2</button>
<button id="button3">按钮3</button>
<script>
//请在此处编写代码
/********** Begin **********/
var x=document.getElementById("button1");
x.addEventListener("mouseout", mouse_move);//鼠标移开事件
x.addEventListener("mouseover", mouse_on);//鼠标聚焦事件
x.addEventListener("click", mouse_click);//鼠标点击事件
function mouse_move() {
document.getElementById("event").innerHTML+="鼠标移开<br>"; //在p标签后添加html
}
function mouse_on() {
document.getElementById("event").innerHTML+="鼠标聚焦<br>";
}
function mouse_click() {
document.getElementById("event").innerHTML+="鼠标点击<br>";
}
/********** End **********/
</script>
</body>
</html>
这里的button2可以使用addEventListener()同时监听多个事件。而且事件不会被覆盖。
注意:这里的script标签不能放在head里面,因为我们得先加载完html标签,才能使用监听事件。
拓展:mouseup ()当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件。
mousedown()当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件。
mouseenter ()当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。
mouseleave ()当鼠标指针离开被选元素时,会发生 mouseleave 事件
我们再来看看onclick()的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="click_on">onclick</p>
<script>
var click1=document.getElementById("click_on");
click1.onclick=function ()
{alert("第一个click")};
click1.onclick=function()
{alert("第二个click")};
</script>
</body>
</html>
这里只打印第二个click;表明使用多个onclick会被覆盖。
所以onclick和addEventListener事件区别是:onclick事件会被覆盖,而addEventListener可以先后运行不会被覆盖,addEventListener可以监听多个事件。