JavaScript HTML DOM ??? ???
addEventListener() ???
addEventListener() ???? ??? ??? ??? ???? ???? ? ?????.
addEventListener() ???? ??? ??? ??? ?? ??? ??? ???? ????.
? ??? ?? ??? ???? ??? ? ????.
? ?? "??" ???? ?? ??? ??? ?? ??? ???? ??? ??? ??? ? ????.
HTML ???? ??? ?? DOM ??? ??? ???? ??? ? ????. ?: ? ??.
addEventListener() ???? ???? ???(??? ? ??)? ? ?? ??? ? ????.
addEventListener() ???? ???? JavaScript? HTML ???? ???? ???? ?????. HTML ???? ???? ??? ??? ???? ??? ?? ????.
removeEventListener() ???? ???? ??? ??? ??? ? ????.
Syntax
element.addEventListener(event, function, useCapture);
? ?? ????? ??? ??(?: "click" ?? "mousedown")???.
? ?? ????? ??? ?? ?????. ??? ??????.
? ?? ????? ???? ?????? ??? ?????? ???? ? ???? ?? ????. ? ????? ???????.
??: "on" ???? ???? ???. ?? ?? "onclick" ?? "click"? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>??? ??? ?? ??? ??? ??
addEventListener() ???? ???? ?? ???? ???? ?? ??? ??? ?? ???? ??? ? ????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊查看</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函數(shù)已執(zhí)行!")
}
</script>
</body>
</html>Window ??? ??? ??? ??
addEventListener () ???? ???? ??? ??? ? ????. HTML ??, HTML ?? ? ? ??? ?? HTML DOM ??? ??? ???? ?????. ?? xmlHttpRequest ??? ?? ?? ?? ??? ??.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>嘗試重置瀏覽器的窗口觸發(fā) "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>???? ??
???? ?? ??? ? "?? ??"? ???? ????? ?? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點擊查看結(jié)果</button>
<p id="demo"></p>
<script>
var p1 = 8;
var p2 = 8;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>??? ??? ?? ??? ???
??? ?? ???? ???? ?? ? ??? ????.
??? ??? ?? ???? ???? ??? ?????. <p> ??? <div> ??? ???? ???? <p> ??? ???? ?? ??? '??' ???? ?? ??????
?????? ?? ??? ???? ?? ???? ?? ?? ??? ??????. ?, <p> ??? ?? ???? ?? ???? ?? <div> ; ??? ??????.
?? ? ?? ??? ???? ?? ???? ?? ?? ??? ???? ??????. ?, <div> ??? ?? ???? ?? ???? ?? ?? ???? ?????. <p> ??? ??????.
addEventListener() ???? "useCapture" ????? ???? ?? ??? ??? ? ????.
addEventListener(event, function, useCapture);
???? false, ? ?? ??? ?????. true? ?? ?? ???? ?? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px;
}
</style>
</head>
<body>
<div id="myDiv">
<p id="myP">點擊段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">點擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
alert("你點擊了 P1 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你點擊了 DIV1 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你點擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你點擊了 DIV2 元素 !");
}, true);
</script>
</body>
</html>removeEventListener() ???
removeEventListener() ???? addEventListener() ???? ?? ??? ??? ???? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
}
</style>
</head>
<body>
<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內(nèi)移動時會顯示隨機數(shù)。
<p>點擊按鈕移除 DIV 的事件句柄。</p>
<button onclick="removeHandler()" id="myBtn">點擊暫停</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>
</body>
</html>
