DOM イベントリスナー


addEventListener() メソッド

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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() メソッドによって追加されたイベント ハンドルは、既存のイベント ハンドルを上書きしません。

複数のイベント ハンドラーを要素に追加できます。

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

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

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

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

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

構文

element.addEventListener(event, function, useCapture);

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

2番目のパラメータパラメーターは、イベントがトリガーされた後に呼び出される関数です。

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

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

元の要素にイベント ハンドラーを追加します

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

インスタンスを実行する»

「インスタンスを実行」ボタンをクリックしてオンライン インスタンスを表示します

関数名を使用して、外部関数:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

同じ要素に複数のイベントハンドラーを追加します

addEventListener() メソッドで追加が可能同じ要素に複数のイベントを追加しても、既存のイベントは上書きされません:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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 ("函数已执行!")
}
</script>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

異なるタイプを追加できます同じ要素へのイベントの追加:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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 DOM オブジェクト、HTML DOM オブジェクト (HTML 要素、HTML ドキュメント、ウィンドウ オブジェクトなど) にイベント リスナーを追加できます。または、xmlHttpRequest オブジェクトなどの他の支出イベント オブジェクト。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>实例在window对象中使用 addEventListener() 方法。</p>
<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>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</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>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

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

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

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

バブリング では、最初に内部要素のイベントがトリガーされ、次に外部要素がトリガーされます。 最初に <p> 要素の click イベントがトリガーされ、次に <div> 要素の click イベントがトリガーされます。

キャプチャ

では、外部要素のイベントが最初にトリガーされ、次に内部要素のイベントがトリガーされます。つまり、<div> 要素の click イベントが最初にトリガーされます。 をクリックし、<p> 要素のクリック イベントをトリガーします。 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>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</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("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

removeEventListener()メソッド

removeEventListener()メソッドは、追加によって追加されたイベントハンドラーを削除しますイベントリスナー( ) メソッド:

インスタンス

<!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>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ブラウザのサポート

表内の数字は、このメソッドをサポートする最初のブラウザのバージョン番号を示します。

7.0
メソッド1.png2.png3.png4.png5.png
addEventListener()1.0 9.01.01.07.0
removeEventListener() 1.009.01.01.0

note：
8以前のIEバージョン、Opera 7.0および以前のバージョンは、AddEventListener（）およびRemoveEventListener（）をサポートしていません。 方法。ただし、そのようなブラウザのバージョンでは、detachEvent() メソッドを使用してイベント ハンドルを削除できます:

element.attachEvent(event, function);
element.detachEvent(event, function);

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<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>

サンプルの実行»

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください


HTML DOMイベントオブジェクトリファレンスマニュアル

🎜すべてのHTML DOMイベントは、完全な HTML DOM イベント オブジェクト リファレンスを確認してください。 🎜
←
→