DOM事件

Posted 2020-10-03 ★【金字塔】☆

一、鼠标事件

onclick 　　　　　　　　　　　 鼠标单击

ondblclick 　　　　　　　　　　鼠标双击

onmousedown 　　　　　　　   鼠标按下

onmouseup 　　　　　　　　　鼠标抬起

onmouseover 　　　　　　　　 鼠标悬浮

onmouseout 　　　　　　　　   鼠标离开

onmousemove　　　　　　　　 鼠标移动

onmouseenter 　　　　　　　　鼠标进入

onmouseleave 　　　　　　　　鼠标离开

二、键盘事件

1、keydown()

keydown 事件会在键盘按下时触发。

2、keypress()

keypress 事件会在敲击按键时触发，我们可以理解为按下并抬起同一个按键。

3、keyup()

keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件。

4、keycode：获得键盘上对应的 ascII 码

　　a、区分IE浏览器和W3C标准浏览器

document.onkeydown = function (event) {
　　　　if (window.event){
　　　　console.log("我是IE、或者chrome")；
　　　　console.log(event.keyCode); /!*IE chrome*!/
　　　　}else{
　　　　console.log("我是除chrome的W3C")；
　　　　console.log(event.which); /!*W3C*!/
　　　　}
　　　　};

　　b、不区分大小写

　document.onkeydown = function (event) {
　　　　console.log(event.keyCode);
　　　　};

　　c、区分大小写

document.onkeypress = function (event) {
　　　　console.log(event.keyCode);
　　　　};

三、html事件

onload 　　　　　　    页面结束加载之后触发。

onunload 　　　　　　一旦页面已下载时触发（或者浏览器窗口已被关闭）。

onselect　　　　　　  在元素中文本被选中后触发。

onchange 　　　　　  在元素值被改变时运行的脚本。

onfocus 　　　　　　  当元素获得焦点时运行的脚本。

onresize　　　　 　　 当浏览器窗口被调整大小时触发。

onscroll 　　　　　　  当元素滚动条被滚动时运行的脚本。

四、同一元素添加相同事件W3C和IE的区别

var btn3 = document.getElementById("btn3");

Dom0模型： 同一个元素，同类事件只能添加一个，如果添加多个，后面添加的会覆盖前面添加的

btn3.onclick = function () {
console.log("Hello");
};
btn3.onclick = function () {
console.log("Hello3")
};

Dom2模型：可以给同一个元素添加多个同类事件

btn3.addEventListener("click",function () {
alert("Hello1");
});
btn3.addEventListener("click",function () {
alert("Hello2");
});

不同浏览器的兼容写法

if (btn3.attachEvent){
/*IE低版本*
btn3.attachEvent("onclick",function () {
alert("IE Hello");
});
}else{
/*IE高版本 和W3C浏览器*/
btn3.addEventListener("click",function () {
alert("W3C Hello");
});
}

五、事件冒泡和事件捕获

事件冒泡（false）：从子元素到父元素

事件捕获（true）：从父元素到子元素

stopPropagation：阻止事件冒泡

preventDefault(W3C)、returnValue（IE） 阻止默认事件

代码举例：

<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        event.stopPropagation();
        alert("div4");
    },false);
</script>