JavaScript之event事件

目录

1:事件驱动1

2:事件分类2

3:事件对象event3

4:关于鼠标事件对象属性3

应用:5

5:关于键盘事件对象的属性6

6:目标事件源对象7

7. 事件冒泡7

应用:8

CSS模拟下拉菜单。8

综合应用:8

 

1:事件驱动

1.事件event

所谓事件就是js侦测到的用户的操作或是页面的一些行为(怎么发生的)

2.事件源

引发事件的元素。(发生在谁的身上)

3.事件处理程序

对事件处理的程序或是函数 (发生了什么事)

4.事件对象

当事件发生的时候,具体发生了哪些信息,(当按键盘的时候按的哪个键或者鼠标光标在页面的哪个位置等等)。

2:事件分类

1.鼠标事件

onclick      点击鼠标     ondblclick     双击鼠标

onmousedown   鼠标按下     onmouseup     鼠标抬起

onmousemove   鼠标移动   

  onmouseover   鼠标放上去  onmouseout    鼠标离开     

onmouseenter  鼠标进入onmouseleave  鼠标离开

2.键盘事件

onkeyup    键盘抬起     onkeydown    键盘按下

onkeypress   键盘按下或按住

3. 表单事件

onfocus     获得焦点

onblur     失去焦点

onchange    改变文本区域的内容

 4.页面事件

onload           当页面加载完成

onbeforeunload   当页面卸载完成之前

3:事件对象event

用来记录一些事件发生时的相关信息的对象。

1.只有当事件发生的时候才产生,只能在处理函数内部访问。

2.处理函数运行结束后自动销毁。

如何获取事件对象

IE:window.event

火狐ff:对象.on事件=function(event){}

兼容的获取方式

对象.on事件=function(event){

var evt = event || window.event

}

4:关于鼠标事件对象属性

相对于浏览器位置的:

clientX   当鼠标事件发生的时候,鼠标相对于浏览器左上角X轴的位置。

clientY   当鼠标事件发生的时候,鼠标相对于浏览器左上角Y轴的位置。

相对于文档位置的:

pageX     当鼠标事件发生的时候,鼠标相对于文档X轴的位置。(IE7/8无) (类似于event.clientX、event.clientY)

pageY     当鼠标事件发生的时候,鼠标相对于文档Y轴的位置。(IE7/8无)

相对于屏幕位置的:

screenX   当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置。

screenY   当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置。

相对于事件源的位置:

offsetX   当鼠标事件发生的时候,鼠标相对于父元素左上角X轴的位置。

offsetY   当鼠标事件发生的时候,鼠标相对于父元素左上角Y轴的位置。

 

 

应用:

1:光标的实时显示。

 

 

2:跟随鼠标的提示框。

 

 

5关于键盘事件对象的属性

keyCode:获得键盘码ascll码。空格:32  回车13   左上右下:37 38 39 40which属性有兼容性问题。 e.keyCode || e.which

ctrlKey:判断ctrl键是否被按下,按下是true,反之是false  布尔值。还有shiftKey   altKey。使用keydown事件

type:用来检测事件的类型。

button:0代表鼠标按下了左键 ||  1代表按下了滚轮  ||  2代表按下了右键。不过老版本的IE并没有遵守W3C的规范,它的button属性含义如下:1鼠标左键 2鼠标右键 3左右同时按 4滚轮 5左键加滚轮 6右键加滚轮 7三个同时。目前IE11.0版本,无兼容性问题。

6目标事件源对象

IE:事件对象.srcElement

火狐:事件对象.target    e.target     ||e.srcElement

7. 事件冒泡

冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

div -> body -> html -> document 由内往外传递

 

事件的捕获 冒泡相反

 

//不让事件继续冒泡,取消冒泡
var e = evt || window.event;
e.cancelBubble = true;//ie8 ie8以下
e.stopPropagation(); //其他浏览器

 

应用

CSS模拟下拉菜单。

 

 

 

综合应用

聊天对话框。

//newLi.scrollIntoView();//将元素滚动到可见位置

 

转载于:https://www.cnblogs.com/huangzhenhui/p/7553589.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487557.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql和oracle转换_转MySql 与Oracle区别

http://blog.sina.com.cn/s/blog_61e034d50100k6xn.html近期突击学习了mysql,应杨毅的邀请,简单比较一下mysql和oracle的差别,不当之处欢迎大家指正。一、并发性并发性是oltp数据库最重要的特性,但并发涉及到资源的获取、共享与锁…

四大全球卫星导航系统都能提供什么服务?

来源:远望智库预见未来远望智库特约专家 陈刘成卫星导航系统是人类发明的最为重要的时间和空间测量工具。没有测量就没有科学,没有测量就没有管理。卫星导航系统价值集中体现在帮助人类精确感知、认知、控制物质、能量、信息的时空运行与分布。目前已经建…

UWP开发入门(十六)——常见的内存泄漏的原因

UWP开发入门(十六)——常见的内存泄漏的原因 原文:UWP开发入门(十六)——常见的内存泄漏的原因本篇借鉴了同事翔哥的劳动成果,在巨人的肩膀上把稿子又念了一遍。 内存泄漏的概念我这里就不说了,之前《UWP开…

一文了解72名图灵奖获得者的成就

来源:图灵教育今天是计算机科学之父、人工智能之父 艾伦麦席森图灵 诞辰 108 周年。作为“图灵意志”的传承者,依照惯例,在今日纪念这位伟人。从“图灵机”到“图灵测试”,从破译德军的 Enigma 到自杀之谜,图灵一生都是…

安卓修改wifi已停用_手机连不上wifi显示已保存怎么回事【原因介绍】

问:为什么手机连不上wifi显示已保存?手机在连接WiFi的时候,WiFi显示已保存,手机连接不上wifi信号。请问这是什么原因引起的,应该怎么解决这个问题。答:如果手机连接wifi时,显示已保存,手机连接…

有关 Lambda linq练习 有待整理

1、 查询Student表中的所有记录的Sname、Ssex和Class列。(select sname,ssex,class from student) Students.Select(s> new { sname>s.sname,ssex>s.ssex, class>s.class})linq:from s in Students select new{s.sname, } 2.查询教师所有的单位即不重复的Depart列…

机器人智能抓取系统:目前几种主流的解决方案

文章来源:COBOT机器人大脑、新机器视觉机器人学习中的经典问题之一便是分拣:在一堆无序摆放的物品堆中,取出目标物品。在快递分拣员看来,这几乎是一个不需要思考的过程,但对于机械臂而言,这意味着复杂的矩阵…

mysql 5.6的gtid_mode_[MySQL 5.6] GTID实现、运维变化及存在的bug

本文的主要目的是记下跟gtid相关的backtrace,用于以后的问题排查。另外也会讨论目前在MySQL5.6.11版本中存在的bug。前言:什么是GTID什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由go…

bzoj1018 [SHOI2008]堵塞的交通traffic

题目链接 分析: 这道题的题解很长,所以就不粘题面了,我们一点一点讲明白这道题 很荣幸,我看了题面之后 想到了这道题 可以很高兴的发现10w是线段树能够承受的范围 我们可以利用线段树维护连通性,每个节点内我们要维…

Science重磅!人类特有基因触发猴子长出更强大的大脑

本文系生物谷原创编译,欢迎分享,转载须授权!人类大脑在进化过程中的扩张,特别是新大脑皮层的扩张,与诸如推理和语言等认知能力有关。有一种叫做ARHGAP11B的基因,只在人类身上表达,它能触发大脑干…

mysql不同的类的个数_Mysql数据库-SQL优化-统计某种类型的个数

有时我们想统计某种类型有多少个,会用这个SQL。全表扫描之余,还要filesort,耗时1.34秒。mysql> select country,count(*) from t1 group by country;-------------------| country | count(*) |-------------------| NULL | 32 || africa …

『实践』Matlab实现Flyod求最短距离及存储最优路径

Matlab实现Flyod求最短距离及存储最优路径 一、实际数据 已知图中所有节点的X、Y坐标。 图中的节点编号:矩阵中的编号 J01-J62:1-62; F01-F60:63-122; Z01-Z06:123-128; D01-D02:129-130. 二、Floyd求所有节点间的最小距离及通过矩阵存储最优路径的节点 1 function …

MIT Technology Review 2020年“十大突破性技术”解读 【中国科学基金】2020年第3期发布...

来源:国家自然科学基金委员会MIT Technology Review 2020年“十大突破性技术”解读[编者按] 2020年2月26日,MIT Technology Review一年一度的“十大突破性技术”榜单正式发布。自2001年起,该杂志每年都会评选出当年的…

动态代理Java实现

思考:在IBuyWatermelon添加一个方法selectWatermelon() 静态代理中需要在RealSubject中实现该方法,而且Proxy也要实现该方法调用RealSubject中的实现,如果再增加10个方法还是得这样操作,导致大量的代码重复。 现在来看动态代理&am…

mysql 非等值条件 索引_慢SQL简述与定位

慢SQL日志简述通过命令和查看日志文件的方式直接查看mysql服务器的慢sql参数配置参数作用slow_query_log是否启用slow_query_log_file日志文件long_query_time慢sql阈值log_slow_adimin_statements是否记录数据库管理相关的sqllong_queries_not_using_indexes是否记录未使用索引…

大数据是怎么知道你去过新发地的?

来源:科学加(北京科技报记者:赵天宇)“经过全市大数据分析,您可能在5月30日(含)以后去过新发地批发市场……”随着新发地市场新冠源头被锁定,近日来,大数据筛查,成为不少北京市民在朋…

[模板]洛谷T3379 最近公共祖先(LCA) 倍增+邻接表

一年前听说的这东西。。。现在终于会了。。。 1 #include<cstdio>2 #include<iostream>3 #include<cstring>4 #include<cmath>5 #include<ctime>6 #include<cstdlib>7 8 #include<string>9 #include<stack>10 #include<que…

mysql更新数据能回滚吗_MySQL数据回滚-误更新和删除时快速恢复

这世界上有后悔药– www.houhuiyao.cc 后悔药数据恢复 站长语前面的内容也提到过update或delete误更新删除了数据后如何恢复。实际生产环境中常常因各种不同场景导致一些办法有效一些办法无效&#xff0c;当然&#xff0c;最有效的办法依然是备份&#xff01;虽然啰嗦&#xff…

口罩巨头挑战“量子霸权”,3个月造出的『最强量子计算机』靠谱不?

摘要霍尼韦尔(Honeywell)最近可是非常忙活。作为全球数一数二的口罩厂商&#xff0c;疫情期间霍尼韦尔一直在努力生产口罩&#xff0c;大家对它的印象也多停留在口罩生产者的层面。但是事实上&#xff0c;人家是正经的多元化高科技制造企业&#xff0c;航空产品、汽车产品、涡轮…

三极管稳压管组成的线性电源关键理解

1. A点电压为20V.B点电压是稳压管电压5.6V.则A到B的电流是固定的。 2. 加电后在调整三极管&#xff0c;负载&#xff0c; 稳压管的电流回路如图。&#xff08;注意电流方向&#xff0c;a->b电流方向和大小都是基本不变的。&#xff09; 转载于:https://www.cnblogs.com/ture…