JavaScript の Event イベントの簡単な分析-jsチュートリアル-php.cn

JavaScript の Event イベントの簡単な分析

黄舟

リリース： 2016-12-13 16:09:54

オリジナル

1292 人が閲覧しました

1. フォーカス: 要素にフォーカスがある場合、ユーザー入力を受け入れることができます (すべての要素がフォーカスを受け入れることができるわけではありません)

要素にフォーカスを設定する方法:

1. クリック

2. tab

3. js

2. (例: 入力ボックスのプロンプトテキスト)

onfocus: 要素がフォーカスを取得したときにトリガーされます:

element.onfocus = function(){};

ログイン後にコピー

onblur: 要素がフォーカスを失ったときにトリガーされます:

element.onblur = function(){};

ログイン後にコピー

obj.focus() フォーカスを指定されたものに設定します。 element

obj.blur() 指定された要素のフォーカスを解除します

Obj.select() 指定された要素内のテキストコンテンツを選択します

3. (例: マウスでボックスが移動します)

イベント: イベントオブジェクト。

イベントが発生すると、このオブジェクトで現在発生しているイベントに関連するすべての情報が、指定された場所、つまり必要なときに呼び出すことができるイベントオブジェクトに一時的に保存されます。飛行機のブラックボックスのようなものです。

コンテンツを持つには、イベントオブジェクトをオブジェクトのイベント呼び出し関数で使用する必要があります。

イベント関数: イベントによって呼び出される関数。関数が定義された時点ではなく、呼び出された時点で決定されます。

element.onclick = fn1;

ログイン後にコピー

IE/Chromeブラウザと互換性があります。組み込みのグローバルオブジェクト (直接使用可能)

function fn1(){ 　　
alert(event);  
}

ログイン後にコピー

標準では: イベントオブジェクトはイベント関数の最初のパラメーターを通じて渡されます

function fn1(ev){ 　　　　
alert(ev);  
}

ログイン後にコピー

互換性のある記述:

function fn1(ev){ 　　　　
var ev = ev || event;  
}

ログイン後にコピー

clientX[Y]: イベント発生時発生、マウスがページに移動視覚領域の距離

5. イベントフロー (例:模倣選択コントロール)

● イベントバブリング: 要素がイベントを受け取ると、受け取ったイベントを伝播します。その親に至るまで、トップレベルのウィンドウに至るまで。

● イベントキャプチャ: 要素がイベントを受け取りたい場合、その親要素はまずイベントを受け取り、次にそれを親要素に渡します。

注: IE ではイベントキャプチャはありません。イベントバインディングには、標準のイベントバインディングの下に

6があります

● 最初のタイプ:

element.onclick = fn1;

ログイン後にコピー

注: oDiv.onclick = fn1;

oDiv.onclick = fn2;

このようにfn2はCover fn1;

● 2 番目のタイプ:

IE: obj.attachEvent (イベント名、イベント関数)

1. キャプチャなし

2. イベント名は on

3. イベント関数の実行順序: 標準》順方向、非標準 > 逆順

4. これは window を指します

element.attachEvent(onclick,fn1);

ログイン後にコピー

Standard: obj.addEventListener (イベント名、イベント関数、キャプチャするかどうか)

1. Captured

2. Event name doesn't have on

3. イベント実行順序は正順

4. イベントをトリガーしたオブジェクトを指します

element.addEventListener(click,fn1,false);

ログイン後にコピー

バインド関数

function bind(obj,evname,fn){  
if(obj.addEventListener){  
obj.addEventListener(evname,fn,false);  
}else{   
obj.attachEvent(&#39;on&#39; + evname,function(){    
fn.call(obj);   
});  
} 
}

ログイン後にコピー

イベントのバインド解除

● 第一種

RREEE

● 第二種

IE: obj.detachEvent(イベント名, イベント関数);

element.onclick = null;

ログイン後にコピー

標準: obj.removeEventListener (イベント名, イベント関数, キャプチャするかどうか);

document.detachEvent(&#39;onclick&#39;,fn1);

ログイン後にコピー

8. キーボードイベント (例: ゲストブック)

● onkeydown :キーボードのキーが押されたときトリガー

●onkeyup:キーボードのキーが離されたときにトリガー

●event.keyCode:キーボードの数字キーの値

ctrlKey、shiftKey、altKey Boolean値

イベントがトリガーされたとき、Shift| || Alt キーが押されていない場合は false を返し、それ以外の場合は true を返します

● イベントのデフォルト。動作: イベントが発生したときのブラウザのデフォルトの動作。

● デフォルトのイベントをブロックする: return false;

oncontextmenu: 右クリックメニューイベント (右クリックメニュー (コンテキストメニュー) が表示されたときにトリガーされます)。

ケース:

マウスとともに四角形が移動します:

onmouseover: マウスが要素上を移動するとトリガーされます

注: トリガーの頻度はピクセルではなく、間隔です。一定の間隔内で、マウスがどれだけ移動しても、トリガーは 1 回だけです

document.removeEventListener(&#39;click&#39;,fn1,false);

ログイン後にコピー

入力ボックスのテキストプロンプト:

<style>    
body{      
height: 2000px;     
}    
#p{      
width:100px;      
height: 100px;      
background:red;      
position: absolute;     
}    
</style>    
<body>     
<p id="p1"></p>    
</body>    
<script>     
var oDiv = document.getElementById(&#39;p1&#39;);     
document.onmouseover = function(ev){      
var ev = ev || event;      
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离      
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;      
oDIv.style.top = ev.clientX + scrollTop + &#39;px&#39;;      
oDIv.style.left = ev.clientY + &#39;px&#39;;     
}   
</script>

ログイン後にコピー

模倣選択コントロール:

<style></style>  
<body>   
<input type="text" id="text1" value="请输入内容"/>   
<input type="button" id="btn" value="全选" />  
</body>  
<script>   
var oText = document.getElementById(&#39;text1&#39;);   
var oBtn = document.getElementById(&#39;btn&#39;);   
oText.onfocus = function(){    
if(this.value == &#39;请输入内容&#39;){     
this.value = &#39;&#39;;    
}   
}   
oText.onblur = function(){    
if(this.value == &#39;&#39;){     
this.value = &#39;请输入内容&#39;;    
}   
}   
oBtn.onclick = function(){    
oText.select();   
}  
</script>

ログイン後にコピー

ゲストブック:

<style>   
#p1{     
width: 100px;     
height: 200px;     
border: 1px solid red;     
display: none;    
}   
</style>   
<body>    
<input type="button" value="按钮" id="btn" />    
<p id="p1"></p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>    
<p>ppppppppp</p>   
</body>   
<script>   
window.onload = function(){    
var oBtn = document.getElementById(&#39;btn&#39;);     
var oDiv = document.getElementById(&#39;p1&#39;);     
oBtn.onclick = function(ev){      
var ev = ev || event;      
ev.cancelBubble = true;      
oDiv.style.display = &#39;block&#39;;     
}     
document.onclick = function(){      
oDiv.style.display = &#39;none&#39;;     
}    
}   
</script>

ログイン後にコピー

カスタマイズされた右クリックメニュー:

<style></style>  
<body>   
<input type="text" id="con"/>   
<ul id="box"></ul>  
</body>  
<script>   
var oUl = document.getElementById(&#39;box&#39;);   
var oText = document.getElementById(&#39;con&#39;);       
document.onkeyup = function(ev){    
var ev = ev || even;     
if(ev.keyCode != &#39;&#39;){     
if(ev.keyCode == 13){      
var oLi = document.createElement(&#39;li&#39;);       
oLi.innerHTML = oText.value;      
if(oUl.children[0]){       
oUl.insertBefore(oLi,oUl.children[0]);     
}else{       
oUl.appendChild(oLi);     
}     
}     
}   
} 
</script>

ログイン後にコピー

キーボードcontrol p motion :

<style>   
body{  
height: 2000px;  
}  
#box{    
width: 100px;    
height: 200px;    
background: red;    
display: none;    
position: absolute;;   
}  
</style>  
<body>   
<p id="box"></p>  
</body>  
<script>   
var oBox = document.getElementById(&#39;box&#39;);   
document.oncontextmenu = function(ev){    
var ev = ev || event;    
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;    
oBox.style.display = &#39;block&#39;;    
oBox.style.top = scrollTop + ev.clientY + &#39;px&#39;;    
oBox.style.left = scrollLeft + ev.clientX + &#39;px&#39;;     
return false;   
}   
document.onclick = function(){    
oBox.style.display = &#39;none&#39;;   
}  
</script>

ログイン後にコピー

以上がこの記事の内容です。この記事の内容が皆様の学習や仕事に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。