`
ww4705
  • 浏览: 30217 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

JavaScript的事件列表 (事件属性 - 发生条件)

    博客分类:
  • java
阅读更多
  • onabort - 一个图片的加载被终止 (只用于<img>)
  • onblur - 当一个元素失去焦点(光标移开)
  • onchange - 用户改变了一个域的值(用于 <input type=”text”>, <select>, <textarea>)
  • onclick - 鼠标点击对象
  • ondblclick - 鼠标双击对象
  • onerror - 文件或图片加载出错( <img>, <object>, <style>)
  • onfocus - 一个元素得到焦点
  • onkeydown - 键盘上任一键被按下
  • onkeypress - 键盘上任一键被按下或保持按下
  • onkeyup - 当被按下的键被释放时
  • onload - 当页面或图片完成加载
  • onmousedown - 当一个鼠标键被按下
  • onmousemove - 鼠标移动
  • onmouseout - 鼠标被从一个元素上移开
  • onmouseover - 鼠标移至某元素上
  • onmouseup - 鼠标键被释放
  • onreset - 重置按钮被点击
  • onresize - 窗口或框架大小被改变
  • onselect - 文本被选择
  • onsubmit - 提交按钮被点击
  • onunload - 用户关闭页面

————————————————————————————–
onload 和 onUnload

onload 和 onUnload 事件分别是在用户进入或离开页面时被触发的。

onload 事件通常被用来检查访问者的浏览器类型和版本, 并根据这些信息加载适当的网页版本。

onload 和 onUnload 事件也常常被用来在用户进入或离开页面时设置cookies。 例如, 当用户第一次访问你的网页时,你可以使用一个弹出窗口询问用户的名字, 然后将名字存储在一个cookie中。下次当同一用户再次访问你的网页的时候, 你可以用另外一个弹出窗口打出一些问候语,比如 “欢迎您, 某某!”

——————————————————————————–
onFocus, onBlur 和 onChange

onFocus, onBlur 和 onChange 事件通常与表单域的验证结合使用。

以下是一个例子,显示如何使用onChange 事件。 每当用户改变这个输入域的值, checkEmail() 函数就会被调用:

<input type=”text” size=”30″ id=”email” onchange=”checkEmail()”>;

———————————————————————————-
onSubmit

onSubmit 事件通常被用来在表单提交之前验证所有的域值。

下 面是一个例子,显示怎样使用onSubmit事件。 当用户点击表单的提交按钮时, 函数checkForm()就会被调用。 如果某些域值不能被接受, 提交将会被取消。 函数 checkForm()返回值为真或者假。 如果返回值为真,则表单会被提交, 否则, 表单会被取消:

<form method=”post” action=”xxx.htm” onsubmit=”return checkForm()”>

————————————————————————————
onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 通常被用来生成动画按钮。

以下为一个onMouseOver事件的例子。 当鼠标移到链接“程序员实验室”上时,一个提示窗口就会弹出来:

<a href=”http://www.prglab.com”
onmouseover=”alert(’An onMouseOver event’);return false”> 程序员实验室 </a>
分享到:
评论

相关推荐

    JavaScript事件机制详细研究

    JavaScript 事件机制是指浏览器中发生的各种事件,例如点击、鼠标悬停、键盘输入等,JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和原理。 事件机制的实现方式有...

    Kirupa Chinnathambi-javascript Absolute Beginner's Guide-Que Publishing (2016)

    - **事件对象**: 事件发生时会传递一个事件对象,其中包含了事件的相关信息,如触发事件的元素、键盘按键等。 - **委托处理**: 利用事件冒泡机制,可以在较高层级的元素上处理子元素发生的事件,提高代码的可维护性...

    JavaScript实例教程(9-16)

    JavaScript可以监听这些事件并执行相应操作。 - DOM(文档对象模型)是HTML和XML文档的编程接口,JavaScript可以使用DOM API来访问和修改页面元素。 7. **AJAX** - AJAX(异步JavaScript和XML)允许网页在不刷新...

    javascript事件模型代码

    - **DOM0级事件处理程序**:在JavaScript代码中,通过对象的`oneventName`属性设置,如`element.onclick = function() {...}`。 - **DOM2级事件处理程序**:使用`addEventListener`和`removeEventListener`方法添加...

    JavaScript-DOM---Interactive-and-Dynamic-[removed]JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布

    JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布 ... 本课程仅涵盖JavaScript文档对象模型,并且必须具有JavaScript的先决条件。 课程内容包括在

    javascript经典特效---JavaScript容错脚本.rar

    3. 对于可能返回null或undefined的对象属性,使用条件语句进行检查。 4. 对于数组操作,使用Array.isArray()判断是否为数组,避免RangeError。 5. 使用严格模式('use strict'),这可以启用更严格的错误检查。 总的...

    javascript经典特效---按钮使字符改变.rar

    标题中的"javascript经典特效---按钮使字符改变"指的是一个JavaScript编程示例,它演示了如何通过JavaScript实现一个功能,即当用户点击按钮时,页面上的字符或文本会发生变化。这通常涉及到DOM操作、事件监听以及...

    javascript经典特效---五角星礼花.rar

    5. **动画循环**:为了实现连续的动画效果,JavaScript会不断更新和重绘五角星的位置,直到达到预设的结束条件,比如五角星达到一定的高度或消失。 6. **CSS3过渡和动画**:结合CSS3的transition和animation属性,...

    javascript经典特效---天女散花.rar

    JavaScript的`addEventListener`方法可以绑定事件处理函数,当特定事件发生时执行相应代码。 6. **动画优化**:为提高性能,可以使用requestAnimationFrame来代替setTimeout或setInterval,因为...

    【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)1

    这是最常见的事件处理方式,通常用于子元素需要执行特定操作,同时父元素也需要知道该事件发生的情况。 2. DOM事件流: - **DOM2级事件规范**定义了事件流的三个阶段:捕获阶段、处于目标阶段(事件到达目标元素)...

    第六节 HTML事件中的XSS-01

    这些处理器可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个JavaScript命令或函数。 XSS漏洞发现 ------------- XSS漏洞发现是指攻击者通过在HTML事件处理器中注入恶意代码...

    Vue3.x中使用JavaScript表达式 、条件判断、 计算属性和watch侦听.zip

    Vue3.x作为一款流行的前端框架,它在设计上更加注重性能和灵活性,为开发者提供了丰富的功能,包括在模板中使用JavaScript表达式、条件判断、计算属性以及watch侦听器。这些特性极大地增强了Vue应用的逻辑处理能力。...

    javascript经典特效---title变化特效.rar

    "标题变化特效"就是一个常见的JavaScript应用实例,它通常指的是网页标题(`&lt;title&gt;`元素)在用户操作或特定条件下发生变化的效果。 在JavaScript中,可以使用`document.title`属性来获取或设置当前网页的标题。...

    javascript经典特效---多变的动态文字.rar

    例如,使用CSS3的transition和animation属性可以实现平滑的过渡效果,配合JavaScript的事件监听,当特定条件满足时触发动画。 此外,JavaScript中还有一些库和框架,如jQuery、GreenSock等,可以帮助开发者更方便地...

    javascript的三种事件模型.docx

    JavaScript 事件模型是网页交互的核心机制,允许JavaScript代码在特定的用户操作或系统事件发生时执行。本文主要探讨了JavaScript中的三种事件模型,这些模型与不同的浏览器和DOM版本有关。尽管存在差异,但通过一些...

    JavaScript基础教程 精简版

    事件驱动和事件处理是JavaScript的另一大特性,尤其是对于用户交互。事件是用户或系统发生的行为,如点击按钮、滚动页面。事件驱动意味着程序等待事件发生后才执行相应的代码。事件处理通常涉及事件监听器...

    JavaScript课件-05.pptx

    事件驱动意味着JavaScript程序员可以预先定义事件处理程序,当事件发生时,浏览器会自动调用相应的处理程序。事件包含三个要素:事件源(触发事件的对象)、事件(具体的行为,如点击、提交等)以及事件处理程序(对...

    JAVASCRIPT自学教程

    - 事件是用户或浏览器与页面交互时发生的特定情况,JavaScript通过事件监听器(`addEventListener`)来响应事件。 - 常见的事件有点击(click)、提交(submit)、改变(change)等。 6. **AJAX** - AJAX...

    javascript网页开发-张孝祥.pdf

    - 结合事件监听器,在特定条件下触发图片加载。 #### 11. 表单验证 - 使用JavaScript对表单输入进行验证,确保数据的有效性。 - 通过显示错误消息等方式提升用户体验。 #### 12. AJAX请求 - 通过XMLHttpRequest或...

    js事件大全汇总111

    - 描述:当对象的属性发生变化时触发此事件。 46. **`onReadyStateChange`**:当对象的就绪状态发生变化时触发。 - 支持版本:IE4 | Netscape | Opera - 描述:当对象的就绪状态发生变化时触发此事件。 通过...

Global site tag (gtag.js) - Google Analytics