前端面试 DOM事件

最新推荐文章于 2024-02-08 14:45:48 发布

前端卡卡西呀

最新推荐文章于 2024-02-08 14:45:48 发布

阅读量319

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端面试 Javascript 前端进阶之路文章标签： javascript dom

本文链接：https://blog.csdn.net/RedaTao/article/details/106630768

前端进阶之路同时被 3 个专栏收录

145 篇文章

订阅专栏

Javascript

48 篇文章

订阅专栏

前端面试

43 篇文章

订阅专栏

1.事件级别

DEMO0 element.οnclick=function() {};

DEMO1 element.addEventListener('click', function(){},false)

DEMO2 element.addEventListener('keyup', function(){},false)

2.事件模型

事件捕获（自上向下），时间冒泡（自下向上）

事件流：事件捕获 -> 目标阶段 -> 事件冒泡

描述事件捕获的具体流程

window -> document -> html (document.documentElement) ->body(document.body) -> .... -> 目标元素

3.Event对象的常见应用

event.preventDefault() 阻止默认

event.stopPropagation() 阻止冒泡

event.stopImmediatePropagation() 可在一个点击事件中阻止另外一个点击事件

event.currentTarget 事件代理中当前绑定的对象

event.target 被点击的对象

4.自定义事件

var eve = new Event("custome");

ev.addEventListener("custome", function() {

console.log('custome');

});

ev.dispatchEvent(eve);

示例代码：index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #target {
      width: 200px;
      height: 100px;
      background-color: #0ff;
    }
  </style>
</head>

<body>
  <div id="target">目标区域</div>
  <script>
    let ele = document.getElementById('target');

    window.addEventListener('click', function () {
      console.log('window  capture');
    }, true)

    document.addEventListener('click', () => {
      console.log('document capture');
    }, true)

    document.documentElement.addEventListener('click', () => {
      console.log('html capture');
    }, true)

    document.body.addEventListener('click', () => {
      console.log('body capture');
    }, true)

    ele.addEventListener('click', () => {
      console.log('target  capture');
    }, true)

    // 自定义事件

    let ev = new Event('test');

    ele.addEventListener('test', () => {
      console.log('自定义事件生效', Date.parse(new Date()));
    }, true)

    console.log(Date.parse(new Date()));

    setTimeout(() => {
      ele.dispatchEvent(ev)
    }, 1000)
  </script>
</body>

</html>