【JavaScript】JS中的事件

最新推荐文章于 2024-04-25 20:29:33 发布

言曦

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量148

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/wangke1998/article/details/122939680

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是事件？

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

onload加载完成事件：页面加载完成之后，常用于做页面js代码的初始化操作

onclick单击事件：常用于按钮的点击响应操作。

onblur失去焦点事件：常用于输入框失去焦点之后验证其输入内容是否合法。

onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作。

onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法。

什么是事件的注册（绑定）？

其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

事件注册又分为静态注册和动态注册两种

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册。

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注册。

动态注册的基本步骤：

获取标签对象
标签对象.事件名=function(){}

9.1 onload加载完成事件

静态注册方式：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">

   function onloadFun(){

   alert("静态注册onload事件，所有代码")

   }

</script>

</head>


<body onload="onloadFun()">


</body>

</html>

动态注册方式：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

   window.onload=function(){

   alert("动态onload事件")

   }

   
</script>

</head>


<body>

</body>

</html>

9.2 onclick事件

document是JavaScript语言提供的一个对象（文档），指整个屏幕。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

   function onclickFun(){

   alert("静态onclick事件")

   }

   window.onload=function(){

   var btn=document.getElementById("btn01");

   btn.onclick=function(){

   alert("动态onclick事件");

   }

   }  

</script>

</head>



<body>

<button onclick="onclickFun();">按钮1</button>

<button id="btn01">按钮2</button>

</body>

</html>

9.3 onblur事件（失去焦点事件）

console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制台打印输出，用于测试使用。

log()是打印的方法。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

  function onBlurFun(){

  console.log("静态注册失去焦点事件")

  }

    

  window.onload =function(){

  var ps=document.getElementById("ps1");

  ps.onblur=function(){

  console.log("动态注册失去焦点事件")

  }

  }

</script>

</head>



<body>

用户名:<input type="text" onblur="onBlurFun();"><br>

密码:<input id="ps1" type="text">

</body>

</html>

9.4 onchange()内容发生改变事件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>



<script type="text/javascript">

  function onChangeFun(){

  alert("(静态注册)你的女神改变了")

  }

    

  window.onload =function(){

  var selectObj=document.getElementById("select1");

  selectObj.onchange=function(){

  alert("(动态注册)你的男神改变了")

  }

  }

</script>

</head>



<body>

请选择你心中的女神:

<select onchange="onChangeFun();">

     <option>刘亦菲</option>

     <option>刘诗诗</option>

     <option>张慧雯</option>

     <option>宋祖儿</option>

</select>



请选择你心中的男神:

<select id="select1">

     <option>李健</option>

     <option>乔振宇</option>

     <option>钟汉良</option>

     <option>霍建华</option>

</select>



</body>

</html>

9.6 onsubmit表单提交事件

return false可以阻止表单提交

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>


<script type="text/javascript">

  function onSubmitFun(){

  alert("(静态注册)表单提交---内容不合法")

  return false;

  }

   

  window.onload=function(){

  var obj=document.getElementById("form01");

  obj.onsubmit=function(){

  alert("(动态注册)表单提交---内容不合法");

  return false;  

  }


  }


</script>

</head>


<body>

<form action="http://localhost:8080" method="get" onsubmit="return onSubmitFun()">

     <input type="submit" value="静态注册">

</form>



<form action="http://localhost:8080" id="form01">

     <input type="submit" value="动态注册">

</form>



</body>

</html>