js事件

最新推荐文章于 2023-02-03 17:43:04 发布
最新推荐文章于 2023-02-03 17:43:04 发布
阅读量256 收藏 2
点赞数
分类专栏： Javascript 文章标签： javascript 鼠标事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yiren_99/article/details/47840557
版权

什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表：

鼠标单击事件( onclick ）

onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：

<html>
<head>
   <script type="text/javascript">
      function add2(){
        var numa,numb,sum;
        numa=6;
        numb=8;
        sum=numa+numb;
        document.write("两数和为:"+sum);  }
   </script>
</head>
<body>
   <form>
      <input name="button" type="button" value="点击提交" οnclick="add2()" />
   </form>
</body>
</html>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

鼠标经过事件（onmouseover）

鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

例子：当鼠标经过"确定"按钮后，调用message()函数，弹出消息对话框。 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" οnmοuseοver="message()"/>
</form>
</body>
</html>

鼠标移开事件（onmouseout）

鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

当把鼠标移动到"登录"按钮上，然后再移开时，触发onmouseout事件，调用函数message()；参考上一个程序

光标聚焦事件（onfocus）

当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。

例子当下拉列表得到焦点时，调用message()函数，就弹出对话框“"请选择，您现在的职业！” 

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
    function message(){
	  alert("请选择，您现在的职业！");
	}
  </script>
</head>
<body>
请选择您的职业：<br>
  <form>
    <select name="career" οnfοcus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>

失焦事件（onblur）

onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

内容选中事件（onselect）

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

例子：当选中个人简介文本框中文字时，触发onselect事件，并弹出对话框。 

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
    alert("您触发了选中事件！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" οnselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>

文本框内容改变事件（onchange）

通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

例子：实现改变文本框内容时，调用message()函数，弹出对话框“您改变了文本内容！”。 

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
  function message(){
    alert("您改变了文本内容！"); }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" οnchange="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>

加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。

注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

          2. 此节的加载页面，可理解为打开一个新页面时。

例子：实现加载页面时，弹出对话框“加载中，请稍等…”。 
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body οnlοad="message()">
  欢迎学习JavaScript。
</body>
</html>

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">   
     window.onunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script>   
</head>
<body>
  欢迎学习JavaScript。
</body>
</html>

编程练习

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){
    var text1=parseInt(document.getElementById("txt1").value);
    var text2=parseInt(document.getElementById("txt2").value);
    var select=document.getElementById("select").value ;
    var num=0;
    switch(select){
        case "+":num=text1+text2;break;
        case "-":num=text1-text2;break;
        case "*":num=text1*text2;break;
        case "/":num=text1/text2;break;
    }
    
    document.getElementById("fruit").value=num;
 
    //获取第一个输入框的值
    //获取第二个输入框的值
	//获取选择框的值
	//获取通过下拉框来选择的值来改变加减乘除的运算法则
    //设置结果输入框的值 
    
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
		<option value='+'>+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
   </select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = '  οnclick="count()" /> <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>
简单计算器功能







_米粒儿_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript事件处理
qq_60837087的博客
11-02 1152
js可以侦测到的行为（用户在网页上执行某种操作），被称为事件处理。 例如：页面加载（浏览器打开页面）、单击鼠标左键、鼠标进入某个区域、焦点事件、键盘事件。
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
你难忘的
09-23 3239
提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value； 任务 第一步： 创建构建运算函数count()。 第二步： 获取两个输入框中的值和获取选择框的值。 提示：document.getElementById( id名 ).value 获取或设置 id名的值。 第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。 提示：使用switch判
用javascrip实现一个简单的加减乘除计算器
热门推荐
ssisse的博客
04-19 1万+
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 事件 function count(){ //获取第一个输入框的值 var a=parseInt(document.getElementById('txt1').value); //获取第二个输入框的 var b=pa
JavaScript--编程练习1
weixin_30693683的博客
07-23 283
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value； ==============练习题================...
JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。...
weixin_30241919的博客
06-14 1330
编程练习 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。 提示：获取元素的值设置和获取方法为：例：赋值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value； 任务 ...
JS实现一个简单的计算器
weixin_34117211的博客
04-24 235
使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。效果如上：第一步： 创建构建运算函数count()。第二步：获取两个输入框中的值和获取选择框的值。提示：document.getElementById( id名 ).value 获取或设置 id名的值。第三步： 获取通过下拉框来选择的值来改变加减乘除的运算法则。提示：使用...
javaScript事件轮询
最新发布
weixin_61721830的博客
02-03 1213
当主线程的同步任务执行完毕之后，开始执行微任务队列的所有微任务，微任务执行完成，执行宏任务队列里面的所有宏任务，执行完成主线程询问任务队列是否还有等待的任务，如果有的话则继续进入主线程执行，以上步骤的循环重复执行就是事件轮询，然后继续执行主线程任务，当异步线程执行完毕，判断异步任务的类型，异步任务可分为宏任务和微任务，不同的任务进入不同的队列，等待调用，首先主线程读取js代码，此时是同步环境，当主线程检测到异步操作时，会将异步代码交给其他异步线程处理，常见的宏任务：定时器，微任务:Promise。
jem.js:Javascript 事件管理器
06-04
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
EventDispatcher,js事件派发器,javascript事件派发器
12-28
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
js事件监听机制(事件捕获)总结
12-04
JavaScript事件监听机制是前端开发中不可或缺的一部分，它用于处理页面元素的各种交互，如点击、鼠标移动等。在本文中，我们将深入探讨事件监听，特别是事件捕获这一概念，以及如何在不同的浏览器环境中实现兼容。 ...
JavaScript事件学习小结(五）js中事件类型之鼠标事件
11-22
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
JSListener:一个非常小的 javascript 库，用于广播和监听自定义 javascript 事件
06-25
一个非常小的 javascript 库，用于广播和侦听自定义 javascript 事件。 它允许对同一事件的多个侦听器进行侦听和调用。 使用它非常强大但很容易......例如： //specify functions to call function callMe ( msg ...
js内置对象（Array数组对象）
_米粒儿_的博客
08-21 4172
Array 数组对象 数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的 数组定义的方法： 1. 定义了一个空数组: var  数组名= new Array(); 2. 定义时指定有n个空元素的数组： var 数组名 =
js的DOM(节点属性)
_米粒儿_的博客
08-21 2372
节点属性 在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ： 1. nodeName : 节点的名称 2. nodeValue ：节点的值 3. nodeType ：节点的类型 一、nodeName 属性: 节点的名称，是只读的。 1. 元素节点的 nodeNam
js 的一维数组，二维数组
_米粒儿_的博客
08-21 2135
什么是数组 我们知道变量用来存储数据，一个变量只能存储一个内容。假设你想存储10个人的姓名或者存储20个人的数学成绩，就需要10个或20个变量来存储，如果需要存储更多数据，那就会变的更麻烦。我们用数组解决问题，一个数组变量可以存放多个数据。数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值。 如何创建数组 使用数组之前首先要
js的DOM（文档对象模型）获取节点
_米粒儿_的博客
08-21 2079
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先来看看下面代码: 将HTML代码分解为DOM节点层次图: HT
js编程（增删学生信息）
_米粒儿_的博客
08-21 1841
编程练习 制作一个表格，显示班级的学生信息。 要求： 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮，能动态在最后添加一行 3. 点击删除按钮，则删除当前行 任务 第一步： 首先，我们创建删除函数，并在删除按钮上添加点击事件； 提示: 使用removeChild()。 第二步： 编写一个函数，
js流程控制语句（switch语句）
_米粒儿_的博客
08-21 1484
多种选择（Switch语句) 当有很多种选项的时候，switch比if else使用更方便。 语法： switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码块 2 break; ... case值n: 执行代码块 n break; default: 与 case值1 、 case值2...case值n 不同时
JavaScript事件处理详解
"JavaScript事件处理是网页交互的核心机制，允许开发者响应用户行为和浏览器状态变化。事件处理器是与特定事件关联的JavaScript代码，当事件发生时执行。本章涵盖了JavaScript中的事件处理概念、预定义事件处理器、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值