JavaScript事件

如果需要覆盖系统绑定的事件，只要在函数的最后写上 return false 即可

点击事件

• onclick

let oA = document.querySelector("a");
oA.onclick = function (){
             alert("我先执行");
             //return false ;  //会覆盖系统绑定的事件
 }

键盘按下事件

• 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() { //监听焦点事件
    console.log("获得了焦点")
} *\
/*oInput.onblur = function() { //监听焦点事件
    console.log("失去了焦点")
}*/
// 注意点: onchange事件只有表单失去焦点的时候, 才能拿到修改之后的数据
    /* oInput.onchange = function () {
        console.log(this.value);
   }*/
  oInput.oninput = function ()  { //可以实时获取用户输入的数据
        console.log(this.value);
   }
//注意点： 通过代码给input设置的数据不会触发oninput事件