JavaScript详细介绍_绑在标签上的事件怎么拿到事件对象-CSDN博客

本文链接：https://blog.csdn.net/debugEDM/article/details/107848618

JavaScript基础

JavaScript概述

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]

javaScript的作用:

js作为html中的脚本语言，主要负责一些动态交互，如实现表单验证、事件，轮播图等一些动态的效果。

JavaScript的组成：

js主要由三大部分组成： ECMAScript(javascript的基础语法)、DOM(文档对象模型)、BOM（浏览器对象模型）

javaScript在html中的引入方式：

如果需要在html中使用javascript，此时就需要将javascript引入到html文件中，引入方式共有三种：

行内式：

将js脚本写在标签内，作为事件的属性或者是脚本。

语法： <标签名事件名=“js脚本”></标签名>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js引入的行内式</title>
	</head>
	<body>
		
		<button onclick="javascript:var num = 10; alert('变量的值是：' + num);">点我右提示</button>
	</body>
</html>

注意：脚本开始的javascript是可以省略的，事件的属性为js脚本，多条语句之间使用封号隔开。使用较少。

内部式:

在html文件中通过script标签里引入js脚本，将js脚本写入script标签中；

语法：

<script>
  js脚本片段；
</script>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js引入的行内式</title>
		<script>
			var num = 10;
			/* 页面提示弹窗函数！！*/
			alert("变量num的值是：" + num);
			/* 将日志信息打印到浏览器控制台，即console中*/
			console.log("我是浏览器控制台输出的内容" + num);
		</script>
	</head>
	<body>
			
	</body>
</html>

说明： script标签通常放在head标签中，但是它也可以放在html页面的任何其他位置。

外链式（外部式）：

将js单独写成js文件，然后在html中通过script标签的src属性来引入外部的js文件；

语法：

<script src="js文件的地址" type="text/javascript"></script>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部式</title>
		<script type="text/javascript" src="../js/demo.js" ></script>
	</head>
	<body>
	</body>
</html>

特别注意：在引入js文件的script标签中不能写js脚本，否则不会被执行。

JavaScript的基础语法（ECMAScript）

1、变量的定义

语法： var 变量名；或者 var 变量名 = 变量值；

说明： var是定义变量的关键字，每个变量声明前都需要将该关键字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ECMAScript</title>
		<script>
			/* 先定义再赋值*/
			var num ;
			num = 100;
			/* 定义的时候进行初始化*/
			var sum = 1000;
			
			console.log(num + " : " + sum);
		</script>
	</head>
	<body>
	</body>
</html>

注意：变量的名字化语法规则和Java一致，js也严格区分大小写；一条语句后面的封号可以省略，但是这条件语句后面不能再写新的语句，如果有就不能省略。

2、js中的变量数据类型

主要分为基本数据类型和引用数据类型：

基本数据类型：

number : 数字类型；

String: 字符串类型；

Boolean: boolean类型只有两个值true和false;

null：只有一个字null，表示null;

undefined: 未定义的，如定义变量没有赋值，然后去获取变量的值，此时就是undefined，该类型是由null派生而来，因此在比较时，两个值是相等的。

引用数据类型：

在就是中内置的对象或者是已经封装的对象，比如数组、Math等等都属于引用数据类型，即除基本类型外的其他类型都是引用数据类型。

获取js中变量数据类型的函数： typeof(变量) 或者 typeof 变量；

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ECMAScript</title>
		<script>
			/* 先定义再赋值*/
			var num ;
			console.log(num);
			console.log(undefined == null); // true
			
			/*获取变量的数据类型 */
			var num1 = 20;
			console.log(typeof num1); // 我是单行注释
			var st = "hello world";
			console.log("st的数据类型为： " + typeof(st));			
		</script>
	</head>
	<body>
	</body>
</html>

3、js中的运算符

1、算数运算符： + - * / % ++ –

2、赋值运算符： = += -= *= /= %=

3、条件运算符： == 、 > 、 < 、 >= 、 <= 、 != 、===

== 和=== 之间的区别：

== 只比较内容（值是否相等），如果值相等就返回true,否则返回false;

===: 首先比较值是否相等，如果相等再比较数据类型是否相等，如果相等才返回true,否则返回false;

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js的运算符</title>
	</head>
	<body>
		<script>
			var num = "23";
			var num1 = 23;
			console.log(typeof(num) + " :" + typeof(num1));
			console.log("num==num1:" + (num == num1));  //true
			console.log("num===num1:" + (num === num1)); //false
			
		</script>
	</body>
</html>

4、逻辑运算符： || 、 && 、！

5、三元运算符： var num =（条件表达式）？值1 ：值2；

练习：定义三个变量num1 = 23； num2 = 34； num 3 = 50；

求三个数中的最大值；

4、js中的选择结构

if(){}

if(){} else {}

if() {} else if(){} else if(){} else{}

switch(变量){

case 值1：语句； break;

case 值2：语句； break;

case 值3：语句； break;

default: 语句；

}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择结构</title>
	</head>
	<body>
		<script>
			var num = 4;
			
			switch(num){
				case 1: alert("星期一"); break;
				case 2: alert("星期二"); break;
				case 3: alert("星期三"); break;
				case 4: alert("星期四"); break;
				case 5: alert("星期五"); break;
				case 6: alert("星期六"); break;
				case 7: alert("星期天"); break;
				default: alert("输入错误！！")
			}
			
		</script>
	</body>
</html>

5、数组

用来存放数据的集合；

定义：

1、var 数组 = [元素1，元素2，…];

2、有长度的数组的定义:

var 数组名 = new Array(长度);

3、空数组的定义：

var 数组名 = new Array();

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组</title>
		<script>
			/* 数组下标从0开始，js数组可以存放任何类型的数据*/
			var num = [12,34,"234",true];
			/* 可以通过数组的下标来获取值*/
			console.log(num[1]);
			//定义一个初始长度为10的数组，数组的默认值为undefined
			var arr1 = new Array(10);
			console.log(arr1[0]);
			//获取数组长度  length属性
			console.log(arr1.length);
			//定义一个空数组
			var arr2 = new Array();
			console.log("空数组的长度 ： " + arr2.length);
			arr2[0] = 10;
			arr2[3] = 20;
			console.log(arr2[0] + " : " + arr2[3]);
			console.log("arr2的长度： " + arr2.length);
			
		</script>
	</head>
	<body>
	</body>
</html>

总结：

1、对于js中的s数组元素是没有类型限制的；

2、js中的数组是没有固定长度的，可以通过length属性来获取数组实际存放数据的长度。

二维数组: 实际就是一个存放一维数组的一维数组。如下：

var 数组名 = [[23,34,45],[“234”,“hel”],[34,676]];

获取二维数组中的值：数组名[1][1]

	/* 二维数组*/
	var arr4 = [[23,34,45],["234","hel"],[34,676]];
	console.log("获取二维数组中的元素：" + arr4[1][1]);

6、js中的循环结构

for(初始值；判断条件；步长){

循环体；

}

while(判断条件){

循环体；

}

do{

循环体；

}while(判断条件);

数组的遍历：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数组的遍历</title>
		<script>
			var arr = [12,34,56,true,"abc"];
			
			for(var i = 0; i < arr.length; i ++){
				console.log(arr[i]);
			}
			console.log("================");
			//js中的foreach；其中i 表示的是数组的下标
			for(var i in arr){  //主要针对数组的遍历
				console.log(i + " : " +  arr[i]);
			}
			
		</script>
	</head>
	<body>
	</body>
</html>

7、js中的函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数的定义的两种语法格式：

普通函数：

语法：

function 函数名（参数1，参数2）{

函数体；

return 返回值；

}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>普通函数的定义</title>
		<script>
			/* 没有参数没有返回值的函数*/
			function sum(){
				var num1 = 10;
				var num2 = 100;
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
			}
			//函数的调用
			sum();
			
			/* 有参数没有返回值的函数,在编写有参数的函数时，不需要指定变量的类型*/
			function sum1(num1,num2){
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
			}
			//函数的调用
			sum();
			
			//有参数函数的调用
			sum1(50,20);
			
			
			/* 有参数有返回值的函数,在编写有参数的函数时，不需要指定变量的类型*/
			function sum2(num1,num2){
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
				return sum;
			}
			/*有参数有返回值的函数的调用，并接收返回值*/
			var sum = sum2(1000,500);
			alert(sum);
		</script>
	</head>
	<body>
	</body>
</html>

匿名函数：

没有函数名的函数；

语法： function（参数列表）{

函数体；

}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>普通函数的定义</title>
		<script>
			/* 没有参数没有返回值的函数*/
			var fu = function(){
				var num1 = 10;
				var num2 = 100;
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
			}
			
			//匿名函数的调用
			fu();
			
			/* 没有参数没有返回值的函数*/
			var fu1 = function(num1,num2){
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
			}
			
			//匿名函数的调用
			fu1(200,300);
			/* 没有参数没有返回值的函数*/
			var fu3 = function(num1,num2){
				var num1 = 10;
				var num2 = 100;
				var sum = num1 + num2;
				console.log("两个数的和是：" + sum);
				return sum;
			}
			
			//匿名函数的调用
			var sum = fu3(300,800);
			console.log("获取的返回值是：" + sum);
		</script>
	</head>
	<body>
	</body>
</html>

8、事件

事件是在用户操作html时可以被 JavaScript 侦测到的行为。

事件的组成：

触发一个事件，整个事件有三部分组成，称之为事件的三要素，分别是：事件源、事件名、事件函数。

事件源：触发事件的位置称为事件源。即触发事件的html元素。

事件名称：事件的名称；

事件函数：事件被触发需要执行的代码块或者是函数。

事件名和事件源绑定的三种方式：

1、直接在事件源中绑定事件：

语法：

<标签  事件名=“事件函数”></标签>

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		
			function changText(ob){
				ob.innerText = "我被点击了！";
			}
			
		</script>
	</head>
	<body>
		<!-- 在事件源中绑定事件函数，事件名作为事件源的属性，而事件函数作为 属性值被调用-->
		<button onclick="changText(this)">按钮</button>
	</body>
</html>

2、通过javascript获取事件源对象绑定

通过javascript获取事件源对象，然后通过事件源对象找到属性，通过匿名函数的方式将事件源，事件名和事件函数绑定。

语法：

事件对象.事件名 = function(){ //事件函数
    函数体；
}

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!-- 在事件源中绑定事件函数-->
		<button id="but">按钮</button>
		
		<script>
			var bu = document.getElementById("but");
			bu.onclick = function(){
				bu.innerText = "第二种绑定方法";
			}
		</script>
	</body>
</html>

3、第三种绑定方式：

通过js来获取事件源对象，然后将已经定义好的普通函数和事件源绑定在一起。

语法：

事件源对象.事件名 = 函数名；

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!-- 在事件源中绑定事件函数-->
		<button id="but">按钮</button>
		
		<script>
			var but = document.getElementById("but");
			function fun(){
				but.innerText = "第三种绑定方式";
			}
			
			//第三种绑定方式，注意函数名不要括号
			but.onclick = fun;
		</script>
	</body>
</html>

事件实例：

1、表单事件：

常见表单事件注意有，onfocus 获取焦点、 onblur : 失去焦点、onchange: 域中的值改变。

onfocus: 光标在input输入框中跳动。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text" name="username" id="put" /><br>
	</body>
	<script>
		var aa = document.getElementById("put");
		aa.onfocus = function(){
			console.log("获取焦点===");
		}
		
	</script>
</html>

注意：获取焦点只有输入域input才有，当点击到输入域，光标跳动表示获取焦点。

失去焦点： onblur


		aa.onblur = function(){
			console.log("失去焦点==");
		}

改变事件：onchange，即输入中的值发生变化时触发：

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		姓名：<input type="text" name="username" id="put" /><br>
		
		<select id="sel">
			<option>小学</option>
			<option>初中</option>
			<option>高中</option>
		</select>
	</body>
	<script>
		var aa = document.getElementById("put");
		aa.onfocus = function(){
			console.log("获取焦点===");
		}
		
		aa.onblur = function(){
			console.log("失去焦点==");
		}
		
		aa.onchange = function(){
			
			console.log("值发生了变化： " + aa.value);
		}
		
		var se = document.getElementById("sel");
		
		se.onchange = function(){
			console.log("发生变化" + se.value);
		}
	</script>
</html>

鼠标事件

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div id="div"></div>
	</body>
	<script>
		var div = document.getElementById("div");
		div.onmouseenter = function(){
			div.style.backgroundColor = "#0000FF";
			console.log("鼠标进入");
		}
		
		div.onmouseleave = function(){
			div.style.backgroundColor = "greenyellow";
			console.log("鼠标离开");
		}
	</script>
</html>

<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	姓名：<input type="text" name="username" id="put" /><br>
	
	<select id="sel">
		<option>小学</option>
		<option>初中</option>
		<option>高中</option>
	</select>
</body>
<script>
	var aa = document.getElementById("put");
	aa.onfocus = function(){
		console.log("获取焦点===");
	}
	
	aa.onblur = function(){
		console.log("失去焦点==");
	}
	
	aa.onchange = function(){
		
		console.log("值发生了变化： " + aa.value);
	}
	
	var se = document.getElementById("sel");
	
	se.onchange = function(){
		console.log("发生变化" + se.value);
	}
</script>


鼠标事件

实例：

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div id="div"></div>
	</body>
	<script>
		var div = document.getElementById("div");
		div.onmouseenter = function(){
			div.style.backgroundColor = "#0000FF";
			console.log("鼠标进入");
		}
		
		div.onmouseleave = function(){
			div.style.backgroundColor = "greenyellow";
			console.log("鼠标离开");
		}
	</script>
</html>