JavaScript-事件入门

最新推荐文章于 2025-04-27 10:19:20 发布

原创最新推荐文章于 2025-04-27 10:19:20 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

本文深入讲解JavaScript中三种事件绑定的方法：内联绑定、标准函数绑定及事件监听绑定，通过实例演示如何在网页元素上绑定点击事件，同时介绍了常见事件类型如onclick、onblur等。

在这里插入图片描述
三种绑定事件的方式
单击事件：οnclick=“函数（）”

<!DOCTYPE html>
<html>
<head>
	<title>事件的使用</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/事件的使用.css">
	
</head>
<body>
       <!-- javascript绑定事件的第一种方式，在标签内部绑定 不建议使用，有缺点：拿不到事件对象 打破了三层分离 这种绑定方式，事件源默认需要使用this传递，否则this执行window
       解决办法加this -->
      <!--  <button onclick="text（this）">点击你就知道</button> -->
       **<!-- //第二种事件绑定方式 -->**
       <button  id="btn">点击你就知道</button>
       <script type="text/javascript" src="./js/事件的使用.js"></script>
</body>
</html>

// function text(node){

// }
/*!
 * this指针比较特殊，默认情况（全局情况下）this指的是window对象；在事件中，this
 * 指向事件的触发者，也就是事件源；
 * 在类中，this执行对象的本身
 */

// 第二种方式  绑定了一个点击事件
/*!
 * [btn description]符合三层分离；可以拿到事件对象；在这种绑定方式中，事件对象默认就是函数
 * 第一个参数
 * @type {[type]}
 */
let btn=document.getElementById('btn');

btn.onclick=function（e）{
     console.info(e);
     //反向拿到事件源
     console.log(e.target);
}

事件监听绑定

<!DOCTYPE html>
<html>
<head>
	<title>事件监听方式</title>
	<meta charset="utf-8">
	
</head>
<body>
      <button id="btn">点击</button>
      <script type="text/javascript">
          //事件监听方式
          var btn=document.getElementById("btn");
          //添加事件监听
          btn.addEventListener("click",function(e){
          	console.info(e);
          });//第一个参数是事件名称,第二个是事件委托，第三个是事件对象，第四个事件冒泡

	</script>
</body>
</html>

在这里插入图片描述
onabort 图像加载被中断
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面

表单注册

<!DOCTYPE html>
<html>
<head>
	<title>表单注册</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/表单注册.css">
	
</head>
<body> 
       <input id="op" type="txet" placeholder="请输入名称"><span id="info"></span>
       <script type="text/javascript" src="./js/表单注册.js"></script>
</body>
</html>

window.onload=function(){

var op=document.getElementById("op");
console.info(op);
op.onblur=function(){
	if(this.value.trim().length==0){
		document.getElementById("info").innerHTML="<span style='color:red'>对不起，输入不能为空</span>";
	}else{
		document.getElementById("info").textContent=""
	}
}
}

在这里插入图片描述