ホームページ > 記事 > ウェブフロントエンド > JavaScript の Event イベントの簡単な分析
JavaScript の Event イベントの簡単な分析
- 黄舟オリジナル
- 2016-12-13 16:09:541221ブラウズ
1. フォーカス: 要素にフォーカスがある場合、ユーザー入力を受け入れることができます (すべての要素がフォーカスを受け入れることができるわけではありません)
要素にフォーカスを設定する方法:
1. クリック
2. tab
3. js
2. (例: 入力ボックスのプロンプトテキスト)
onfocus: 要素がフォーカスを取得したときにトリガーされます:
element.onfocus = function(){};onblur: 要素がフォーカスを失ったときにトリガーされます:
element.onblur = function(){};obj.focus() フォーカスを指定されたものに設定します。 element
obj.blur() 指定された要素のフォーカスを解除します
Obj.select() 指定された要素内のテキストコンテンツを選択します
3. (例: マウスでボックスが移動します)
イベント: イベントオブジェクト。
イベントが発生すると、このオブジェクトで現在発生しているイベントに関連するすべての情報が、指定された場所、つまり必要なときに呼び出すことができるイベント オブジェクトに一時的に保存されます。飛行機のブラックボックスのようなものです。
コンテンツを持つには、イベントオブジェクトをオブジェクトのイベント呼び出し関数で使用する必要があります。
イベント関数: イベントによって呼び出される関数。関数が定義された時点ではなく、呼び出された時点で決定されます。
4.
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('on' + evname,function(){
fn.call(obj);
});
}
}イベントのバインド解除
● 第一種
RREEE● 第二種
IE: obj.detachEvent(イベント名, イベント関数);
element.onclick = null;
標準: obj.removeEventListener (イベント名, イベント関数, キャプチャするかどうか);
document.detachEvent('onclick',fn1);
8. キーボードイベント (例: ゲストブック)
● onkeydown :キーボードのキーが押されたとき トリガー
●onkeyup:キーボードのキーが離されたときにトリガー
●event.keyCode:キーボードの数字キーの値
ctrlKey、shiftKey、altKey Boolean値
イベントがトリガーされたとき、Shift| || Alt キーが押されていない場合は false を返し、それ以外の場合は true を返します
● イベントのデフォルト。動作: イベントが発生したときのブラウザのデフォルトの動作。
● デフォルトのイベントをブロックする: return false;
oncontextmenu: 右クリック メニュー イベント (右クリック メニュー (コンテキスト メニュー) が表示されたときにトリガーされます)。
ケース:
マウスとともに四角形が移動します:
onmouseover: マウスが要素上を移動するとトリガーされます
注: トリガーの頻度はピクセルではなく、間隔です。一定の間隔内で、マウスがどれだけ移動しても、トリガーは 1 回だけです
document.removeEventListener('click',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('p1');
document.onmouseover = function(ev){
var ev = ev || event;
// 如果当滚动条滚动了（页面的头部部分隐藏了），方块是以页面定位的，而鼠标是以可视区定位的，这样就会产生bug。所以我们要加上滚动条滚动的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDIv.style.top = ev.clientX + scrollTop + 'px';
oDIv.style.left = ev.clientY + 'px';
}
</script>模倣選択コントロール:
<style></style>
<body>
<input type="text" id="text1" value="请输入内容"/>
<input type="button" id="btn" value="全选" />
</body>
<script>
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
oText.onfocus = function(){
if(this.value == '请输入内容'){
this.value = '';
}
}
oText.onblur = function(){
if(this.value == ''){
this.value = '请输入内容';
}
}
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('btn');
var oDiv = document.getElementById('p1');
oBtn.onclick = function(ev){
var ev = ev || event;
ev.cancelBubble = true;
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
}
</script>カスタマイズされた右クリック メニュー:
<style></style>
<body>
<input type="text" id="con"/>
<ul id="box"></ul>
</body>
<script>
var oUl = document.getElementById('box');
var oText = document.getElementById('con');
document.onkeyup = function(ev){
var ev = ev || even;
if(ev.keyCode != ''){
if(ev.keyCode == 13){
var oLi = document.createElement('li');
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('box');
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 = 'block';
oBox.style.top = scrollTop + ev.clientY + 'px';
oBox.style.left = scrollLeft + ev.clientX + 'px';
return false;
}
document.onclick = function(){
oBox.style.display = 'none';
}
</script>以上がこの記事の内容です。この記事の内容が皆様の学習や仕事に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。