JavaScript HTML DOM イベントリスナー
addEventListener() メソッド
addEventListener() メソッドは、指定された要素にイベント ハンドラーを追加するために使用されます。
addEventListener() メソッドによって追加されたイベント ハンドルは、既存のイベント ハンドルを上書きしません。
複数のイベント ハンドラーを要素に追加できます。
2 つの「クリック」イベントなど、同じタイプの複数のイベント ハンドラーを同じ要素に追加できます。
イベント リスナーは HTML 要素だけでなく、任意の DOM オブジェクトに追加できます。例: ウィンドウ オブジェクト。
addEventListener() メソッドを使用すると、イベント (バブリングとキャプチャ) の制御が簡単になります。
addEventListener() メソッドを使用すると、JavaScript が HTML タグから分離されるため、HTML タグを制御せずにイベント リスナーを追加することもできます。
removeEventListener() メソッドを使用してイベント リスニングを削除できます。
構文
element.addEventListener(event, function, useCapture);
最初のパラメータはイベントのタイプ(「クリック」や「マウスダウン」など)です。
2番目のパラメータはイベントの後に呼び出されます。関数がトリガーされます。
3 番目のパラメータは、イベントがバブリングしているかキャプチャしているかを説明するために使用されるブール値です。このパラメータはオプションです。
注: 「on」接頭辞は使用しないでください。 たとえば、「onclick」の代わりに「click」を使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(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 ("函数已执行!")
}
</script>
</body>
</html>Window オブジェクトにイベント ハンドラーを追加します
addEventListener () メソッドを使用すると、次のことができます。 HTML 要素、HTML ドキュメント、ウィンドウ オブジェクトなどの HTML DOM オブジェクトにイベント リスナーを追加します。または、xmlHttpRequest オブジェクトなどの他の支出イベント オブジェクト。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>尝试重置浏览器的窗口触发 "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中文网(php.cn)</title>
</head>
<body>
<button id="myBtn">点击查看结果</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>イベント バブリングまたはイベント キャプチャ?
イベント配信にはバブリングとキャプチャという 2 つの方法があります。
イベント配信は、要素イベントが発生する順序を定義します。 <p> 要素を <div> 要素に挿入し、ユーザーが <p> 要素をクリックした場合、どの要素の「click」イベントが最初にトリガーされますか?
バブリングでは、内部要素のイベントが最初にトリガーされ、次に外部要素がトリガーされます。つまり、<p> 要素の click イベントが最初にトリガーされ、次に <div> の click イベントがトリガーされます。 ; 要素がトリガーされます。
キャプチャでは、外部要素のイベントが最初にトリガーされ、次に内部要素のイベントがトリガーされます。つまり、
addEventListener() メソッドは、「useCapture」パラメータを指定して配信タイプを設定できます:
addEventListener(event, function, useCapture);
デフォルト値は false、つまりバブル配信です。 true の場合、イベントはキャプチャ パスを使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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中文网(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 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
<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>