Web07--JavaScript基础03-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46612641/article/details/135781289

本文详细介绍了JavaScript中的事件绑定，包括常用事件如点击、焦点、加载和鼠标/键盘操作，以及如何通过函数处理这些事件。同时，展示了如何创建和使用自定义对象，以及全局函数如类型转换和字符编码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、事件绑定

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1.1 常用的事件

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	页面加载完成后立即发生

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

改变事件

事件	描述
onchange	域的内容被改变

表单事件

事件	描述
onsubmit	提交按钮被点击

事件案例一

<script>

  function demo(){
    //获取用户输入信息
    var name =  document.querySelector("#uid").value;
    //正则
    var regExp = new RegExp("^1[3456789]\\d{9}$");
    //判断是否满足正则
    if(regExp.test(name)){
      document.getElementById("spanid").innerText = "合法";
      //提交到后台，后台到db，查询有没有这个手机号，如果有，手机号已存在！！
    }else{
      document.getElementById("spanid").innerText = "不合法";
    }
  }

  function demo2(){
    alert("我是聚焦事件")
  }

</script>
</head>
<body>

  手机号：<input type="text" name="username" id="uid" onblur="demo()" /><span id="spanid"></span><br>
  密码：<input type="text" name="pwd" id="pid" onfocus="demo2()" /><span id="spanid"></span>

</body>

事件案例二

<script>

  window.onload = function(){
    //获取初始的图片
    var _img = document.getElementById("img");

    //绑定鼠标悬浮事件
    _img.onmouseover = function(){
      _img.src = "img/p4.jpg";
    }
    //绑定鼠标离开事件
    _img.onmouseout = function(){
      _img.src = "img/p3.jpg";
    }
  }
</script>
</head>
<body>

  <img src="img/p3.jpg" id="img" width="450px"/>

</body>

事件案例三

<script>
  window.onload = function(){
    //获取input框
    var _input = document.getElementById("iid");

    //绑定键盘按下事件
    _input.onkeydown = function(){
      _input.style.background = "yellow";
    }
    //绑定键盘松开事件
    _input.onkeyup = function(){
      _input.style.background = "red";
    }

  }
</script>
</head>
<body>

  <input type="text" id="iid" />

</body>

注意事项

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <script>
      function demo(){
        alert(444)
      }
    </script>

  </head>
  <body>
    <input type="button" value="提交" id="buttonid" onclick="demo()" />
    <!-- 
    约定大于配置： 很情况下在写代码，程序员都不约而同都这种写法
    前端人员现在都不这种写法，把所有的样式都用css来控制
    前端人员认为你不应该把事件写在标签中
    前端人员认为你应该把事件写js，事件是js所有拥有

    我们应该优先加载页面相关的样式，html结构
    我们应该把页面以外的尽量写在页面下面
    -->
    <center>
      <p>我爱你中国</p>
    </center>
  </body>

  <script>
    window.onload = function(){
      var buttonid =  document.getElementById("buttonid");
      buttonid.onclick = function(){
        alert(888)
      }
    }
  </script>
</html>

2、自定义对象

2.1 方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象1</title>
	</head>
	<body>
		<script>
			// 创建自定义对象
			let ob = new Object();
			
			ob.name = "小花";
			ob.age = 2;
			
			ob.mess = function(){
				console.log(this.name + "今年" + this.age + "岁了");
			}
			
			console.log(ob.name);
			console.log(ob.age);
			ob.mess();
			
		</script>
	</body>
</html>

2.2 方式二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象2</title>
	</head>
	<body>
		<script>
			// 创建自定义对象
			function Person(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				
				this.mess = function(){
					console.log(this.name + this.sex + this.age);
				}
				
			}
			
			let p = new Person("张三",18,"男");
			console.log(p.name);
			console.log(p.age);
			p.mess();
			
			// 添加属性
			p.address = "河南郑州";
			console.log(p.address);
			
		</script>
	</body>
</html>

2.3 方式三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义对象3</title>
	</head>
	<body>
		
		<script>
			var person = {
				name:"张三",
				age:18,
				sex:"男",
				
				mess:function(){
					console.log(this.name + "已经" + this.age + " 岁了。");
				}
			}
			
			console.log(person.name);
			console.log(person.age);
			person.mess();
		</script>
	</body>
</html>

3、全局函数

3.1 常用全局函数

3.1.1 字符串与number之间的转换

方法	说明
parseInt()	将字符串解析成一个整数。
parseFloat()	将字符串解析成一个浮点数。
isNaN()	判断是否是一个NaN类型的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类型转换</title>
	</head>
	<body>
		<script>
			console.log(parseInt("123.456"));			// 123
			console.log(parseInt("12abc3.456"));		// 12
						
			console.log(parseFloat("123.456"));			// 123.456
			console.log(parseFloat("123.45abc6"));		//123.45
						
			console.log(parseInt("abc123"));			// NaN : not a number 不是一个数字
			
			console.log(isNaN("abc123"));				// true
		</script>
	</body>
</html>

3.1.2 字符编码

方法	说明
encodeURI()	把字符串编码为 URI
decodeURI()	解码某个编码的 URI

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符编码</title>
	</head>
	<body>
		<script>
			// encodeURI()  字符串编码
			let name = "明下午两点偷袭珍珠港";
			let encodeName = encodeURI(name);
			console.log(encodeName);
			
			// decodeURI()  字符串解码
			let decodeName = decodeURI(encodeName);
			console.log(decodeName);
		</script>
	</body>
</html>