作者：浪子花梦，一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西，如变量、运算符、分支、循环、函数等等 . . .
其他二篇文章如下：
- 超强的入门文章 ！！！ JavaScript 速成计划第一篇（基础语法详解）!
- 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）!
文章目录
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
