9.7 JavaScript深入-事件詳細
8609 ワード
何が事件ですか
イベントは、JavaScriptによって検出されることができる行為であり、一般的には、ユーザがウェブページと何らかのインタラクションを行うときに、インタラクションによって、インタラクション器は、イベント情報を記述するために対応するイベントオブジェクトを作成する.
イベントハンドリング関数(イベントハンドル)
あるイベントに対応して呼び出される関数です.各イベントは一つのイベントのハンドルに対応しています.イベントがトリガされると、ブラウザは指定された関数またはステートメントを実行します.事件対象:button イベントオブジェクトを一つのタイプに結びつける イベントハンドリング関数 なぜDOM 0級事件を使わないですか?
イベントは、JavaScriptによって検出されることができる行為であり、一般的には、ユーザがウェブページと何らかのインタラクションを行うときに、インタラクションによって、インタラクション器は、イベント情報を記述するために対応するイベントオブジェクトを作成する.
イベントハンドリング関数(イベントハンドル)
あるイベントに対応して呼び出される関数です.各イベントは一つのイベントのハンドルに対応しています.イベントがトリガされると、ブラウザは指定された関数またはステートメントを実行します.
var btn = document.querySelector('button');
function clickMe() {
console.log(this.innerHTML);
}
btn.addEventListener('click', clickMe);
var btn = document.querySelectorAll('button');
btn[0].onclick = fn1;
btn[0].onclick = fn2;
</code></pre>
<p> ：DOM0 ， 。</p>
<h3>DOM2 </h3>
<p>addEventListener ， ， 。 ， true ， ； false ， 。</p>
<pre><code>btn[1].addEventListener('click', fn1);
btn[1].addEventListener('click', fn2);
</code></pre>
<p> ：dom2 ， 。 。</p>
<h3> </h3>
<p>removeEventListener</p>
<pre><code>btn[1].removeEventListener('click', fn1); //
</code></pre>
<h3> IE</h3>
<p> ，IE678 。 IE8 ， </p>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 506px;">
<div class="image-view">
<a href="https://img. .com/image/info10/ce40d46c3b5f486fb46a8867db936959.jpg" target="_blank"><img src="https://img. .com/image/info10/ce40d46c3b5f486fb46a8867db936959.jpg" width="650" height="381" alt="9.7 JavaScript - _ 1 " style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
image.png
</div>
</div>
<div class="image-package">
<div class="image-container" style="max-width: 700px; max-height: 451px;">
<div class="image-view">
<a href="https://img. .com/image/info10/581e2ec6f02241ca95d862a9a40bc6ce.jpg" target="_blank"><img src="https://img. .com/image/info10/581e2ec6f02241ca95d862a9a40bc6ce.jpg" width="650" height="392" alt="9.7 JavaScript - _ 2 " style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
image.png
</div>
</div>
<h3> </h3>
<pre><code><button id="button"> </button>
var eventUtil = {
addHandler: function (elem, type, func) {
if (elem.addEventListener) {
elem.addEventListener(type, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + type, func);
} else {
elem['on' + type] = null;
}
},
removerHandler: function (elem, type, func) {
if (elem.removeEventListener) {
elem.removeEventListener(type, func, false);
} else if (elem.detachEvent) {
elem.detachEvent('on' + type, func);
} else {
elem['on' + type] = null;
}
}
}
var btn = document.getElementById('button');
eventUtil.addHandler(btn, 'click', fn1);
eventUtil.addHandler(btn, 'click', fn2);
eventUtil.removerHandler(btn, 'click', fn1);
function fn1 () {
alert('1');
}
function fn2 () {
alert('2');
}
</code></pre>
<h3> </h3>
<p> JS ，JS ， ？ 。 ， ， ， ， ， ， 。</p>
<p>JS event ， HMTL ， </p>
<ol>
<li> DOM ，</li>
<li> ， ，</li>
<li> ， DOM 。</li>
</ol>
<div class="image-package">
<div class="image-container" style="max-width: 492px; max-height: 237px;">
<div class="image-view">
<a href="https://img. .com/image/info10/e1c45353b27a48bd9d0949d25cb4e5b1.jpg" target="_blank"><img src="https://img. .com/image/info10/e1c45353b27a48bd9d0949d25cb4e5b1.jpg" width="492" height="237" alt="9.7 JavaScript - _ 3 " style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
image.png
</div>
</div>
<p> ，IE </p>
<h3> </h3>
<p>IE （event bubbling）， （ ） ， （ ）。</p>
<pre><code class="html"><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
</body>
</html>
</code></pre>
<p> <div> ， click ：<strong>div -> body -> html -> document</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 463px; max-height: 354px;">
<div class="image-view">
<a href="https://img. .com/image/info10/db852652db3b48db95605603d0e30c07.jpg" target="_blank"><img src="https://img. .com/image/info10/db852652db3b48db95605603d0e30c07.jpg" width="463" height="354" alt="9.7 JavaScript - _ 4 " style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
QQ 20170821161531.png
</div>
</div>
<h3> </h3>
<p>Netscape Communicator （event capturing）。 ， 。 。</p>
<p><strong>document -> html -> body -> div</strong></p>
<div class="image-package">
<div class="image-container" style="max-width: 390px; max-height: 324px;">
<div class="image-view">
<a href="https://img. .com/image/info10/fa9a1773b31d41e0b7a95de31bb630f7.jpg" target="_blank"><img src="https://img. .com/image/info10/fa9a1773b31d41e0b7a95de31bb630f7.jpg" width="390" height="324" alt="9.7 JavaScript - _ 5 " style="border:1px solid black;"></a>
</div>
</div>
<div class="image-caption">
QQ 20170821163250.png
</div>
</div>
<h3> </h3>
<p> ， 。 ？</p>
<ul>
<li> </li>
<li> </li>
</ul>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="input">
<input type="button" value=" ">
<ul id="list">
<li>111</li>
<li>222</li>
<li>333</li>
<li>333</li>
</ul>
<script>
var ul = document.getElementById('list');
var lis = ul.getElementsByTagName('li');
var text = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('input')[1];
btn.onclick = function () {
ul.appendChild(addElem('abc'));
text.value = '';
}
ul.onmouseover = function (event) {
var target = (setTarget(event));
if (isElem(target, 'li')) {
target.style.background = 'red';
}
}
ul.onmouseout = function (event) {
var target = (setTarget(event))
if (isElem(target, 'li')) {
target.style.background = '';
}
}
function setTarget(event) {
var event = event || window.event;
var target = event.target || event.srcElement;
return target;
}
function isElem(target, elem) {
return target.nodeName.toLowerCase() == elem;
}
function addElem(str) {
var li = document.createElement('li');
li.innerHTML = text.value;
return li;
}