如果需要覆蓋系統(tǒng)綁定的事件蜕依，只要在函數(shù)的最后寫上 return false 即可
點擊事件
- onclick
let oA = document.querySelector("a");
oA.onclick = function (){
alert("我先執(zhí)行");
//return false ; //會覆蓋系統(tǒng)綁定的事件
}
鍵盤按下事件
- onkeydown
let oA = document.querySelector("a");
oA.onkeydown = function (event){
console.log(event.key); //獲取按下的鍵位
console.log(event.charCode); //獲取按下的鍵位的keycode 碼
}
移入移出事件
- 移入事件 onmouseenter onmouseover
- 移出事件 onmouseout onmouseleave
- 移動事件 onmousemove
let oDiv = document.querySelector("div");
/* oDiv.onmouseover = function () { //移入事件
console.log(666);
}*/
/* oDiv.onmouseenter = function () { //移入事件 初學者為了避免未知bug 建議使用這種方式
console.log(666);
}*/
/*oDiv.onmouseout = function () { //移出事件
console.log(666);
}*/
/* oDiv.onmouseleave = function () { //移出事件 初學者為了避免未知bug 建議使用這種方式
console.log(666);
}*/
oDiv.onmousemove = function () { //移動事件
console.log(666);
}
表單
如果要獲取input中的內容 不能使用 innerHTML innerText innerContent
只能通過value屬性來獲取input中的內容
let oInput = document.querySelector("input"); // 拿到input標簽
oInput.onmouseleave = function(){ //鼠標離開
console.log(oInput.value);//獲取input中的內容
}
焦點事件
let oInput = document.querySelector("input"); // 拿到input標簽
/*oInput.onfocus = function() { //監(jiān)聽焦點事件
console.log("獲得了焦點")
} *\
/*oInput.onblur = function() { //監(jiān)聽焦點事件
console.log("失去了焦點")
}*/
// 注意點: onchange事件只有表單失去焦點的時候, 才能拿到修改之后的數(shù)據(jù)
/* oInput.onchange = function () {
console.log(this.value);
}*/
oInput.oninput = function () { //可以實時獲取用戶輸入的數(shù)據(jù)
console.log(this.value);
}
//注意點： 通過代碼給input設置的數(shù)據(jù)不會觸發(fā)oninput事件
