Javascript的常见的事件类型

先说明几个概念：

事件：可以触发浏览器的行为。

事件流：从浏览器页面中接收事件的顺序。

事件冒泡：事件开始时由最具体的元素，（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点，知道document对象。

eg：

 

 事件捕获：事件捕获的思想是不太具体的点应该更早的接收的事件，而最具体的点应该最后接受到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它。eg：

焦点事件：

1.失去焦点事件 onblur （不会冒泡）

window.onblur=function () {
    console.log("窗口失去了焦点！");
}
//当鼠标移出当前窗口，将触发事件输出 窗口失去了焦点！

2.获得焦点事件 focus 不会冒泡

// 2.当窗口获得焦点

window.onfocus=function () {
    console.log("窗口获得了焦点")
}
//触发事件，控制台将会输出 窗口获得了焦点

进度事件:

加载完成事件： onload 

// 3.窗口加载完成后
window.onload=function () {
    console.log("窗口加载完成！");
}
//加载完成 控制台输出 窗口加载完成

窗口大小改变：  onresize

// 4.窗口大小加载完成后
window.onresize=function () {
    console.log("窗口大小发生改变");
}

//当浏览器窗口发生改变触发事件  控制台输出 窗口大小发生改变

存储事件：

内容改变事件 onchange

// onchange内容改变事件
usercode.onchange=function () {
    console.log(usercode.value);
}
//当内容发生改变时(脱离本文框)，触发事件 控制台输出 

值变化事件：

 输出的值发生改变 oninput

// oninput 当文本框内容改变时，立即将改变的内容 输出在控制台

usercode.oninput=function () {
    console.log(usercode.value);
}

只要值发生改变，就触发事件

表单事件：

表单提交事件 submit

点击提交按钮

表单重置事件 rese

点击重置按钮时

获取表单 未能提交事件 oninvalid

// 获取表单 未能提交时

usercode.oninvalid=function () {
    console.log("请您完成表单的内容");
}

鼠标事件：

当文本框内容被选中时  onselect

/* 当文本框内容被选中时 */
usercode.onselect=function () {
    console.log("您已选择文本框")
}
鼠标选择文本框里面的内容时，触发该事件

单击事件 onclick

//单击事件
butA.onclick=function () {
    document.getElementById("userCode").value = '';
    document.getElementById("userPwd").value = '';
}
//单击左键时触发该事件 一般需要绑定元素

双击事件 ondblclick

  //双击事件
    window.ondblclick=function () {
        console.log('鼠标双击事件');
    }
//鼠标左键双击时，触发该事件

按下事件 onmousedown

//鼠标按下事件     类似单击
    window.onmousedown=function () {
        console.log('鼠标按下时运行');
    }
//	在用户按下了任意鼠标按钮时触发。

释放事件 onmouseup

//鼠标按钮运行事件  类似单击
    window.onmouseup=function () {
        console.log('当鼠标按钮运行时');
 
   }
//释放鼠标按钮时触发。

鼠标移入事件 onmouseover 不能阻止冒泡

 //当鼠标移入事件 onmouseover  不能阻止冒泡
    function divMouseover() {
        console.log('当鼠标进入了当前的div');
    }
//在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。

  onmouseenter 可以阻止事件冒泡

  //onmouseenter 可以阻止事件冒泡
    function divMouseenter() {
        console.log('当鼠标进入了当前的DIV');
    }
//鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。

鼠标移出事件 onmouseout 不能阻止冒泡

 //当鼠标移出事件 onmouseout  不能阻止冒泡
    function divMouseout() {
        console.log('当鼠标移入了当前的DIV');
    }
//在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。

onmouseleave 可以阻止事件冒泡

 //onmouseleave 可以阻止事件冒泡
    function divMouselave() {
        console.log('当鼠标移出了当前的DIV');
    }
//在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。

鼠标移动事件 mousemove

当鼠标指针在元素内部移动时重复地触发。

滚动条事件  onscroll

 document.getElementById('box').onscroll=function () {
        console.log('当滚轮元素的滚动条运行时');
    }
//滚动条运行时触发 

滚轮事件 onmousewheel

 window.onmousewheel=function () {
        console.log('当鼠标的滚轮运行时');
    }
//当鼠标的滚轮运行时,触发该事件

键盘事件：

按下事件 onkeydown

    //按下事件
window.onkeydown=function (event) {
    event=event||window.event;
    console.log("键盘按下了"+event.keyCode);
}
//当用户按下键盘上的任意时触发，而且如果按住不放的话，会重复触发此事件

弹起事件 onkeyup

  //按下松开时触发
window.onkeyup=function (event) {
    event=event||window.event;
    console.log("键盘松开了"+event.keyCode);
}
//释放键盘上的键时触发

按下弹起事件  onkeypress

//按下并松开时
    window.onkeypress=function (event) {
        event=event||window.event;
        console.log("按下松开了"+event.key);
    }
//当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件； 弹起时会触发一次