前端基础（八）：DOM事件操作（结尾有美女福利）-物联网技术文章-傲云油气装备网

下面是小凰凰的简介，看下吧！
人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

文章目录

一、JavaScript的组成
二、onload事件（了解）

1、script标签的位置补充

三、事件的三要素

1、获取事件源的方式（DOM节点的获取）
2、绑定事件的三种方式

（1）直接绑定匿名函数（推荐）
（2）先单独定义函数，再绑定
（3）行内绑定

3、事件驱动程序

（1）操作标签样式
（2）操作标签属性
（3）总结
（4）思考
（5）innerText、innerHTML与value之间的区别

四、简写小技巧
五、事件案例

1、盒子显示隐藏两种实现方法

（1）js单独实现
（2）CSDN博客广告栏关闭--js+css实现

2、实现鼠标移入切换图片

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、onload事件（了解）

1、script标签的位置补充

前面我们在javascript介绍章节说过js的三种书写方式：https://blog.csdn.net/weixin_44571270/article/details/106938617
如果采用内联式，一般我们的script标签写在body最下面，如果你非要把script标签放在head标签里面，和css放一起，由于代码执行是从上至下，因此你的动作（js）会先于html、css执行，这很不科学！人都没有，怎么做动作！因此这个时候就需要onload事件了！

onload事件详解：
当页面加载（文本和图片）完毕的时候，触发onload事件。
举例：

<script type="text/javascript">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>

有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

缺点：如果用户网很不好，图片无法加载出来，岂不是什么也不能做？我们应该让图片最后加载才对，js放在中间！

三、事件的三要素

事件的三要素：事件源、事件、事件驱动程序。
比如：网页上弹出一个广告，我点击右上角的X，广告就关闭了。这件事情里，事件源是：X。事件是：onclick。事件驱动程序是：广告关闭了

总结如下：

事件源：引发后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操作。也就是DOM。

三者的实现代码如下：

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getElementById("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

下面针对这事件的三要素，进行分别详细介绍。

1、获取事件源的方式（DOM节点的获取）

var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
 
var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s
 
var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

我们可以看看这个标签数组到底长啥样：
代码如下：

<body>
<div id="box1" class="haha">谢谢你长的这么好看，还光顾我的博客！</div>
<p id="box2" class="haha">三连、三连！</p>
<script type="text/javascript"> var arr1 = document.getElementsByTagName("div"); console.log(arr1) var arr2 = document.getElementsByClassName("haha"); console.log(arr2) //得到的是事件源对象的数组 </script>
</body>

我们看下控制台的输出：
我们主要看红色圈住的部分，它是一个看起来像字典的东西，但是它其实是一个伪数组（但我有听说它是一个集合，鬼知道这是个啥东西）！怎么取出来相应标签呢？

//只有一个直接取即可
var arr1 = document.getElementsByTagName("div")[0];
//因为得到的是事件源对象的数组，class为haha的有两个标签，因此0,1都可以！
var arr2 = document.getElementsByClassName("haha")[0];
var arr2 = document.getElementsByClassName("haha")[1];
也可以采用for循环遍历：
for(var i = 0;i < arr2.length;i++){
	arr2[i].onclick = function(){
		alert('我是弹出的内容')
	}
}

这里还可以看事件源下面可以做的操作！

2、绑定事件的三种方式

（1）直接绑定匿名函数（推荐）

<div id="box1" ></div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

（2）先单独定义函数，再绑定

<div id="box1" ></div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

（3）行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
    function fn() {
        alert("我是弹出的内容");
    }
</script>

注意第一行代码，绑定时，是写的"fn()"，不是写的"fn"。因为绑定的这段代码不是写在js代码里的，而是被识别成了字符串。

3、事件驱动程序

我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：

（1）操作标签样式

<div id="box1" >谢谢你长的这么好看，还光顾我的博客！</div>
<script type="text/javascript">
    var div1 = document.getElementById("box1");
    div1.onmouseover = function() {
        div1.innerText='愿你我都能活成自己心目中那个样子'
        div1.style.border="4px solid red"
        div1.style.backgroundColor="skyblue"
        div1.style.fontFamily="Songti SC"
    }
    div1.onmouseout = function() {
        div1.innerText='谢谢你长的这么好看，还光顾我的博客！'
        div1.style.border="none"
        div1.style.backgroundColor="white"
        div1.style.fontFamily="none"
    }
</script>

最开始我们是没有边框、没有背景，没有字体样式！
实现效果：

只要出现了右边在闪动，那么一定用了js！
总结操纵标签样式的方法共性：

所有标签样式的操作，都是通过对`div1.style.样式名`进行赋值达到操作的目的！

// 注意innertext修改的文本内容既不属于标签样式，也不属于标签属性，这是个特例！

（2）操作标签属性

<body>
<a id="d1" href="http://wujincheng.blog.csdn.net" class="conn" target="_self" title="各位路过的梦想奋斗者，三连支持哦!">点我有你好看!</a>
<script type="text/javascript">
    var conn = document.getElementById("d1");
    conn.onclick = function () {
        conn.innerText="各位奋斗者，谢谢三连!";
        conn.target = "_blank";
//this和python中的self一样的，都是当前调用此方法的对象的引用，也就是conn的引用！
        this.title="懵逼了吧，哈哈哈！"; 
        this.className="href";
    }
</script>
</body>

按理来说，我们的效果原来是本页面跳转，class属性为conn，链接名：点我有你好看！
实现效果：
我们的事件驱动成功实现了操作标签属性，我们的href标签属性的值等等都可以修改哦！
总结操纵标签属性的方法：

1. 记住一个特殊的，修改class属性conn.className
2. 其他的都是`conn.标签属性名`直接赋值修改即可！
3. `其他标签也都是一样的道理！`
4. 上面说了修改标签的文本内容conn.innerText既不是标签属性，也不是标签样式！

文本内容本就不是行内属性，所以它算是特例，为什么class，不能conn.class呢？因为class在js中是关键字，类嘛！所以不能使用它！

（3）总结

1. 操纵标签样式的方法：通过对`div1.style.样式名`进行赋值达到操作的目的！
2. 操纵标签属性的方法：
			(1)记住一个特殊的，修改class属性conn.className
			(2)其他的都是`conn.标签属性名`直接赋值修改即可！

但要注意的是，我们在对标签样式进行操作的时候，使用div1.style.样式名样式名不再是以前的样子，比如样式font-family，变成了fontFamily，不能使用-连接，而且需要使用驼峰命名法！

（4）思考

js是怎样达到修改标签样式的？

对于行内标签属性的修改，js是直接修改的，这个在我们操作标签属性的动图里就可以看到！我们一般写标签样式，都在style标签里里，或者其他文件里写的！它又怎么修改呢？他其实是通过修改行内的style属性，由于行内的style优先级最高，会覆盖你的样式！

请看下图：

请注意看我圈的两处的变化！你应该就懂了！

如果在事件驱动阶段我把标签的id属性修改了，会有影响吗？

不会！var conn = document.getElementById("d1");这个已经获取到了事件源对象了！后续的操作都在内存中执行，而不会程序从头到尾重新执行一边！

（5）innerText、innerHTML与value之间的区别

innerText、innerHTML的区别

<body>
<button id="btn">click me!</button>
<div id="box1" ><span>隐藏</span></div>
<div id="box2" ><span>显示</span></div>
<script type="text/javascript">
    var div = document.getElementById("box1");
    var div1 = document.getElementById("box2");
    var btn1 = document.getElementById("btn");
    btn1.onclick= function(){
        console.log(div.innerText);
        console.log(div1.innerHTML);
    }
</script>
</body>

代码执行结果：

结论：innerText只获取标签里的文本，innerHTML获取标签里的文本和标签！ ，都可以赋值，只不过innerHTML还可以赋值标签！

value只是针对表单元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo">my first demo</p>
    <input id="input" type="text">
</body>
<script> document.getElementById("input").value="<b>hello</b>" </script>
</html>

四、简写小技巧

我们一个项目一般有很多标签，如果每个都要做如下操作：

var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
var div3 = document.getElementById("box3");
var div4 = document.getElementById("box4");
var div5 = document.getElementById("box5");
// 这样看起来是不是特别臃肿？解决方案如下:
function $(id){
	return document.getElementById(id);
}
$("d1").onclick = function(){
	alert("我是弹出的内容");
}
$("d2").onclick = function(){
	alert("我是弹出的内容");
}
$("d3").onclick = function(){
	alert("我是弹出的内容");
}
// 看像上面这样就简洁方便多了吧！当然上面这个只能根据id选择标签
// 你可以根据你的项目情况，把其他选择方式也写上！如下：
function $(cls){
	return document.getElementsByClassName(cls)[0];
}
function $(tagname){
	return document.getElementsByTagName(tagname)[0];
}

五、事件案例

1、盒子显示隐藏两种实现方法

（1）js单独实现

盒子隐藏两种方式，第二种方式我放在CSDN博客广告栏关闭中采用

<head>
    <style> #d1 { width: 200px; height: 200px; background: red; } </style>
</head>
<body>
<button id="d2">隐藏</button>
<div id="d1">
</div>
<script> var btn=document.getElementById("d2"); var div=document.getElementById("d1"); var isdisplay = true btn.onclick=function(){ if (isdisplay === true){ div.style.display="none"; isdisplay = false; btn.innerText="显示"; }else{ div.style.display="block"; isdisplay = true; btn.innerText="隐藏"; } } </script>

实现效果：

（2）CSDN博客广告栏关闭–js+css实现

看，CSDN这该死的广告它又来了！
幸好上面有个可以关闭！今天刚学习了js的盒子的隐藏，就想着自己来实践一下！代码如下：

<head>
    <style> #d1 { height: 90px; background-image: url("src.png"); } .active { display: none; } #d2 { position: relative; left: 1240px; background-color: #248df2; border: none; } </style>
</head>
<body>

<div id="d1" class="app">
    <button id="d2"></button>
</div>
<script> var btn = document.getElementById('d2'); var div = document.getElementById('d1'); var isdisplay=true btn.onclick=function(){ div.className='active'; } </script>
</body>

实现效果：

2、实现鼠标移入切换图片

图片命名如下：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="style.css">-->
    <style>
        body {
            margin: 0;
        }
        #box1 {
            width: 236px;
            height: 354px;
            position: relative;
            left: 50%;
            top: 50%;
            margin-top: 177px;
            margin-left: -118px;
            background-image: url("1.jpg");
        }
    </style>
</head>
<body>
<div id="box1"></div>
<script type="text/javascript">
    var div=document.getElementById("box1");
    div.onmouseover = function(){
        var num = Math.floor(Math.random() * 5) + 1;
        div.style.backgroundImage="url("+"\""+num+".jpg\")";
    }
</script>
</body>
</html>

除了字符串拼接的方法，你也可以采用数组实现，把所有的url存进数组，然后遍历一个，count++，下次就取到下一个了！

注意：数组应该把"url(\"1.jpg\")"整个存进去，到时候直接赋值给div.style.backgroundImage就行了！

• 53.字符串的正则和相关的方法	• （近5w字）面向小白のVue全家桶开发电商管理系
• 小程序开发公司,挑战百日学习计划第33天（javas	• 10分钟回顾CSS媒体查询
• 简单谈一谈前后端分离	• Java如何实现二维码？【附源码】

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享

• Esp8266天猫精灵_RGB灯_非点灯平台	• STM32F103 串口1和串口3对发数据配合蓝牙模块
• TMS570学习【1】了解什么是TMS570	• 新闻稿 \| Qt公司收购froglogic公司以巩固市场领
• [Java]SpringBoot2整合mqtt服务器EMQ实现消息订	• 苹果群控投屏同步操作原理及运用的平台APP分享
• STM32查询式按键输入[直接用寄存器]	• Ubuntu系统 USB设备端口绑定
• 2021-04-14 第四次按键输入实验	• Flutter扫码功能完美实现