DOM和BOM

最新推荐文章于 2023-06-01 22:30:00 发布

THER1881

最新推荐文章于 2023-06-01 22:30:00 发布

阅读量131

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/thwr1881/article/details/125317764

版权

一、DOM事件

1、事件：

事件源：触发事件的对象
事件类型：触发了什么类型的事件
事件处理程序：事件被触法后执行的函数（程序段）

2、JavaScript中的绑定事件(注册事件）的方式：

2.1、传统方式：注册的事件具有唯一性(同一个元素同一个事件只能设置一个处理函数)，若同一个元素同一个事件设置多个处理函数，则最后的处理函数，会覆盖前面的处理函数。

元素对象名.事件 = 事件处理程序
    btn.onclick = function(){
   }

2.2、事件监听方式：同一个对象的同一个事件可以绑定（注册）多个事件处理程序。

语法格式：DOM对象.addEvenListener(type,callback，[capture]）；

type：表示事件类型(不带on)。如click
callback：表示事件处理程序,可以是函数名，可以是匿名函数
captrue：表示可选参数，默认值false(表示以冒泡方式处理事件)，true(表示以捕获的方式处理事件)

3、事件删除方式

（1）、传统方式：DOM事件名.事件名= null
（2）、标准浏览器模式：DOM对象.removeEvenListener(type,callback)

4、事件流

4.1、什么是事件流
是指当事件发生时，会在发生事件的元素节点与dom树根节点之间按照特定的顺序进行传播，而这个过程被称作事件流。

4.2、事件流的方式
（1）、网景（netscape）：采取事件捕获的方式
（2）、微软：采取事件冒泡的方式
（3）、W3C:采取中和方式(事件前期阶段：采取只捕获不处理，事件后期阶段采取冒泡)

5、事件对象（event）：

当一个事件发生的时候，event中保存的是跟事件相关的一系列信息数据的集合每个事件处理程序中都包含该事件对象(即每个事处理程序中事件对象event是默认存在的)

6、事件对象的常用属性和方法：

方法	用途
e.target	返回触发事件的对象
e.type	返回事件类型
e.stopPropagation()	阻止事件冒泡
e.preventDefault()	阻止默认事件

对e.target&e.type举例：

    <button id="btn">触发</button>

    <script>
        let btn = document.querySelector('#btn')
        btn.addEventListener('click',function(e){
   
            console.log('事件对象：',e.target)
            console.log('事件类型：',e.type)
        })

在这里插入图片描述

对e.preventDefault()举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
    <script>
        let a = document.querySelector('a')
        a.