事件机制,在JS中感觉很容易让人接受,一个鼠标被按下时会发生一些事情,一个键盘的键被抬起时同样可以发生一些事情,这种比喻很容易让人接受,不是吗,呵呵。
下面我将JS中几个主要的事件说一下,然后再说一下触发事件的几个方法。
JS中的主要事件说明
以下是我们在项目开发中常用到的事件,红色的为最常用的事件,呵呵
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus元素获得焦点
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或按住
onkeyup某个键盘的键被松开
onload某个页面或图像被完成加载
onmousedown某个鼠标按键被按下
onmousemove鼠标被移动
onmouseout鼠标从某元素移开
onmouseover鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onselect 文本被选定
onsubmit 提交按钮被点击
onunload 用户退出页面
JS中事件的调用方式
一 在HTML标记中直接指定事件,代码如下:
<script type="text/javascript"> //onclick事件指向的方法 function clickFun() { alert("谁触发了我,单击事件"); } //onerror事件指向的方法 function imgErrorFun(o) { o.src = "http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQk9vj-gEQeBjYBDIIImM2eyikBWY"; } //鼠标移入 function overFun(o) { o.style.background = "red"; } //鼠标移出 function outFun(o) { o.style.background = "#fff"; } </script>
二 直接在JS代码块中动态为元素分配事件
window.onload = function () { document.getElementById("haha").onclick = function () { alert("谁触发了我,单击事件"); } document.getElementById("haha").onclick = function () { clickFun(); } }
事实上,使用纯JS去实现一些页面中的效果是没有问题的,但是在使用上确实不方便,所以目前出现了很多流行的,兼容性好的,使用方便的JS类库,如JQ,prototype,ExtJS等等!
好了,时间不早了,今天的JS事件内容就讲到这里吧,没什么难的东西都是实验性的,自己写写就有了,呵呵 。
感谢您的阅读!
相关推荐
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
本书第6版涵盖了 html5 和 ecmascript 5,很多章节完全重写,增加了当今 web 开发的最佳实践的内容,新增的章节包括 jQuery、服务器端 JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
本书第6版是完整版1000多页带书签非常容易阅读,讲述的内容涵盖JavaScript语言和HTML5本身,以及Web浏览器所实现的...本书新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。。
本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。本书不仅适合初学者系统学习,也适合...
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
JavaScript权威指南(第6版)》涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的实践内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及JavaScript式的面向对象。《O'Reilly精品图书系列...
第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用String对象方法操作字符串 6.1.2 获取目标字符串长度 6.1.3 连接两个字符串 6.1.4 验证电子邮件地址的合法性 6.1.5 返回指定位置的字符串 6.1.6 ...
9.6 JavaScript中的面向对象技术217 9.7 子类230 9.8 ECMAScript 5 中的类239 9.9 模块248 第10章 正则表达式的模式匹配253 10.1 正则表达式的定义253 10.2 用于模式匹配的String方法261 10.3 ...
《JavaScript核心概念及实践》不仅帮助读者迅速掌握JavaScript基础知识和核心技术,而且通过实例讲解如何将这些知识和技术理解应用到实际工作中,提升编程能力,以简洁、优美的代码开发出功能强大且更易于维护和扩展...
第5章 JavaScript编程技术 5.1 JavaScript编程基础 5.1.1 JavaScript简介 5.1.2 Javascript的使用方法 5.1.3 语法规则 5.1.4 运算符和表达式 5.1.5 函数 5.1.6流程控制 5.1.7 事件处理 5.2 JavaScript对象编程 5.2.1...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
第七页 你的面向对象的虚拟宠物 第八页 计算字符串 第九页 获取难以索引的对象 第十页 另一种获取难以索引的对象的手段 第十一页 第四天课程复习 第5课 第一页 JavaScript高级教程- 第5天 第二页 打印变量 ...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
第6章 String、Math、Array等数据对象 6.1 String对象 6.1.1 如何使用String对象方法操作字符串 6.1.2 获取目标字符串长度 6.1.3 连接两个字符串 6.1.4 验证电子邮件地址的合法性 6.1.5 返回指定位置的字符串 6.1.6 ...
本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端JavaScript、图形编程以及 JavaScript式的面向对象。本书不仅适合初学者系统学习,也...
第6版涵盖了 HTML5 和 ECMAScript5,很多章节完全重写,增加了当今 Web 开发的最佳实践的内容,新增的章节包括 jQuery 、服务器端 JavaScript、图形编程以及 JavaScript 式的面向对象。“权威指南”第六版不仅适合...
9.6 JavaScript中的面向对象技术 9.7 子类 9.8 ECMAScript 5 中的类 9.9 模块 第10章 正则表达式的模式匹配 10.1 正则表达式的定义 10.2 用于模式匹配的String方法 10.3 RegExp对象 第11章 JavaScript的子集和扩展 ...
9.6 JavaScript中的面向对象技术217 9.7 子类230 9.8 ECMAScript 5 中的类239 9.9 模块248 第10章 正则表达式的模式匹配253 10.1 正则表达式的定义253 10.2 用于模式匹配的String方法261 10.3 ...