淺析javascript中的Event事件
1、焦點：當一個元素有焦點的時候，那么他就可以接受用戶的輸入(不是所有元素都能接受焦點)
給元素設置焦點的方式：
1、點擊
2、tab
3、js
2、（例子：輸入框提示文字）
onfocus:當元素獲取焦點時觸發(fā)：
element.onfocus = function(){};
onblur:當元素失去焦點時觸發(fā)：
element.onblur = function(){};
obj.focus() 給指定的元素設置焦點
obj.blur() 取消指定元素的焦點
obj.select()選擇指定元素里面的文本內容
3、（例子：方塊隨著鼠標移動）
event: 事件對象。
當一個事件發(fā)生時，和當前這個對象發(fā)生的事件所有有關的信息都會臨時保存在一個指定的地方-event對象，供我們需要時調用。就像是飛機的黑匣子。
事件對象必須在一個對象的事件調用函數(shù)中使用才有內容。
事件函數(shù)：事件調用的函數(shù)，一個函數(shù)是不是事件函數(shù)，不在定義時決定而是在調用的時候決定
4、兼容
element.onclick = fn1;
IE/Chrome瀏覽器:event是一個內置的全局對象（可以直接使用）
function fn1(){
alert(event);
}
標準下：事件對象是通過事件函數(shù)的第一個參數(shù)傳入
function fn1(ev){
alert(ev);
}
兼容寫法：
function fn1(ev){
var ev = ev || event;
}
clientX[Y]:當一個事件發(fā)生的時候，鼠標到頁面可視區(qū)的距離
5、事件流（例子：仿select控件）
● 事件冒泡：當一個元素接受到事件的時候，會把他接受到的事件傳播給他的父級，一直到頂層window。
● 事件捕獲:一個元素要想接受到事件，它的父元素會首先接受到該事件，然后再傳給它。
注意：在ie下是沒有的事件捕獲的。在事件綁定中，標準下有
6、事件綁定
● 第一種：
element.onclick = fn1;
注意：oDiv.onclick = fn1;
oDiv.onclick = fn2;
這樣fn2會覆蓋fn1;
● 第二種：
IE:obj.attachEvent(事件名稱，事件函數(shù))
1、沒有捕獲
2、事件名稱有on
3、事件函數(shù)的執(zhí)行順序：標準》正序 非標準》倒序
4、this指向window
element.attachEvent(onclick,fn1);
標準：obj.addEventListener(事件名稱，事件函數(shù)，是否捕獲)
1、有捕獲
2、事件名稱沒有on
3、事件的執(zhí)行順序是正序
4、this指向觸發(fā)該事件的對象
element.addEventListener(click,fn1,false);
bind函數(shù)
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;
● 第二種
IE:obj.detachEvent(事件名稱，事件函數(shù));
document.detachEvent('onclick',fn1);
標準：obj.removeEventListener(事件名稱，事件函數(shù)，是否捕獲)；
document.removeEventListener('click',fn1,false);
8、鍵盤事件(例子：留言本)
● onkeydown : 當鍵盤按鍵按下的時候觸發(fā)
● onkeyup : 當鍵盤按鍵抬起的時候觸發(fā)
● event.keyCode : 數(shù)字類型 鍵盤按鍵的值 鍵值
ctrlKey，shiftKey，altKey布爾值
當一個事件觸發(fā)的時候，如果shift || ctrl || alt鍵沒有按下，則返回false，否則返回true;
9、默認事件(例子：自定義右鍵菜單、鍵盤控制div運動)
● 事件默認行為 : 當一個事件發(fā)生的時候瀏覽器默認會做的事。
● 阻止默認事件：return false;
oncontextmenu : 右鍵菜單事件，當右鍵菜單（環(huán)境菜單）顯示出來的時候觸發(fā)。
案例：
方塊隨著鼠標移動：
onmouseover:當鼠標在一個元素上移動時觸發(fā)
注意：觸發(fā)的頻率不是像素，而是間隔時間。在一個間隔時間內不論鼠標移動了多遠只觸發(fā)一次
<style>
body{
height: 2000px;
}
#div{
width:100px;
height: 100px;
background:red;
position: absolute;
}
</style>
<body>
<div id="div1"></div>
</body>
<script>
var oDiv = document.getElementById('div1');
document.onmouseover = function(ev){
var ev = ev || event;
// 如果當滾動條滾動了（頁面的頭部部分隱藏了），方塊是以頁面定位的，而鼠標是以可視區(qū)定位的，這樣就會產生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>
仿select控件：
<style>
#div1{
width: 100px;
height: 200px;
border: 1px solid red;
display: none;
}
</style>
<body>
<input type="button" value="按鈕" id="btn" />
<div id="div1"></div>
<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('div1');
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>
自定義右鍵菜單:
<style>
body{
height: 2000px;
}
#box{
width: 100px;
height: 200px;
background: red;
display: none;
position: absolute;;
}
</style>
<body>
<div id="box"></div>
</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>
鍵盤控制div運動:
<style>
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<body>
<div id="box"></div>
</body>
<script>
var oBox = document.getElementById('box');
var timer = null;
var oLeft = false;
var oTop = false;
var oRight = false;
var oBottom = false;
// 運動一直就緒，等待按鍵操作
timer = setInterval(function(){
if(oLeft){
oBox.style.left = oBox.offsetLeft - 10 + 'px';
}else if(oTop){
oBox.style.top = oBox.offsetTop - 10 + 'px';
}else if(oRight){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}else if(oBottom){
oBox.style.top = oBox.offsetTop + 10 + 'px';
}
// 防止溢出
limit();
},10);
// 按鍵按下，開始運動
document.onkeydown = function(ev){
var ev = ev || even;
switch (ev.keyCode){
case 37:
oLeft = true;
break;
case 38:
oTop = true;
break;
case 39:
oRight = true;
break;
case 40:
oBottom = true;
break;
}
}
// 按鍵抬起，停止運動
document.onkeyup = function(ev){
var ev = ev || even;
switch (ev.keyCode){
case 37:
oLeft = false;
break;
case 38:
oTop = false;
break;
case 39:
oRight = false;
break;
case 40:
oBottom = false;
break;
}
}
function limit(){
// 控制左邊
if(oBox.offsetLeft <= 0){
oBox.style.left = 0;
}
// 控制上邊
if(oBox.offsetTop <= 0){
oBox.style.top = 0;
}
// 控制右邊
if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){
oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px';
}
// 控制下邊
if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px';
}
}
</script>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
- JavaScript event對象整理及詳細介紹
- javascript中的altKey 和 Event屬性大全
- Nodejs實戰(zhàn)心得之eventproxy模塊控制并發(fā)
- JavaScript對HTML DOM使用EventListener進行操作
- JavaScript使用addEventListener添加事件監(jiān)聽用法實例
- JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解
- javascript中attachEvent用法實例分析
- Node.js事件循環(huán)（Event Loop）和線程池詳解
- node.js中的events.emitter.once方法使用說明
相關文章
Javascript中toFixed計算錯誤(依賴銀行家舍入法的缺陷)解決方法
這篇文章主要介紹了Javascript中toFixed計算錯誤(依賴銀行家舍入法的缺陷)解決方法，非常具有實用價值，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了es6中l(wèi)et和const的使用方法,結合實例形式詳細分析了es6中l(wèi)et和const的基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
現(xiàn)在全屏的半透明遮罩層在web2.0網站應用非常廣泛了，絕大多數(shù)遮罩是通過計算頁面大小，然后覆蓋一個與頁面同等大小的層實現(xiàn)，如騰訊qzone, wordpress后臺。2010-06-06
隱性類型轉換，是==引起的轉換，下面通過本文給大家分享JavaScript 隱性類型轉換步驟，感興趣的朋友一起看看吧2018-03-03
微信小程序websocket聊天室的實現(xiàn)示例代碼
這篇文章主要介紹了微信小程序websocket聊天室的實現(xiàn)示例代碼，小程序本身對http、websocket等連接均有諸多限制，所以這次項目選擇了node.js自帶的ws模塊。感興趣的可以參考一下2019-02-02
今天小編就為大家分享一篇layui prompt 設置允許空白提交的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS實現(xiàn)點擊發(fā)送驗證碼 xx秒后重新發(fā)送功能
在一些注冊類的網站，經常遇到這樣的需求，點擊發(fā)送驗證碼，xx秒后重新發(fā)送，這樣的功能怎么實現(xiàn)呢，接下來通過本文給大家分享js點擊發(fā)送驗證碼 xx秒后重新發(fā)送功能，需要的朋友參考下吧2019-07-07
JS多個表單數(shù)據(jù)提交下的serialize()應用實例分析
這篇文章主要介紹了JS多個表單數(shù)據(jù)提交下的serialize()應用,接合實例形式分析了原生javascript實現(xiàn)多個表單提交時serialize操作相關使用技巧與操作注意事項,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了最簡單的JS實現(xiàn)json轉csv的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
基于微信小程序實現(xiàn)人臉數(shù)量檢測的開發(fā)步驟
最近項目需求是統(tǒng)計當前攝像頭中的人臉個數(shù),所以下面這篇文章主要給大家介紹了關于基于微信小程序實現(xiàn)人臉數(shù)量檢測的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12