JavaScript HTML DOM イベントリスナー

addEventListener() メソッド

addEventListener() メソッドは、指定された要素にイベントハンドラーを追加するために使用されます。

addEventListener() メソッドによって追加されたイベントハンドルは、既存のイベントハンドルを上書(shū)きしません。

複數(shù)のイベントハンドラーを要素に追加できます。

2 つの「クリック」イベントなど、同じタイプの複數(shù)のイベントハンドラーを同じ要素に追加できます。

イベントリスナーは HTML 要素だけでなく、任意の DOM オブジェクトに追加できます。例: ウィンドウオブジェクト。

addEventListener() メソッドを使用すると、イベント (バブリングとキャプチャ) の制御が簡(jiǎn)単になります。

addEventListener() メソッドを使用すると、JavaScript が HTML タグから分離されるため、HTML タグを制御せずにイベントリスナーを追加することもできます。

removeEventListener() メソッドを使用してイベントリスニングを削除できます。

構(gòu)文

element.addEventListener(event, function, useCapture);

最初のパラメータはイベントのタイプ(「クリック」や「マウスダウン」など)です。

2番目のパラメータはイベントの後に呼び出されます。関數(shù)がトリガーされます。

3 番目のパラメータは、イベントがバブリングしているかキャプチャしているかを説明するために使用されるブール値です。このパラメータはオプションです。

注: 「on」接頭辭は使用しないでください。たとえば、「onclick」の代わりに「click」を使用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點(diǎn)擊</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>
</body>
</html>

同じ要素に複數(shù)のイベントハンドラーを追加します

addEventListener() メソッドを使用すると、既存のイベントを上書(shū)きせずに、同じ要素に複數(shù)のイベントを追加できます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點(diǎn)擊查看</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>

パラメータの受け渡し

パラメータ値を渡すときは、「匿名関數(shù)」を使用してパラメータ付きの関數(shù)を呼び出します:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button id="myBtn">點(diǎn)擊查看結(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>

イベントバブリングまたはイベントキャプチャ?

イベント配信にはバブリングとキャプチャという 2 つの方法があります。

イベント配信は、要素イベントが発生する順序を定義します。 <p> 要素を <div> 要素に挿入し、ユーザーが <p> 要素をクリックした場(chǎng)合、どの要素の「click」イベントが最初にトリガーされますか?

バブリングでは、內(nèi)部要素のイベントが最初にトリガーされ、次に外部要素がトリガーされます。つまり、<p> 要素の click イベントが最初にトリガーされ、次に <div> の click イベントがトリガーされます。 ; 要素がトリガーされます。

キャプチャでは、外部要素のイベントが最初にトリガーされ、次に內(nèi)部要素のイベントがトリガーされます。つまり、

要素の click イベントが最初にトリガーされ、次に click イベントがトリガーされます。 <p> 要素のトリガーが発生します。

addEventListener() メソッドは、「useCapture」パラメータを指定して配信タイプを設(shè)定できます:

addEventListener(event, function, useCapture);

デフォルト値は false、つまりバブル配信です。 true の場(chǎng)合、イベントはキャプチャパスを使用します。

<!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">點(diǎn)擊段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
<p id="myP2">點(diǎn)擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你點(diǎn)擊了 P1 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你點(diǎn)擊了 DIV1 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你點(diǎn)擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你點(diǎn)擊了 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 事件句柄，鼠標(biāo)在桔紅色的框內(nèi)移動(dòng)時(shí)會(huì)顯示隨機(jī)數(shù)。
  <p>點(diǎn)擊按鈕移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">點(diǎn)擊暫停</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>

學(xué)び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style type="text/css"> .item{ display: table; margin: 100px; } #outer{ width:400px; height:400px; background-color: blue; } #inner{ vertical-align: middle; width:200px; height:200px; background-color: white; } #core{ width:80px; height:80px; background-color: red; text-indent: 10px; line-height: 50px; } </style> </head> <body> <div class='item' id='outer' onclick="alert('outer')"> <div class='item' id='inner' onclick="alert('inner');stopbubble(arguments[0])"> <div class='item' id='core' onclick="alert('core')"> core!!!!! </div> </div> </div> <p>點(diǎn)擊不同的顏色框</p> </body>  <script type=‘text/javascript‘> var core = document.getElementById(‘core‘); core.addEventListener("click",function(){alert(‘dddddd‘)},false); //addEventListener: can add one more event to node "core" function stopbubble(e){ e.stopPropagation();//stop bubble event on this node } </script> </html>

提出するリセットコード

自動(dòng)運(yùn)転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得