DOM事件

DOM事件的概念

事件是javascript和HTML交互基础,。交互;比如鼠标点击事件、敲击键盘事件等。这样的事件行为都是前端DOM事件的组成部分，不同的DOM事件会有不同的触发条件和触发效果。
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：我们可以认为事件是可以被JavaScript侦测到的一种行为。

DOM事件流

要讲DOM事件，首先就要提高事件流的概念。
事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件，而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。

事件流

addEventListener有三个参数，第一个参数为事件类型，第二个参数为处理函数，第三个为冒泡事件或捕获事件，默认false为冒泡事件。

<div id='box'></div>
var dom = document.getElementById('box')
// 捕获的顺序
window.addEventListener('click', function () {
    console.log("capture window click");
}, false);
document.addEventListener('click', function () {
    console.log("capture document click");
}, false);
document.documentElement.addEventListener('click', function () {
    console.log("capture html click");
}, false);
document.body.addEventListener('click', function () {
    console.log("capture body click");
}, false);
dom.addEventListener("click", function () {
    console.log("capture domDiv click");
}, false);
//打印结果
// capture click
// capture body click
// capture html click
// capture document click
// capture window click

Event对象

事件处理方法中的第一个参数返回的就是事件对象。
事件对象可以告诉你这个事件是什么类型的事件，来自哪个元素，事件的位置（如鼠标事件的点击坐标），以及对事件进行操作比如阻止冒泡。
Event对象的常见应用：

// event.preventDefault() 阻止默认事件
// event.stopPropagation() 阻止冒泡
// event.stoplmmediatePropagation() 响应优先级  a的事件加 b将不执行
// event.currentTargent 当前绑定事件的对象(父级元素)
// event.target 事件代理当前被点击的子元素

自定义事件

<div id='box'></div>
var eve = new Event('myEvent');
var dom = document.getElementById('box')
dom.addEventListener('myEvent',function() {
    console.log(1)
})
dom.dispatchEvent(eve)；//触发

最后编辑于：2019.09.25 16:40:20