7 JS - 事件

1 事件

 

2 事件监听

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lizi</title>
</head>
<body>

<p>addEventListener()添加监听事件。</p>
<p>removeEventListener()移除监听事件。</p>

    
<button id="addlsn">监听</button>
<button id="removelsn" onclick="removeHandler()">移除监听</button>
<p id="demo"></p>

    
<script>
var x = document.getElementById("addlsn");
x.addEventListener("mouseover", myMOver);
x.addEventListener("click", myClick);
x.addEventListener("mouseout", myMout);
function myMOver() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function myClick() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myMout() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}

function removeHandler() {
    document.getElementById("addlsn").removeEventListener("mouseover", myMOver);
    document.getElementById("addlsn").removeEventListener("mouseout", myMout);
}
</script>

</body>
</html>

 

posted @ 2021-03-28 09:40  栗子测试开发  阅读(206)  评论(0)    收藏  举报