Javascript基础与面向对象基础~第六讲 Javascript中的事件机制

简介:

事件机制,在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事件内容就讲到这里吧,没什么难的东西都是实验性的,自己写写就有了,呵呵 。

感谢您的阅读!

本文转自博客园张占岭(仓储大叔的博客,原文链接:Javascript基础与面向对象基础~第六讲 Javascript中的事件机制,如需转载请自行联系原博主。

目录
相关文章
|
1月前
|
前端开发 JavaScript UED
深入理解JavaScript中的事件循环机制
JavaScript中的事件循环机制是其异步编程的核心,深入理解该机制对于开发高效、流畅的前端应用至关重要。本文将介绍事件循环的工作原理、常见的事件循环模型,以及如何利用这些知识解决前端开发中的常见问题。
|
1天前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
1天前
|
JavaScript 前端开发
JavaScript事件
JavaScript事件
|
25天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
38 1
|
29天前
|
前端开发 JavaScript
前端 JS 经典:Class 面向对象
前端 JS 经典:Class 面向对象
13 1
|
30天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
30天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
30天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
1月前
|
JavaScript 前端开发 API
在Node.js上使用dojo库进行面向对象web应用开发
请注意,虽然这个例子在Node.js环境中使用了Dojo,但Dojo的许多功能(例如DOM操作和AJAX请求)在Node.js环境中可能无法正常工作。因此,如果你打算在Node.js环境中使用Dojo,你可能需要查找一些适用于服务器端JavaScript的替代方案。
23 0
|
1月前
|
开发框架 JavaScript 前端开发
JavaScript的事件循环机制是其非阻塞I/O的关键
【5月更文挑战第13天】JavaScript的事件循环机制是其非阻塞I/O的关键,由调用栈、事件队列和Web APIs构成。当异步操作完成,回调函数进入事件队列,待调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、游戏逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中则常使用游戏框架进行抽象处理。
45 4