2021-03-09

最新推荐文章于 2024-01-26 20:25:43 发布

冬小鱼

最新推荐文章于 2024-01-26 20:25:43 发布

阅读量158

点赞数

分类专栏：小白起飞

本文链接：https://blog.csdn.net/weixin_48206229/article/details/114557236

版权

小白起飞专栏收录该内容

45 篇文章 0 订阅

订阅专栏

学习目标：

小白起飞第40天

学习内容：

事件
组织a标签跳转
在这里插入图片描述

鼠标事件移入移出
onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发
在这里插入图片描述

获得焦点/失去焦点

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发。
在这里插入图片描述

单击/双击

onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发。
在这里插入图片描述

键盘事件
onkeydown：键盘按下
onkeyup:键盘抬起
在这里插入图片描述

浏览器事件

onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
在这里插入图片描述
属性元素自定义属性
标签除了自带属性之外,还可以根据我们自己的需求,去自定义属性,属性名自定义

2.2 设置方式
setAttribute : DOM.setAttribute(“属性”,”值”); 为元素添加属性,可以自定义属性
getAttribute : DOM.getAttribute(“属性”) ; 获取元素的某个属性值,可以获取自定义的属性的值
removeAttribute : DOM.removeAttribute(“属性”); 删除元素的某个属性

setProperty : DOM.style.setProperty(“属性”,”值”) 设置css样式
cssText : DOM.style.cssText = “属性:值;属性:值;…”; 设置css样式
DOM.style.xxx = xxx; 设置css样式
DOM.属性=’值’ 设置标签已有的属性值,不可以自定义属性
在这里插入图片描述

节点是什么
HTML 文档中的所有内容都是节点：
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
nodeType
在这里插入图片描述

nodeName
在这里插入图片描述

nodeValue
在这里插入图片描述

常用方法

节点关系
节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
父节点–parentNode
父元素节点–parentElement
子节点–childNodes：标签节点、文本节点、注释节点得到的是伪数组
子元素节点–children :标签节点
第一个子节点–firstChild:文本
第一个子元素节点–firstElementChild：第一个标签
最后一个子节点–lastChild:文本
最后一个子元素节点–lastElementChild: 最后一个标签
上一个子节点–previousSibling:文本
上一个子元素节点–previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点–nextElementSibling: 下一个标签
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。
在这里插入图片描述

节点创建

第一种
在这里插入图片描述

第二种
在这里插入图片描述

第三种
父元素.appendChild(子元素)：给父元素末尾添加子元素
在这里插入图片描述

动态创建列表
1 按钮
2 盒子
按钮有点击事件,点击之后,在盒子中动态创建ul

在这里插入图片描述

事件进阶
事件三要素

事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解，当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转…），那么这个元素就是事件源。
事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。
事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
执行事件的步骤：获取元素、绑定事件、书写事件驱动程序
4.2 DOM0和DOM2事件绑定
4.2.1 事件绑定
DOM0会发生事件覆盖问题
btn.onclick = function(){
alert(1)
}

btn.onclick = function(){
alert(2)
}

以上程序只会弹框 2 , 因为第二次绑定相同事件会覆盖第一次绑定的事件

而DOM2 优化了事件绑定
使用 addEventListener,并且不会发生事件覆盖
btn.addEventListener(‘click’,function(){
alert(1)
});
btn.addEventListener(‘click’,function(){
alert(2)
});
以上DOM2绑定方式, 弹框1和弹框2 都会执行
4.2.2 事件绑定
DOM0解绑 btn.onclick = null;
DOM2解绑 btn.removeEventListener(‘click’,function);

事件源妙用
绑定事件后,如果还要新增元素,则新增元素不会拥有该事件监听
可以利用事件源,对父盒子绑定事件,然后通过事件源找到真正触发该事件的元素,进行操作

事件冒泡
如果父子标签绑定相同的事件监听,如果触发子元素的事件的时候,会从子到父依次触发绑定了该事件的元素事件
还有一种是捕获机制,相反,是从父到子依次触发

什么是冒泡事件
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。

元素

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？如何阻止冒泡（存在兼容性） e.stopPropagation(); 谷歌和火狐支持, window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持