DOM事件

最新推荐文章于 2023-03-10 20:53:50 发布

葡萄已熟透

最新推荐文章于 2023-03-10 20:53:50 发布

阅读量202

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_49123501/article/details/127857891

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM

1.获取元素

1.1 根据id获取

Document的方法 getElementById() 返回一个匹配特定 ID 的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

var element = document.getElementById(id);

因为文档页面从上往下加载，所以需要先有标签，则script写到标签下面
get获得element元素by通过
参数 id是大小写敏感的字符串
返回的是一个元素对象
console.dir() 可以打印返回的元素对象，更好的查看里面的属性和方法

1.2 根据标签名获取

使用 getElementsByTagName() 方法返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意：

1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历

2.得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素

element.getElementsByTagName('元素名');

注意：父元素必须是

单个对象（必须指明是哪一个元素对象）.获取的时候不包括父元素自己

1.3 通过HTML5新增的方法获取

document.getElementsByClassName('类名');//根据类名返回元素对象集合

document.querySelector('选择器');	//根据指定选择器返回第一个元素对象

document.querySelectorAll('选择器');	//根据指定选择器返回

1.4 获取特殊元素（body, html）

// 1.获取body 元素
var bodyEle = document.body;

// 2.获取html 元素
var htmlEle = document.documentElement;

2.事件基础

2.1事件概述

JS使我们有能力创建动态页面，而事件是可以被JS侦测到的行为

简单理解：触发----响应机制

网页中的每个元素都可以产生某些可以触发JS的事件，例如：可以在用户点击某按钮时产生一个事件，然后去执行某些操作

2.2 事件三要素

事件由三部分组成：事件源、事件类型、事件处理程序，也成为事件三要素

事件源：事件被触发对象（即按钮）
事件类型：如何触发，什么事件。比如鼠标点击触发或者鼠标经过触发、鼠标按下触发
事件处理程序：通过一个函数赋值的方式完成

2.3 执行事件的步骤

获取事件
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）

2.4 常见鼠标事件

3.操作元素

JS的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

3.1 改变元素内容

element.innerText

从起始位置到终止位置的内容，但它会去除html标签，同时空格和换行也会去掉（不识别）

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行（识别）

var p = document.querySelector('p');
// console.log(p.innerText);	//会打印里面的内容，但不保留空格和换行
console.log(p.innerHTML);	//保留空格和换行

3.2 常用元素的属性操作

innerText、innerHTML 改变元素内容
scr、href
id、alt、title

3.3 表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

btn.onclick = function () {
            // 表单里面的值，文字内容是通过value来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用，不能再点击 用disabled
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者
        }

3.4 样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式

element.style 行内样式操作
element.className 类名样式操作

div.onclick = function () {
            // div.style = 'background-color: green';
            // div.style 里面的属性采用驼峰命名法
            this.style.backgroundColor = 'green';
            this.style.width = '250px';
        }

4.操作元素

4.6 自定义属性的操作

1.获取属性值

element.属性获取属性值
element.getAttribute(‘属性’)

区别

element.属性获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’) 主要获得自定义的属性（标准），我们自己自定义的属性

2.设置属性值

element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’, ‘值’)

区别

element.属性设置内置属性值
element.setAttribute(‘属性’) ；主要设置自定义的属性（标准）

3.移除属性值

element.removeAttribute(‘属性’)

4.7 H5自定义属性

自定义属性的目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中

为了分清是否为自定义属性：

1.设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

比如< div data-index = “1”>< /div>

或者使用 JS 设置

element.setAttribute(‘date-index’, 2)

2.获得H5自定义属性值

element.setAttribute(‘date-index’);
H5 新增 element.dataset.index 或者 element.dataset['index ']

5.节点操作

为了获取元素，利用节点层级关系获取元素

利用父子兄节点关系获取元素

5.2 节点概述

在实际开发中，节点操作主要操作的是元素节点

5.3 节点层级

1.父级节点

node.parentNode

返回的是元素最近的父级节点
如果找不到父节点则返回 null

2.子节点

1. parentNode.childNodes

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包含所有的子节点，包括元素节点、文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以一般不提倡使用childNodes

var ul = document.querySelector('ul');
for (var i = 0; i < ul.childNodes.length; i++) {
	if (ul.childNodes[i].nodeType == 1) {
		console.log(ul.childNodes[i]);
	}
}

2. parentNode.children

parentNode.children 是一个只读属性，返回所有的子元素节点，只返回元素节点

3. parentNode.firstChild

返回第一个子节点，找不到则返回null。同样的也是包含所有的节点

4. parentNode.lastChild

返回最后一个子节点

5. parentNode.fistElementChild

返回第一个子元素节点

6. parentNode.lastElementChild

返回最后一个子元素节点

5、6只有ie9以上才能使用

3.兄弟节点

1. node.nextSibling

返回当前元素的下一个兄弟节点，包含元素节点和文本节点等

2. node.previousSibling

返回当前元素的上一个兄弟节点，包含元素节点和文本节点等

3. node.nextElementSibling

返回当前元素的下一个兄弟元素节点，找不到则返回null

4. node.previousElementSibling

返回当前元素的上一个兄弟元素节点

5.4 创建节点

1.创建节点

document.creatElement(‘tagName’)

document.creatElement() 方法创建由 tagName 指定的 HTML元素。动态创建元素节点

2.添加节点

1.node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾

2.node.insertBefore(child, 指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面

5.5 删除节点

node.removeChild(child)

从DOM中删除一个子节点，返回删除的节点

5.6 复制节点(克隆节点)

node.cloneNode()

返回调用该方法的节点的一个副本

注意：

如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
node.cloneNode(true); 括号里面为ture，为深拷贝

总结：不同浏览器下，innerHTML效率要比createElement 高

6. DOM 重点核心

关于dom操作，主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

6.1 创建

document.write
innerHTML
createElement

6.2 增

appendChild
insertBefore

6.3 删

removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性，表单的值等

修改元素属性：src、href、title
修改普通元素内容：innerHTML、innerText
修改表单元素：value、type、disable等
修改元素样式：style、className

6.5 查

querySelector、querySelectorAll
利用节点操作获取元素：父（parentNode）、子（children）、兄（nextElementSibling、previousElementSibling）

6.6 属性操作

主要针对自定义属性

setAttribute：设置dom属性值
getAttribute：得到dom属性值
removeAttribute：移除属性

6.7 事件操作

事件高级

1.注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件

两种：传统注册事件（上一章学的鼠标事件以on开头的）和方法监听事件

方法监听注册方式：

addEventListener() 它是一个方法
同一个元素同一个事件可以注册多个监听器（监听处理函数）

1.2 addEventListener 事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

type: 事件类型字符串，比如 click、mouseover，注意这里不带on，需要加引号
listener: 事件处理函数，事件发生时，会调用该监听函数
useCapture: 可选参数，是一个布尔值，默认是false，

2.删除事件（解绑事件）

2.1 删除事件的方式

1.传统注册方式

evenTarget.onclick = null;

2.方法监听注册方式

① eventTarget.removeEventListener(type, listener[, useCapture]);

divs[1].addEventListener('click', fn);  //里面的fn，调用不需要加括号
function fn() {
	alert('22');
	divs[1].removeEventListener('click', fn);
}

3. DOM 事件流

事件流描述的时从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

// 捕获阶段 如果addEventListener 第三个参数是 true，那么处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, true);

// 冒泡阶段 如果addEventListener 第三个参数是 false 或者省略，那么处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function () {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function () {
            alert('father');
        }, false);
        document.addEventListener('click', function () {
            alert('document');
        })

4.事件对象

div.addEventListener('click', function (event) {
            console.log(event);
})
// 1. event 就是一个事件对象，当形参来看
// 2. 事件对象只有在有了事件才会存在，它是系统自动创建的，不需要传递参数
// 3. 事件对象是事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标相关信息，鼠标坐标等，如果是键盘事件就包含了键盘的相关信息，比如 判断用户按下哪个键
// 4. 这个事件对象可以自己命名，不如event、evt、e 等等

5.阻止事件冒泡

5.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

阻止事件冒泡

利用事件对象里面的stopPropagation() 方法

6.事件委托（代理、委派）

事件委托的原理：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

// 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // alert('1223');
            // e.target 可以得到点击的对象
            for (var i = 0; i < this.children.length; i++) {
                this.children[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';
        }, false)

7.常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        })

禁止鼠标选中（selectstart 开始选中）

document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })

7.2 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要使用鼠标事件对象MouseEventKeyboardEvent

8.常见的键盘事件

三个事件的执行顺序是：keydown > keypress > keyup

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

keyup 和 keydown 事件不区分字母大小写 a和A得到的都是65
keypress 事件区分字母大小写 a 97、A得到的是65