焦點事件
PS:注意不是所有元素都能接收到焦點膜毁,能夠響應(yīng)用戶操作的元素才有焦點(例如輸入框,鏈接a,表單元素)
- 獲取焦點事件onfocus \失去焦點事件onblur(如:提示文字)
- obj.focus();給指定的元素設(shè)置焦點
- obj.blur(); 取消指定元素的焦點
- obj.select();指定的元素里面的文本內(nèi)容
<input type="text" id="text1" value="請輸入內(nèi)容">
<input type="button" value = "全選" id="btn">
var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
//onfocus:當(dāng)元素獲取到焦點的時候觸發(fā)
oText.onfocus = function(){
if(value='請輸入內(nèi)容'){
this.value = '';
}
}
//onblur:當(dāng)元素失去焦點的時候觸發(fā)
oText.onblur = function(){
if(this.value == ''){
this.value = '請輸入內(nèi)容';
}
}
oText.focus();
oBtn.onclick = function(){
oText.select();
}
Event對象
- 用來獲取事件的詳細(xì)信息:鼠標(biāo)位置,鍵盤按鍵
- Event對象下的兼容ev =ev 或者window.event
- Event對象下獲取鼠標(biāo)位置clientX,clientY(例如方塊隨鼠標(biāo)移動)
event事件對象愿险。當(dāng)一個事件發(fā)生的時候笛丙,和這個當(dāng)前這個對象發(fā)生的這個事件有關(guān)的一些詳細(xì)的信息都會臨時保存到一個指定的地方漾脂。這個地方就是event對象。(比如飛機(jī)的黑匣子) - Event對象必須在一個事件調(diào)用的函數(shù)里面使用才有內(nèi)容
- 事件函數(shù):事件調(diào)用的函數(shù)胚鸯。一個函數(shù)不是事件函數(shù)骨稿,不是定義的時候決定,而是取決于這個函數(shù)被調(diào)用的時候.
比如:
function fn1(e)
{
console.log(e);
}
fn1(e); //不是事件調(diào)用的函數(shù),因此這時候e沒有內(nèi)容,直接報錯誤
document.onclick = fn1;
循環(huán)出來屬性和值
function click(e){
for(var i in e)
{
console.log(e[i]);
}
}
document.onclick = click;
clientX\clientY
當(dāng)一個事件發(fā)生的時候姜钳,鼠標(biāo)到頁面可視區(qū)的距離
function fn1(e)
{
alert(e.clientX);
}
document.onclick = fn1; //彈出當(dāng)前鼠標(biāo)到可視區(qū)左邊的距離
一個小例子DIV跟隨鼠標(biāo)移動
var a = document.getElementsByClassName("box")[0];
document.onmousemove = function(e){
var scrollTop = document.body.scrollTop|| document.documentElement.scrollTop;
a.style["left"] = (e.clientX-50)+"px";//50是DIV一半的寬度坦冠,這樣鼠標(biāo)在DIV的中心
a.style["top"] = (e.clientY-25+scrollTop)+"px";
}