【JavaScript 3】

最新推荐文章于 2024-08-20 18:04:12 发布

草药味的冰激凌

最新推荐文章于 2024-08-20 18:04:12 发布

阅读量1.7k

点赞数 29

文章标签：前端

本文链接：https://blog.csdn.net/2301_80347441/article/details/136102598

版权

本文介绍了DOM的概念、作用，包括DOM树和DOM对象的创建与操作，以及JavaScript中的事件监听、不同类型事件（如鼠标、键盘、文本和页面滚动）及其处理，包括事件流、捕获与冒泡、事件委托和页面加载/滚动事件的使用。

摘要由CSDN通过智能技术生成

一、DOM

const：里面存放的是地址，优先使用const声明变量，数组和对象的修改可以用const

1.DOM（文档对象模型）

是什么：用来呈现以及与任意HTML或XML文档交互的API（操作网页内容）

作用：开发网页内容特效和实现用户交互

2.DOM树

将 HTML文档以树状结构直观的表现出来，称为文档树或 DOM树

描述网页内容关系的名词

作用: 文档树直观的体现了标签与标签之间的关系

3.DOM对象

DOM对象:浏览器根据html标签生成的js对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

document: 是DOM提供的一个对象，网页中所有的内容都在document里面

获取DOM对象

通过CSS选择器

返回值：获取匹配第一个元素，没有匹配为null必须加引号，为字符串

可以直接修改

 document.querySelector('css选择器')

<body>
   <div class="box">123</div>
   <div class="box">abc</div>

   <p id="nav">导航栏</p>

   <ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
   </ul>

<script>
    const box = document.querySelector('div') //选123
    const nav = document.querySelector('#nav')
    const li = document.querySelector('ul li:first-child')
</script>
</body>

获取所有元素

  const lis = document.querySelectorAll('li')

获取的是伪数组：

有长度有索引号
没有pop() push()等方法

返回值：nodelist 对象集合

操作元素内容

1.对象.innerText 属性

将文本内容添加/更新到任意标签位置
显示纯文本，不解析标签

2.对象.innerHTML 属性

解析标签

<div class="box">我是文字内容</div>

box.innerHTML = '我要更换'

操作元素属性

二、事件

1.事件：是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个的数做出响应，

称为绑定事件或者注册事件比如鼠标经过显示下拉菜单

比如点击可以播放轮播图

语法

元素对象.addEventListener('事件类型'，要执行的函数)

事件监听三要素

事件源: 那个dom元素被事件触发了，要获取dom元素
事件类型: 用什么方式触发，比如鼠标单击click、鼠标经过 mouseover等
事件调用的函数: 要做什么事

鼠标事件

click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

焦点事件

分类：focus（获取焦点） blur（失去焦点）

区别：

当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发focus事件。focus事件是确定页

面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键

可以改变焦点位置。

blur事件则与focus事件相反，当元素失去焦点时，会触发该事件。例如，当用户在输入框中输入完

成后，将焦点从输入框移开，此时就会触发blur事件。

键盘事件

    const input = document.querySelector('input')
    input.addEventListener('keydown',function(){
    console.log('键盘按下了')
    })
    input.addEventListener('keyup', function(){
        console.log('键盘弹起了')
     })

文本事件

事件流

事件捕获：从DOM根元素开始去执行对应的事件（从外到里）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)

若传入false代表冒泡阶段触发，默认就是false

L0事件没有捕获，只有冒泡

const fa= document.querySelector('.father')
const son = document.queryselector('.son')

document.addEventListener('click', function(){
  alert('我是爷爷')
},true)
fa.addEventListener('click',function(){
  alert('我是爸爸')
},true)
son.addEventListener('click',function(){
  alert('我是儿子')
},true)

事件冒泡：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（从里到外）

阻止冒泡

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件限制在当前元素

内，就需要阻止事件冒泡。

阻止事件冒泡需要拿到事件对象

事件对象.stopPropagation()

即能阻止冒泡又能阻止捕获，本质是阻止传播

son.addEventListener('click',function(e){
  alert('我是儿子')
},true)
e.stopPropagation()

事件解绑

btn.onclick =function(){
   alert('点击了')
}
btn.onclick = null

事件委托

事件委托是利用事件冒泡的特点，给父元素注册事件，当触发子元素的时，会冒泡到父元素身上，

从而触发父元素的事件

事件对象.target.tagName 可以获得真正触发事件的元素

优点：减少注册次数，提高程序性能

页面加载事件

加裁外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件

事件名:load，监听页面所有资源加载完毕:

给window 添加 load 事件

不仅可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

window.addEventListener('load',function(){
    //执行事件
})

页面滚动事件

escrollLeft和scrollTop(属性)

获取被卷去的大小
获取元素内容往左、往上浪出去看不到的距离
这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离

草药味的冰激凌

关注

29
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript 3】

blur事件则与focus事件相反，当元素失去焦点时，会触发该事件。const：里面存放的是地址，优先使用const声明变量，数组和对象的修改可以用const。事件委托是利用事件冒泡的特点，给父元素注册事件，当触发子元素的时，会冒泡到父元素身上，事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个的数做出响应，因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素，若想把事件限制在当前元素。：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件（从里到外）
复制链接

扫一扫