做者:浪子花梦,一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西,如变量、运算符、分支、循环、函数等等 . . .javascript
其余二篇文章以下:css
咱们经过 js 能够对界面上的元素进行访问,固然也能够改变元素的内容,下面咱们来看看如何改变吧 . . .html
先准备以下两个元素:java
<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的元素,而后将其对应的属性进行改变 . . .web
最终效果以下所示:
编程
首先,咱们准备一个 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来作一些事情,以下所示:
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>
当咱们点击连接时,默认行为是连接到百度,当咱们阻止事件的默认行为后,就连接不了了
效果以下所示:
. . .