前端JavaScript之DOM事件操作~都是干货

下面是对DOM操作事件的整理，希望可以帮助到有需要的小伙伴~

文章目录

DOM事件操作
- JavaScript的基础
- 事件
- - 代码书写步骤
  - - 1.获取绑定事件的元素
    - 2.绑定事件
    - 3.编写事件
- 注意事项

DOM事件操作

JavaScript的基础

JavaScript基础由3部分组成

JavaScript的基础语法：变量、表达式、运算符、条件语句、循环语句、函数
DOM：文档对象模型。操作html文档中的元素(标签)。比如div隐藏显示、轮播图等。
BOM：浏览器对象模型。操作浏览器，比如让浏览器自动滚动

事件

JavaSript是以事件驱动为核心的一门语言。
事件的三要素：

确定绑定事件的元素
触发事件

事件名	说明
onclick	鼠标单击
ondblclick	鼠标双击
onkeyup	按下并释放键盘上的一个键时触发
onchange	文本内容或下拉菜单中的选项发生改变
onfocus	获得焦点, 表示文本框等获得鼠标光标
onblur	失去焦点, 表示文本框等失去鼠标光标
onmouseover	鼠标悬停, 即鼠标停留在图片等的上方
onmouseout	鼠标移出, 即离开图片等所在的区域
onload	网页文档加载事件
onunload	关闭网页时
onsubmit	表单提交事件
onreset	重置表单时.

事件
编写事件对样式和元素进行操作，即DOM

代码书写步骤

1.获取绑定事件的元素

举例：

// 1. 通过id获取单个元素
var box1 = document.getElementById("box");
// 2.通过标签名获取标签数组，所以有s
var box2 = document.getElementByTagName("box2");
// 3.通过类名获取标签数组，所以有s
var box3 = document.getElementByClassName("box3");

2.绑定事件

获取绑定事件的元素.触发事件 = function(){事件驱动程序
};

方式1：直接绑定匿名函数

<div id="box1"></div><script>var box1 = document.getElementById("box1");box1.onclick = function(){alert("这是直接绑定匿名函数")}
</script>

方式2：单独定义函数，绑定

<div id="box2"></div><script>var box2 = document.getElementById("box2");// 给box2绑定函数box2.onclick = fn; // 注意：是fn，不是fn()，fn()是调用函数// 单独定义函数function fn(){alert("这是单独定义函数，绑定")}
</script>

方式3：行内绑定

<div id="box3" onclick="fn()"></div><script>function fn(){alert("这是行内绑定")}
</script>

3.编写事件

事件内容（逻辑）的编写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM事件</title><style>#box1 {width: 100px;height: 100px;border: 5px solid #000;}</style></head><body><div id="box1"></div><script>var box1 = document.getElementById("box1");box1.onclick = function () {box1.style.backgroundColor = "red";}</script>
</body>
</html>

注意事项

在JS里面编写的属性值要加上引号
在JS里面写属性名的时候，所有CSS里面的属性名中的text-、line-、background-等都要改成驼峰式的格式。比如：CSS里面的background-Color在JS中要改成backgroundColor

前端JavaScript之DOM事件操作~都是干货相关推荐

html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
前端 JavaScript 焦點事件處理
前端 JavaScript 焦點事件處理何謂聚焦? focus/blur 事件 focus/blur 方法允許在任何元素上聚焦 : tabindex 何謂聚焦? 所謂聚焦(focus)通常是在說聚 ...
dom事件操作例题，电子时钟，验证码，随机事件
dom事件操作当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
JavaScript中DOM事件
DOM事件什么是事件? 事件就是文档或浏览器窗口中发生的一些特定的交互瞬间.主要有HTML事件和DOM事件. HTML事件:直接在HTML元素标签内添加事件,执行脚本. <!doctype h ...
web前端----JavaScript的DOM（二）
前面在DOM一中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作创建节点:var ele_a = document.createElement('a');添加节点:ele_p ...
【总结整理】JavaScript的DOM事件学习（慕课网）
事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件来实现比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换本章内容 1.理解事 ...
JavaScript基础: DOM中操作属性以及自定义属性
上一篇聊了一些常用的事件以及演示其如何使用,演示的时候发现一件事情,那就是DOM操作不单是得到元素,还可以修改元素的属性.现在开始如何操作其属性. 普通自带的属性这些属性是某些标签自带的属性比如sr ...
Web前端——JavaScript（dom文档对象模型）
>JS的Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 对象的方法: ...
Javascript标准DOM Range操作
简介 Range是一种fragment(HTML片断),它包含了节点或文本节点的一部分. 可以通过document.createRange()或selection象的getRangeAt()方法获得. ...

前端JavaScript之DOM事件操作~都是干货

文章目录

DOM事件操作

JavaScript的基础

事件

代码书写步骤

1.获取绑定事件的元素

2.绑定事件

3.编写事件

注意事项

前端JavaScript之DOM事件操作~都是干货相关推荐

最新文章

热门文章