JavaScript 速成计划（杂项详解：JS操作HTML 与 CSS、异常、事件）!

作者：浪子花梦，一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西，如变量、运算符、分支、循环、函数等等 . . .

其他二篇文章如下：

1. 超强的入门文章 ！！！ JavaScript 速成计划第一篇（基础语法详解）!
2. 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）!

---

文章目录

• JavaScript 对 HTML 与 CSS 操作 （简单介绍，对象部分详细讲解）
• 对元素的事件监听
• 异常处理机制
• 常用事件
• 事件处理的几种方式
• 事件参数 event 的用法

---

JavaScript 对 HTML 与 CSS 操作

我们通过 js 可以对界面上的元素进行访问，当然也可以改变元素的内容，下面我们来看看如何改变吧 . . .

js如何对 html的访问

先准备如下两个元素：

<a id="aid" href="http://www.baidu.com">dasds</a>
<p id="pid">Hello</p>

效果如下所示：

当我们点击一个按钮的时候，就改变 a元素中的索引地方，改变 p元素中的内容，代码实现如下所示：

<button onclick="demo()">点我</button>
<script>
	// html
	function demo(){
		document.getElementById("pid").innerHTML = "World";
		document.getElementById("aid").href = "https://blog.csdn.net/weixin_42100963";        
	}
</script>

其中，我们通过 getElementById 这个方式获取到指定id的元素，然后将其对应的属性进行改变 . . .

最终效果如下所示：

js 对 css 的访问

首先，我们准备一个 css样式给 div，这样我们能明显的看出效果，如下所示：

.div{
    width: 300px;
    height: 300px;
    background-color: aqua;
 }

div 如下所示：

<div id="divid" class="div">
	langzihuameng
</div>

我们需要做的就是按下一个按钮，然后改变 div的背景，与其中字体的颜色：

<button onclick="demo()">点我</button>

<script>
// css
function demo(){
	document.getElementById("divid").style.background = "red";
	document.getElementById("divid").style.color = "yellow";       
}
</script>

效果如下所示：

---

对元素的事件监听

使用事件监听添加事件，有着许多的好处，比如我们需要将事件处理器换一个名字，只需要改变一个地方就可以了，而且，我们可以为一个事件，添加多个事件处理器 . . .

如下所示（没有使用事件监听）：

<button id="bid">点击</button>

<script>
	var v = document.getElementById("bid");

	// 给按钮添加一个事件 
	v.onclick = function(){Hello()};
	v.onclick = function(){World()};
        
	function Hello(){
		alert("Hello");
	}

	function World(){
		alert("World");
	}

</script>

效果如下所示：

我们发现只弹出一个框框，因为后面的那个方法将前面的那个方法覆盖掉了，所以这也是一种缺点，所以我们的事件监听，就派上用场了，如下所示：

<button id="bid">点击</button>

<script>
var v = document.getElementById("bid");

// 给按钮添加一个事件监听
v.addEventListener("click", Hello);
v.addEventListener("click", World);
        
function Hello(){
	alert("Hello");

	// 取消对事件的监听
	v.removeEventListener("click",Hello);
}

function World(){
	alert("World");

	v.removeEventListener("click",World);
}

</script>

效果如下所示：

当我们点击按钮之后，就不能再点击按钮了，因为我们调用了removeEventListener 方法，取消了对事件的监听 . . .

---

异常处理机制

异常机制是非常重要的一个部分，这方面有其它语言基础的朋友非常的好理解，下面我们就通过一个例子来研究一下异常处理机制是怎么样使用的，如下所示：

首先，我们准备一个文本框和一个按钮，按下按钮时，判断文本框中是否有内容，如果没有，则引发异常进行处理：

<input id="txt" type="text">
<input id="btn" type="button" value="按钮" onclick="demo()">

demo（）方法如下所示：

<script>
	function demo(){
		var v = document.getElementById("txt");
		try{
			if(v.value == ""){
				throw "请在输入框输入一个值";		// 引发异常
			}
			else{
				alert("您的输入框中已经有值啦！");
			}
		}
		catch(err){									// 捕获异常
			alert(err);
		}
	}
</script>

效果如下所示：

---

常用事件

我们有许多常用的事件，比如：点击、移动、加载等等，掌握这些常用的事件对于我们来说是至关重要的事，希望大家可以好好学习 . . .

常用的事件如下所示：

下面我将详细的讲解如上列出的几种事件，如有不懂的，可以留言 . . .

1）onclick 点击事件（点击按钮改变其中的内容）：

<button onclick="demo(this)">hello</button>
<script>
	function demo(ooj){
		ooj.innerHTML = "huameng";
	}
</script>

效果如下所示：

其中注意的是，点击方法之中，我们传送的是 this这个参数，表示的是将 button这个对象作为参数进行传送 . . .

.

2）onmouseover / onmouseout 鼠标进入与移开事件（一个区域，进入和离开都改变其中的内容）：
首先准备一个css文件，看的明显一点：

.div{
    width: 100px;
    height: 100px;
	background-color: aqua;
}

html js 代码如下：

<div class="div" onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
<script>
	function onOver(ooj){
		ooj.innerHTML = "Hello";
	}
function onOut(ooj){
	ooj.innerHTML = "World";
}
</script>

效果如下所示：

.

3）onchange 文本内容改变事件（改变文本内容，弹出框框）：

<input type="text" onchange="alert('你的内容被改变了？  ' + this.value)">

效果如下所示：

.

4）onselect / onfocus / onblur 文本框内容选中事件、光标聚集事件、光标离开事件（这三个事件我们都放在一个文本框中演示）：

<input type="text" onselect="demo1(this)"
	onfocus="demo2(this)" onblur="demo3(this)">
<script>
	function demo1(ooj){
		ooj.style.background = "red";
	}
	function demo2(ooj){
		ooj.style.background = "blue";
	}
	function demo3(ooj){
		ooj.style.background = "green";
	}
</script>

效果如下所示：

.
5）onload 网页加载事件（此事件比较重要，当网页加载时做的一些事情）：

<script>
	function demo(){
		alert("网页已经加载完成了!");
	}
</script>

我们当 body加载时，调用这个函数：

效果如下所示：

---

事件处理的几种方式

添加事件处理一共有如下几种方式，我会作示例分别的讲解：

1）直接添加到HTML 结构之中：

<button onclick="demo()">按钮</button>

<script>
	function demo(){
		alert("Hello");
	}   
</script>

效果如下所示：

.
2）DOM0 级事件处理（赋值给元素的属性）：

<button id="btn">按钮</button>

<script>
	var v = document.getElementById("btn");
	v.onclick = function(){alert("Hello")};     // 会被覆盖掉
	v.onclick = function(){alert("World")}; 
</script>

效果如下所示：

.
3）DOM2 级事件处理（最常用的方法，点击按钮时弹出三个框，只能弹一次）：

<button id="btn">按钮</button>

<script>
	//DOM2级事件  使用事件监听器
	var v = document.getElementById("btn");
	v.addEventListener("click", demo1);
	v.addEventListener("click", demo2);
	v.addEventListener("click", demo3);

	function demo1(){
		alert("huameng 111");
		v.removeEventListener("click", demo1);
	}

	function demo2(){
		alert("huameng 222");
		v.removeEventListener("click", demo2);
	}
        
	function demo3(){
		alert("huameng 333");
		v.removeEventListener("click", demo3);
	}
</script>

事件监听的第三个参数是关于事件冒泡的概念，我将在下方讲解，此处就不探讨了 . . .

效果如下所示：

.
4）IE事件处理程序（不是太流行，和事件监听用法差不多，常见的用法如下所示）：

<button id="btn">按钮</button>

<script>
	// 版本 < IE 8  使用 attachevent
	var v = document.getElementById("btn");
	var flag = 0;
	if(v.addEventListener){
		v.addEventListener("click", demo);
		flag = 1;
	}
	else if(v.attachevent){
		v.attachevent("onclick", demo);
		flag = 2;
	}
	else{
		v.onclick = demo();
	}
	function demo(){
		alert("huameng 666");
		switch(flag){
			case 1: v.removeEventListener("click", demo); break;
			case 2: v.detachevent("onclick", demo); break;
		}
	} 
</script>

效果如下所示：

---

事件参数 event 的用法

我们可以利用 event来做一些事情，如下所示：

1）type、target：

<button id="btn">点击</button> 
   
<script>
	var v = document.getElementById("btn"); 
	v.addEventListener("click", demo); 
	function demo(event){
		alert(event.type);              // 事件类型
		alert(event.target);            // 事件目标
	} 
</script>

效果如下所示：

.
2）stopPropagation 阻止事件的冒泡：
如果我们有其它框架的基础，那么我们很容易理解冒泡的原理，当我们发生一个事件时，这个事件会一直研着它的父类一直上升，直至顶层元素为止，假如我们没有阻止事件的冒泡，则效果如下所示：

<div id="divid" class="div">
	<button id="btn">点击</button>
</div>
   
<script>
	var v = document.getElementById("btn");
	var b = document.getElementById("divid");
       
	v.addEventListener("click", demo);
	b.addEventListener("click", demo);
         
	function demo(event){
		alert(event.type);              // 事件类型
		alert(event.target);            // 事件目标
		// event.stopPropagation();      // 阻止事件冒泡
	} 
</script>

当我们点击按钮时， div的点击事件也会被触发，效果如下所示：

当我们加上阻止事件冒泡的方法之后，div的点击事件就不会自动的执行了：

event.stopPropagation();

效果如下所示：

.
3）preventDefault 阻止事件默认行为：

<a id="aid" href="http://www.baidu.com">链接百度</a>
   
<script>
	var s = document.getElementById("aid");

	s.addEventListener("click", test);
       
	function test(event){
		event.stopPropagation();        // 阻止事件冒泡

		event.preventDefault();         // 阻止事件默认行为
	}

</script>

当我们点击链接时，默认行为是链接到百度，当我们阻止事件的默认行为后，就链接不了了

效果如下所示：

.
.
.

---

本文地址：https://blog.csdn.net/weixin_42100963/article/details/107341212