Javascript 事件

简介: Javascript 事件

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


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


主要事件表:


2466108-8a4ae39e8b22650c.webp.jpg


鼠标单击事件( 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="点击提交" onclick="add2()" />
   </form>
</body>
</html>


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


鼠标经过事件(onmouseover)



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


现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下:


2466108-36ff29997e235d1c.webp.jpg


运行结果:


2466108-21d1faaa01b50de8.webp.jpg


鼠标移开事件(onmouseout)



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

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


2466108-9240ba5fd77fc02c.webp.jpg


运行结果:


2466108-b301943bbab9b2c9.webp.jpg


光标聚焦事件(onfocus)



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

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


2466108-cac54ef83b5cf1ba.webp.jpg


运行结果:


2466108-8544c155e2ed993e.webp.jpg


失焦事件(onblur)



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


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


2466108-c1cd1b02e37d796e.webp.jpg


运行结果:

2466108-741417ffde8ac1a2.webp.jpg

内容选中事件(onselect)



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

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


2466108-390ebb883f0f3a41.webp.jpg


运行结果:

2466108-609f2517b582ea58.webp.jpg

内容选中事件(onselect)



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


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


2466108-390ebb883f0f3a41.webp.jpg


运行结果:

2466108-1374fcb0bf1394c0.webp.jpg

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


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

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


2466108-f79322e8c0e1823d.webp.jpg


运行结果:

2466108-3e6dcb429bf5b366.webp.jpg

加载事件(onload)



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

注意:


  1. 加载页面时,触发onload事件,事件写在标签内。
  2. 此节的加载页面,可理解为打开一个新页面时。
    如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。


2466108-f3ae3ab80c14925c.webp.jpg


运行结果:

2466108-f7e5139117b11955.webp.jpg

卸载事件(onunload)



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


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

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


2466108-de5dc9f5b6053d7d.webp.jpg


运行结果:(IE浏览器)


2466108-a157f93d851f8a78.webp.jpg

目录
相关文章
|
5月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
7月前
|
JavaScript 前端开发
js事件队列
js事件队列
157 55
|
5月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
59 3
|
6月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
53 2
|
2月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
45 3
|
7月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
68 0
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
94 5
|
5月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
83 6
|
6月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
37 5
|
6月前
|
监控 JavaScript 前端开发

热门文章

最新文章