JavaScript随笔1

xiaoxiao2021-02-28  27

鼠标移开事件(onmouseout)

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

当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout事件,调用函数message(),代码如下:

光标聚焦事件(onfocus)

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

如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()。

运行结果:

失焦事件(onblur)

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

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message()。

运行结果:

内容选中事件(onselect)

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

如下代码,当选中用户文本框内的文字时,触发onselect 事件,并调用函数message()。

文本框内容改变事件(onchange)

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

如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。

运行结果:

文本框内容改变事件(onchange)

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

如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。

运行结果:

 

加载事件(onload)

事件会在页面加载完成后,立即发生,同时执行被调用的程序。注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

      2. 此节的加载页面,可理解为打开一个新页面时。如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。

运行结果:

卸载事件(onunload)

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

注意:不同浏览器对onunload事件支持不同。

如下代码,当退出页面时,弹出对话框“您确定离开该网页吗?”。

运行结果:(IE浏览器)

编程练习

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

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

任务

第一步: 创建构建运算函数count()。

第二步: 获取两个输入框中的值和获取选择框的值。

提示:document.getElementById( id名 ).value 获取或设置 id名的值。

第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则。

提示:使用switch判断运算法则。

第四步:  通过 = 按钮来调用创建的函数,得到结果。

注意: 使用parseInt()函数可解析一个字符串,并返回一个整数。

<!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){              //获取第一个输入框的值        var first_num=document.getElementById("txt1").value;       //获取第二个输入框的值 var second_num=document.getElementById("txt2").value;       //获取选择框的值 var select=document.getElementById("select").value;       //获取通过下拉框来选择的值来改变加减乘除的运算法则 var result=""; switch(select){ case "+": result=parseInt(first_num)+parseInt(second_num); break; case "-":      result=parseInt(first_num)-parseInt(second_num);      break;  case "*":        result=parseInt(first_num)*parseInt(second_num);        break;  case "/":        result=parseInt(first_num)/parseInt(second_num);        break; }    //设置结果输入框的值     document.getElementById("fruit").value=result   }  </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>
转载请注明原文地址: https://www.6miu.com/read-2624641.html

最新回复(0)