淺析javascript中的Event事件
- 黄舟原創
- 2016-12-13 16:09:541221瀏覽
1、焦點：當一個元素有焦點的時候，那麼他就可以接受使用者的輸入(不是所有元素都能接受焦點)
給元素設定焦點的方式：
1、點擊
2、tab🎀2、tab
3、js
2、（例子：輸入框提示文字）
onfocus:當元素獲取焦點時觸發：
element.onfocus = function(){};onblur:當元素焦點失去時觸發：ob為指定的元素設定焦點
obj.blur() 取消指定元素的焦點
obj.select()選擇指定元素裡面的文字內容
3、例子：方塊隨著滑鼠移動）（例如方塊event: 事件物件。
當一個事件發生時，和當前這個對象發生的事件所有有關的信息都會臨時保存在一個指定的地方-event對象，供我們需要時調用。就像是飛機的黑盒子。
事件物件必須在一個物件的事件呼叫函數中使用才有內容。
事件函數：事件呼叫的函數，一個函數是不是事件函數，不在定義時決定而是在呼叫的時候決定
4、相容element.onblur = function(){};IE/Chrome瀏覽器:event是內建的全域物件（可以直接使用）
element.onclick = fn1;
標準下：事件物件是透過事件函數的第一個參數傳入
function fn1(){
alert(event);
}相容寫法：
function fn1(ev){
alert(ev);
}clientX[Y]:當一個事件發生的時候，滑鼠到頁面可視區的距離
5、事件流（例子：仿select控制）
● 事件冒泡：當一個元素接受到事件的時候，會把他接受到的事件傳播給他的父級，一直到頂層window。
● 事件捕獲:一個元素要想接受到事件，它的父元素會先接受到該事件，然後再傳給它。
注意：在ie下是沒有的事件捕獲的。在事件綁定中，標準下有
6、事件綁定
● 第一種：
function fn1(ev){
var ev = ev || event;
}注意：oDiv.onclick = fn1; 這樣fn2會涵蓋fn1;
● 第二種：
IE:obj.attachEvent(事件名稱，事件函數)
3、事件函數的執行順序：標準》正序非標準》倒序
4、this指向window
element.onclick = fn1;
標準：obj.addEventListener(事件名稱，事件函數，是否捕獲)
〜 〜〜〜〜〼
3、事件的執行順序是正序 4、this指向觸發該事件的物件element.attachEvent(onclick,fn1);bind函數
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);
});
}
}事件取消綁定
名稱，事件函數);
element.onclick = null;
標準：obj.removeEventListener(事件名稱，事件函數，是否捕獲);
document.detachEvent('onclick',fn1);
8、鍵盤事件(範例：留言簿)
●● onkeydown : 當鍵盤按鍵按下的時候觸發
● onkeyup : 當鍵盤按鍵抬起的時候觸發
● event.keyCode : 數字類型鍵盤按鍵的值鍵值
ctrlKey，shiftKeyKeyKeya 當一個布林值
ctrlKey，shiftKeyKeyKeyik | ctrl || alt鍵沒有按下，則回傳false，否則回傳true;9、預設事件(範例：自訂右鍵選單、鍵盤控制p運動) ● 事件預設行為: 當一個事件發生的時候瀏覽器預設會做的事。 ● 封鎖預設事件：return false; oncontextmenu : 右鍵選單事件，當右鍵選單（環境選單）顯示出來的時候觸發。 案例：方塊隨著滑鼠移動：onmouseover:當滑鼠在一個元素上移動時觸發注意：觸發的頻率不是像素，而是間隔時間。在一個間隔時間內不論滑鼠移動了多遠只觸發一次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>仿select控制：<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>以上就是本文的全部內容，希望本文的內容對大家的學習或工作能帶來一定的幫助，更多相關內容請關注PHP中文網！