JS-23-DOM事件

一、DOM事件

1.什么是事件?
用户和浏览器之间的交互行为我们就称之为事件, 比如：点击，移入/移出;
2.如何给元素绑定事件?
在JavaScript中所有的HTML标签都可以添加事件;
元素.事件名称 = function(){};
当对应事件被触发时候就会自动执行function中的代码;

 let oBtn = document.querySelector("button");
 oBtn.onclick = function () {
     alert("按钮被点击了");
 }
 // 注意点: 如果给元素添加了和系统同名的事件, 我们添加的事件不会覆盖系统添加的事件
 let oA = document.querySelector("a");
 oA.onclick = function () {
     alert("a标签被点击了");
     // 以下代码的含义: 用我们添加的事件覆盖掉系统同名的事件
     return false;
 }

---

二、定时器

<button id="start">开始</button>
<button id="close">结束</button>

在JavaScript中有两种定时器, 一种是重复执行的定时器, 一种是只执行一次的定时器;

1.重复执行的定时器

 setInterval(function () {
     console.log("随便写点");
 }, 1000);
 
let startBtn = document.querySelector("#start");
let id = null;

startBtn.onclick = function () {
    id = setInterval(function () {
        console.log("随便写点");
    }, 1000); // 每过1秒输出一次
}

let closeBtn = document.querySelector("#close");
closeBtn.onclick = function () {
    clearInterval(id);
}

2.只执行一次的定时器

window.setTimeout(function () {
   console.log("随便写点");
}, 5000);

let startBtn = document.querySelector("#start");
let closeBtn = document.querySelector("#close");
let id = null;

startBtn.onclick = function () {
   id = window.setTimeout(function () {
       console.log("随便写点");
   }, 5000);
}

closeBtn.onclick = function () {
   clearTimeout(id);
}

---

三、添加事件三种方式

方式一:

1.通过onxxx的方式来添加:
注意点: 由于是给属性赋值, 所以后赋值的会覆盖先赋值

 oBtn.onclick = function () {
     alert("666");
 }
 oBtn.onclick = function () {
     alert("777");
 }
点击，输出777

方式二:

2.通过addEventListener方法添加:
注意点:
1.事件名称不需要添加on
2.后添加的不会覆盖先添加的
3.只支持最新的浏览器IE9

oBtn.addEventListener("click", function () {
        alert("666");
    });
    oBtn.addEventListener("click", function () {
        alert("777");
    });

点击后先输出666，点击确定后再输出777

方式三

3.通过attachEvent方法添加:
注意点:
1.事件名称必须加上on
2.后添加的不会覆盖先添加的
3.只支持低版本的浏览器

 oBtn.attachEvent("onclick", function () {
     alert("666");
 });
 oBtn.attachEvent("onclick", function () {
     alert("777");
 });

---

四、JavaScript-事件对象

1.什么是事件对象?

事件对象就是一个系统自动创建的一个对象， 当注册的事件被触发的时候, 系统就会自动创建事件对象；

2.事件对象的注意点:
在高级版本的浏览器中, 会自动将事件对象传递给回调函数；
在低级版本的浏览器中, 不会自动将事件对象传递给回调函数；
在低级版本的浏览器中, 需要通过window.event来获取事件对象；

let oA = document.querySelector("a");
    oA.onclick = function (event) {
        // 兼容性的写法
        event = event || window.event;

        alert("666");
        // 阻止默认行为
        return false; // 企业开发推荐

        // 注意点: preventDefault方法只支持高级版本的浏览器
        // event.preventDefault();
        // event.returnValue = false; // IE9以下的浏览器
    }

---

五、事件执行的三个阶段

1.事件的三个阶段
1.1.捕获阶段(从外向内的传递事件)
1.2.当前目标阶段
1.3.冒泡的阶段(从内向外的传递事件)

2.注意点:
三个阶段只有两个会被同时执行， 要么捕获和当前, 要么当前和冒泡；

3.为什么要么只能是捕获和当前, 要么只能是当前和冒泡?
这是JS处理事件的历史问题；早期各大浏览器厂商为占领市场, 以及对事件的理解不同。后续W3C为了兼容, 将两种方式都纳入标准。

1.如何设置事件到底是捕获还是冒泡?
通过addEventListener方法, 这个方法接收三个参数
第一个参数: 事件的名称
第二个参数: 回调函数
第三个参数: false冒泡 / true 捕获

注意点:
onXxx的属性, 不接收任何参数, 所以默认就是冒泡
attachEvent方法, 只能接收两个参数, 所以默认就是冒泡

---

六、JavaScript-阻止事件冒泡

oFDiv.onclick = function () {
        console.log("father");
    }
    oSDiv.onclick = function (event) {
        event = event || window.event;
        // 注意点: stopPropagation方法只支持高级浏览器
        // event.stopPropagation();
        // event.cancelBubble = true; // 低级浏览器
//下面是兼容性写法
        if(event.cancelBubble){
            event.cancelBubble = true;
        }else{
            event.stopPropagation();
        }
        console.log("son");
    }

---

七、JavaScript-移入移出事件区别

1.onmouseover和onmouseenter的区别

onmouseover移入到子元素,父元素的移入事件也会被触发；
onmouseenter移入到子元素,父元素的移入事件不会被触发；

2.onmouseout和onmouseleave的区别

onmouseout移出到子元素,父元素的移入事件也会被触发；
onmouseleave移出到子元素,父元素的移入事件不会被触发；

---

八、JavaScript-位置获取

1.offsetX / offsetY: 事件触发相对于当前元素自身的位置

2.clientX / clientY: 事件触发相对于浏览器可视区域的位置

注意点: 可视区域是不包括滚动出去的范围的

3.pageX / pageY: 事件触发相对于整个网页的位置
注意点: 整个网页包括滚动出去的范围的

4.screenX / screenY: 事件触发相对于屏幕的位置

 var oDiv = document.getElementById("box");
 oDiv.onclick = function (event) {
     event = event || window.event;
     // console.log("offsetX", event.offsetX);
     // console.log("offsetY", event.offsetY);
     /*
     console.log("clientX", event.clientX);
     console.log("clientY", event.clientY);
     console.log("----------------------");
     console.log("pageX", event.pageX);
     console.log("pageY", event.pageY);
     */
     console.log(event.screenX);
     console.log(event.screenY);
 }

注意点: clientX / clientY无论高级浏览器还是低级浏览器都支持；pageX / pageY只有高级浏览器支持, 低级浏览器是不支持的(IE9以下)

---

-End