js標準イベントモデル、イベント登録のいくつかの方法とその違い、イベント委託メカニズム
45367 ワード
js標準イベントモデル、イベント登録のいくつかの方法とその違い、イベント委託メカニズム
一、イベント登録
<button onclick = 'change()'></button>
<script>
function change(){
alert(' ');
}
</script>
<button></button>
<script>
let btn = document.querySelector('button');
btn.onclick = function(){
alert(' 1');
}
btn.onclick = function(){
alert(' 2');
}
</script>
注意:
2、新しい方法
<button></button>
<script type="text/javascript">
let btn = document.querySelector('button');
function change(){
alert( );
}
btn.addEventListener('click',change,false);
btn.removeEventListener('click',change,false);
</script>
IE 6-8の場合、attachEvent()およびdetachEvent()を使用してリスニングイベントを追加し、リスニングイベントを削除します.
3、違い
二、標準イベントモデル
イベント処理関数のthis:単純なイベントモデルでは、thisは現在のイベントオブジェクトを表し、Eventオブジェクトのsrc Event(IE)またはtarget(標準オブジェクトモデル)が表す意味と同じです.
1、標準イベントモデル(IE 8後)
js標準イベントモデルはIE 8以降のブラウザに適用され、3つの部分に分かれています.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 100px;
height: 100px;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script type="text/javascript">
let box = document.querySelector('.box');
let son = document.querySelector('.son');
box.addEventListener('click',function(){
console.log('father');
},true);
son.addEventListener('click',function(){
console.log('son');
},true)
// son ：father son
// father ：father
// , document
// ,
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 100px;
height: 100px;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script type="text/javascript">
let box = document.querySelector('.box');
let son = document.querySelector('.son');
box.addEventListener('click',function(){
console.log('father');
});
son.addEventListener('click',function(){
console.log('son');
})
// son ： son father
// father ：father
// , ，
</script>
</body>
</html>
2、デフォルト動作の発生を阻止する
(1)泡立ち止め
e.stopPropagation():eは、登録時にイベント処理関数に送信されるイベント、例えば、上記のバブルフェーズの例であり、以下の変更を行うことができる.
box.addEventListener('click',function(e){
console.log('father');
});
son.addEventListener('click',function(e){
console.log('son');
e.stopPropagation();
})
// son son ，son
3、標準イベントモデルでよく使われるイベントタイプ(従来のイベントモードに対して標準イベントモデルのイベントタイプの前に‘on’を付ける)
(1)常用マウスイベント
≪イベント｜Events｜ldap≫
説明
mouseover
マウスの移動
mouseout
マウスの移動
mouseenter
要素にマウスを移動
mouseleave
要素の外側にマウスを移動
mousemove
マウスの移動
click
クリック
doubleclick
ダブルクリック
mousedown
マウスを押して離さない
mouseup
マウスを離す
例1:マウスを押して画像を切り替える:
<img src="img/10.jpg"/>
<script type="text/javascript">
let img = document.querySelector('img');
img.addEventListener('mousedown',function(e){
img.src = "img/11.jpg";
})
img.addEventListener('mouseup',function(e){
img.src = "img/13.jpg";
})
</script>
例2:マウス移動クリアタイマー:
<div id=""></div>
<script type="text/javascript">
let div = document.querySelector('div');
let count = 0;
let timer = null;
function auto(){
timer = setInterval(function(){
console.log(count += 1);
},2000);
}
auto();
div.addEventListener('mouseenter',function(e){
clearInterval(timer);
})
div.addEventListener('mouseout',function(e){
clearInterval(timer);
auto();
})
</script>
注意:マウスが移動するターゲットにサブエレメントがある場合は、次の例のようにmouseenterとmouseleaveを使用することが望ましい.サブエレメントがない場合はmouseoverとmouseoutを使用することができる.
//father , onmouseover , , onmouseenter
// onmouseover
document.getElementsByClassName('father')[0].onmouseover = function(){
console.log('over');
}
document.getElementsByClassName('father')[0].onmouseenter = function(){
console.log('enter');
}
(2)共通キーボードイベント
≪イベント｜Events｜ldap≫
説明
keyup
キーを離す
keydown
キーを押す
keypress
中ボタンを押す
ボタンを押す順番は以下の通りです:down/press/up、ずっと押すとdown/pressが実行されます
document.addEventListener('keyup',function(e){
console.log('up');
});
document.addEventListener('keypress',function(e){
console.log('press');
});
document.addEventListener('keydown',function(e){
console.log('down');
});
たとえば、sキー入力ボックスを押すと自動的にフォーカスします.
<input type="text"/>
<script type="text/javascript">
//
document.addEventListener('keyup',function(e){
// s
if(e.keyCode === 83){
let input = document.getElementsByTagName('input')[0];
input.focus();//
}
},true);
</script>
(3)その他のイベント
≪イベント｜Events｜ldap≫
説明
focus
フォーカスの取得
blur
焦点を失う
input
入力イベント
change
ドメインの内容が変更されました
submit
フォーム送信イベント
**注:**blurを使用する前にfocusを使用するのが一般的です
例1:入力ボックスでフォーカスを取得して内容を入力すると、pタグで入力ボックスの内容が表示される
<div class="box">
<p>show</p>
<input type="text"/>
</div>
<script type="text/javascript">
let p = document.querySelector('p');
let input = document.querySelector('input');
input.addEventListener('keyup',function(e){
p.innerHTML = input.value;
p.style.display = 'block';
});
input.addEventListener('focus',function(e){
if(input.value == ''){
p.style.display = 'none';
}else{
p.style.display = 'block';
}
});
input.addEventListener('blur',function(e){
p.style.display = 'none';
});
注意:
三、事件依頼
イベント依頼とは、イベントバブルの原理を利用して、イベントターゲットを設定する親ノードに直接サブノードに設定せずにイベントを設定することであり、イベントをクリックする例として、子ノードをクリックすると親ノードにバブルが発生し、間接的に設定するイベントが実行され、親ノードに多くの子ノードがある場合、将来的に効率が向上し、親ノードにイベントを設定するだけでよい.
例:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
let ul = document.querySelector('ul');
ul.addEventListener('click',function(){
console.log('ul-li');
});
</script>
いずれかのli要素をクリックすると、「ul-li」が出力され、liをクリックすると、クリックイベントはliからulに泡が立ち、ulにイベントリスニングが設定され、親要素のクリックイベントが実行され、日常開発では、このメカニズムを利用して、イベントのバインドを減らし、ページ効率を高めることができる.
イベント反映関数にパラメータeventを入力すると、e.targetを使用して現在のクリック要素を取得できます.
ul.addEventListener('click',function(e){
console.log('ul-li');
console.log(e.target);
});