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

2024-05-14 20:33:17

回到目录

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

感谢您的阅读！

回到目录

转载于:https://www.cnblogs.com/lori/archive/2013/01/25/2877387.html

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

Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
AcWing基础算法课Level-2 第六讲贪心
AcWing基础算法课Level-2 第六讲贪心区间问题 AcWing 905. 区间选点1751人打卡 AcWing 908. 最大不相交区间数量1613人打卡 AcWing 906. 区间分组 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
JavaScript – 6.JS面向对象基础(*) + 7.Array对象 + 8.JS中的Dictionary + 9.数组、for及其他...
6.JS面向对象基础(*) 7.Array对象 7.1 练习:求一个数组中的最大值.定义成函数. 7.2 练习:将一个字符串数组输出为|分割的形式,比如"刘在石|金钟国|李光洙|HAHA|宋 ...
python面向对象基础_python面向对象基础
面向对象基础一.面向对象和面向过程面向过程: 优点:复杂问题流程化,进而简单化确定:可扩展性差面向对象: 优点:可扩展性高缺点:编写复杂度高于面向过程二.类与对象类即类别.种类,是面向对 ...
【Python基础】面向对象基础和特性
Python面向对象面向对象基础定义类创建对象添加和获取对象属性魔法方法对象的生命周期私有属性和私有方法面向对象特性封装封装案例演练继承继承的传递性方法的重写父类的私有属性 ...
这样讲 Netty 中的心跳机制，还有谁不会？
作者:永顺 segmentfault.com/a/1190000006931568 基础何为心跳顾名思义, 所谓心跳, 即在 TCP 长连接中, 客户端和服务器之间定期发送的一种特殊的数据包, ...
Python基础学习——面向对象编程（第一讲：面向对象概述、面向对象三个基本特征（封装性、继承性、多态性）、类和对象（定义类、创建和使用对象、实例变量、类变量、构造方法、实例方法、类方法、静态方法））
面向对象是Python最重要的特性,在Python中一切数据类型都是面向对象的. 1.面向对象概述面向对象的编程思想是,按照真实世界客观事物的自然规律进行分析,客观世界中存在什么样的实体,构建软件系 ...
php 面向对象基础,PHP 面向对象基础
本文主要阐述面向对象的基本概念,如有问题,还请斧正. 首先说明,涉及的一些知识点,算是提纲吧 . 1 类的基本概念:2 对象的基本概念:3 访问控制:4 构造函数,析构函数:5魔术方法:6 接口:7 ...

最新文章

热门文章