JavaScript HTML DOM ??? ???
JavaScript HTML DOM EventListener
addEventListener() ???
???? ??? ??? ? ?? ???? ??????.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>addEventListener() ???? ??? ??? ??? ???? ???? ? ?????.
addEventListener() ???? ??? ??? ??? ?? ??? ??? ???? ????.
? ??? ?? ??? ???? ??? ? ????.
? ?? "??" ???? ?? ??? ??? ?? ??? ???? ??? ??? ??? ? ????.
HTML ???? ??? ?? DOM ??? ??? ???? ??? ? ????. ?: ? ??.
addEventListener() ???? ???? ???(??? ? ??)? ? ?? ??? ? ????.
addEventListener() ???? ???? JavaScript? HTML ??? ???? ???? ?????. HTML ??? ???? ??? ??? ???? ??? ?? ????.
removeEventListener() ???? ???? ??? ??? ??? ? ????.
Syntax
element.addEventListener(event, function, useCapture);
? ?? ????? ??? ??(?: "click" ?? "mousedown")???.
? ?? ????? ??? ?? ?????. ??? ??????.
? ?? ????? ???? ??? ??? ?? ??? ???? ? ???? ?? ????. ? ????? ???????.
??: "on" ???? ???? ???. ?? ?? "onclick" ?? "click"? ?????.
?? ??? ??? ???? ?????
???? ??? ???? "Hello World!"? ?????.
<!DOCTYPE html>
<html>
<body>
<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>
</body>
</html>?? ??? ???? ?? ??? ??? ? ????.
???? ???? ??? "Hello World!" ??? ?????.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實例使用 addEventListener() 方法在用戶點擊按鈕時執(zhí)行函數(shù)。</p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
</script>
</body>
</html>??? ??? ?? ??? ??? ??
addEventListener() ???? ???? ?? ???? ???? ??? ??? ??? ?? ???? ??? ? ????.
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<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>??? ??? ? ????. ??? ??? ?? ??? ??? ???:
Instances
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實例使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>" }
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}
/script>
</body>
</html>Window ??? ??? ??? ??
addEventListener() ???? ???? HTML ??, HTML ?? ? ? ??? ?? HTML DOM ??? ??? ???? ??? ? ????. ?? xmlHttpRequest ??? ?? ?? ?? ??? ??.
???? ? ??? ???? ? ??? ??? ??:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實例在window對象中使用 addEventListener() 方法。</p>
<p>嘗試重置瀏覽器的窗口觸發(fā) "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>???? ??
???? ?? ??? ? "?? ??"? ???? ????? ?? ?? ??:
Instance
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>實例演示了在使用 addEventListener() 方法時如何傳遞參數(shù)。</p>
<p>點擊按鈕執(zhí)行計算。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5; var p2 = 7;
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>
<meta charset="utf-8">
<head>
<style>
div {
background-color: coral;
border: 1px solid;
padding: 50px; }
</style>
</head>
<body>
<p>實例演示了在添加不同事件監(jiān)聽時，冒泡與捕獲的不同。</p>
<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("你點擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
alert(" 你點擊了 DIV 元素 !"); },
false);
document.getElementById("myP2").addEventListener("click", function() {
alert("你點擊了 P 元素!"); }, true);
document.getElementById("myDiv2").addEventListener("click", function() {
alert("你點擊了 DIV 元素 !"); }, true);
</script>
</body>
</html>removeEventListener() ???
removeEventListener() ???? addEventListener() ???? ?? ??? ??? ???? ?????.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white; }
</style>
</head>
<body>
<div id="myDIV">
div 元素添加了 onmousemove 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動時會顯示隨機(jī)數(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>Browser support
?? ??? ? ???? ???? ? ?? ????? ?? ??? ?????.
method
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0
??: IE 8 ?? IE ??, Opera 7.0 ? ?? ??? ???? ????. ) ? RemoveEventListener() ???? ?????. ??? ??? ??? ???? ????? detachEvent() ???? ???? ??? ??? ??? ? ????.
element.attachEvent(event, function); element.detachEvent(event, function); :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p> Internet Explorer 8 及更早IE版本不支持addEventListener() 方法。</p>
<p>該實例演示了所有瀏覽器兼容的解決方法。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
if (x.addEventListener) {
x.addEventListener("click", myFunction);
}else if (x.attachEvent) {
x.attachEvent("onclick", myFunction); }
function myFunction() {
alert("Hello World!"); }
</script>
</body>
</html> 
