8. JavaScript学习笔记——事件
8. 事件
8.1 事件基础
/// 事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，因此click 事件的事件处理程序就是 onclick，load 事件的事件处理程序就是 onload。
///【HTML事件处理程序】
<input type="button" value="按钮" onclick='func()'>
//【DOM 0级处理程序】
var input = document.getElementsByTagName('input')[0];
input.onclick = function(){//令onclick指向一个函数对象
alert("点击");
}
input.onclick = func;//注意没有括号，有括号的话就是函数的返回值了
input.onclick = null;//删除事件处理程序
///【DOM 2级处理程序】
// 后面
//事件处理函数
//事件类型分为：鼠标事件、键盘事件、HTML事件 等
//----------鼠标常用事件----------
onclick() 单机某个对象时触发
ondbclick() 双击某个对象时触发
onmouseup() 鼠标松开时触发
onmouseover() 鼠标移动到元素上时触发
onmousemove() 鼠标被移动时触发
onmouseup() 鼠标移走时触发
//----------键盘常用事件----------
onkeydown() 某个键盘按键被按下
onkeyup() 某个按键被松开
onkeypress() 按下字符键，数字、字母、符号
//*********
//元素对象都有一个 click() 方法可以模拟鼠标点击
8.2 事件对象
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。
事件对象，一般称为event对象，浏览器自动为事件处理函数所绑定的函数传递这个对象做为参数。
///【事件对象】
document.onclick = function(){
alert(arguments.length);// 输出 1 ；event被自动当做参数传进函数
alert(arguments[0]);//[Object MouseEvent]
}
document.onclick = function(event){ //【获得、接收event对象，名字自定义】
alert(event);//[Object MouseEvent]
}
///【常用】【event.target】 Element类型，返回事件的目标，可以对它操作
document.onclick = function(e){
alert(e.target); //[object HTMLBodyElement]
alert(this == e.target); //也可以使用 this，等同于 e.target
}
///【event.preventDefault()】 阻止事件的【默认行为】
//例如：单击链接的默认行为就是在被单击打时导航到href属性指向的URL，要阻止，就可以用preventDefault()
var link = document.getELementsByTagName('a')[0];
link.onclick = function(event){
event.preventDefault(); //这样点击超链接时就没有反应了
//【return false; 这样也可以】
}
///【event.type】
// 返回事件类型
///【event.stopPropagation()】 取消事件的【进一步】冒泡或捕获
/*
<html>
<body>
<div>xxx</div>
</body>
</html>
*/
//【事件冒泡】：【子节点、父节点都使用相同的事件时取消冒泡】
//【并不是所有事件都冒泡，focus,load,unload,blur 不冒泡】
//当点击了<div>后，其父节点的onclick事件也全都会触发(因为是包含关系)，onclick事件会沿DOM树向上传播：div -> body -> html -> Document -> window
div.onclick = funciton(evt){
evt.stopPropagation();//这样就可以取消冒泡了，点击div时 body html document 的onclick事件就不会触发了，因为【事件流到了 div时，就被阻止了】
}
//【事件捕获】：
// 相反，onclick事件会沿DOM树向下传播：Document -> html -> body -> div
//【DOM事件流】
//DOM2级事件 规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
//如单击DIV：Document -> html -> body -------> div -------> body -> html -> Document
//在 DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，【并在事件处理中被看成冒泡阶段的一部分】。然后，冒泡阶段发生，事件又传播回文档
//【chrome中的实际情况】
/*
<body> <button> </body>
button.onclick = function(){ log("on button") }
body.onclick = function(){ log("on body") }
document.onclick = function(){ log("on document") }
window.onclick = function(){ log("on window") }
最后输出为： button -> body -> document -> window
也就是说，click事件先在button上发生，再在冒泡阶段发生。时间冒泡方式更胜一筹，所以放心使用冒泡。
*/
8.3 事件类型
///【【鼠标事件】】
//【鼠标按钮】
// 对于mousedown 和 mouseup 事件来说，在其event对象存在一个button属性，表示按下或释放的按钮。0表示鼠标左键，1表示鼠标中键，2表示鼠标右键
document.onmouseup = function(event){
alert(event.button);
}
//【可视区与屏幕坐标】
document.onclick = function(event){
alert(event.clientX + ',' +event.clientY);//表示以【当前可视页面左上角】为原点，鼠标的点击坐标，不受页面大小影响
}
document.onclick = function(event){
alert(event.pageX + ',' +event.pageY);//表示以【真正页面左上角】为原点，鼠标的点击坐标，如果滚动条向下拉，再点击页面左上角，不会是 0,0 ，因为上面还有一部分
}
document.onclick = function(event){
alert(event.screenX + ',' +event.screenY);//表示以【电脑屏幕左上角】为原点，鼠标的点击坐标
}
//【修改键】
//简单来说就是，判断【按下鼠标时是否同时按下了】：Shift、Ctrl、Alt、Meta(Windows键盘为Windows键，苹果味Cmd键)。分别用四个属性表示：shiftKey、ctrlKey、altKey、metaKey，保存的都是布尔值，如果按下了相应的键则值为true，否则值为false。
function getKey(evt){
var keys = [];//数组存放按下了哪些键
if(evt.shiftKey) keys.push('shift');
if(evt.ctrlKey) keys.push('ctrl');
if(evt.altKey) keys.push('alt');
if(evt.metaKey) keys.push('meta');
alert(keys);
}
document.onclick = getKey;
///【【键盘事件】】
//keydown: 按下任意键触发，按住不放的话，会重复触发此事件
//keyup: 吃放键盘上的任意键时触发
//keypress: 按下【字符键】触发，按住不放的话，会重复触发此事件
//textIput: 文本事件，是对keypress的补充，在文本插入文本框前会先触发textInput事件
//当按下字符键时，会触发：keydown -> keypress -> keyup
//【键码】
//发生keydown和keyup事件时，event对象的keyCode属性会返回一个与键盘上对应的键的代码
//【字符编码】
//发生keypress事件，事件对象event 的 charCode属性，返回字符的ASCII码。
document.onkeypress = function(e){
alert(String.fromCharCode(e.keyCode));//String.fromCharCode 将ASCII码转换为字符
}
///【【UI事件】】
//【load 事件】
//当页面加载完后触发（包括图像，JS、CSS文件，window，框架）
///【【焦点事件】】
//焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus()方法及document.activeElement 属性配合，可以知晓用户在页面上的行踪。
/*
blur: 当元素失去焦点时触发，这事件不会冒泡。
focus: 同focusin，不冒泡。
focusin: 元素获得焦点时触发。
focusout: 同blur
*/
8.4 事件绑定
//HTML 绑定
//<div onclick='alert(this)'>xxx</div> 也可以打印this;onclick=doo(),function doo(){alert(this);} 不可以！！！
//DOM 0级
div.onclick = function(){//函数被绑定，被认为是这个对象的方法
alert(this);//【直接可以通过this访问到HTML元素对象】
}
//【addEventListener】
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
//最终会输出2，因为第一个被覆盖了
window.addEventListener('load',function(){ //第一个参数是事件类型（没有on），第三个【false表示在冒泡阶段调用事件处理程序】，true 表示在捕获阶段调用
alert(1);
},false);
window.addEventListener('load',function(){
alert(2);
},false)
//1 和 2 都输出了，解决了覆盖的问题
//要移除这种方法添加的事件必须使用 removeEventListener(事件类型，要移除的函数，bool)
window.removeEventListener('load',function(){xx}) //这样不可以，因为addEventListener里的函数和这里的是两个不同的函数对象。 解决办法是：把函数对象赋值给一个变量，将变量分别给 add remove这两个函数
8.5 模拟事件
8. JavaScript学习笔记——事件的更多相关文章
- JavaScript学习笔记——事件
javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- kubernetes多节点的pod挂载同一个cephfs目录
一.安装cephfs 方法一: 直接进入deploy目录,执行: ceph-deploy --overwrite-conf mds create ceph01:mds-daemon- 上面的ceph0 ...
- 团体程序设计天梯赛L2-024 部落 2017-04-18 11:31 274人阅读 评论(0) 收藏
L2-024. 部落 时间限制 120 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 在一个社区里,每个人都有自己的小圈子,还可能同时属于很多不 ...
- java中时间
格式转化 SimpleDateFormat package day1211.common; import java.sql.Date;import java.sql.Timestamp;import ...
- Oracle Submit Request - 请求的调用方法: FND_REQUEST.SUBMIT_REQUEST
废话: 有一段时间没搞过开发了,做项目又要重新找回点开发的记忆.重新拾回一点点零碎. 跑多了产线,配置的一些参数也忘记得差不多了,长时间没动就是易遗忘,找点资料做个笔记就是时间保镖. 正题: FN ...
- MySQL 笔记整理（20） --幻读是什么，幻读有什么问题？
笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 20) --幻读是什么,幻读有什么问题? 我们先来看看表结构和初始化数据 ...
- 存储系统的基本数据结构之一: 跳表 (SkipList)
在接下来的系列文章中,我们将介绍一系列应用于存储以及IO子系统的数据结构.这些数据结构相互关联又有着巨大的区别,希望我们能够不辱使命的将他们分门别类的介绍清楚.本文为第一节,介绍一个简单而又有用的数据 ...
- [Erlang31]Erlang trace总结
在一个并行的世界里面,我们很难做到单步断点调试来定位问题(太多的消息飞来飞去),Erlang设计者也深刻体会到这一点,推出了另一个trace机制. 通过这个trace,你可以: .特定进程集内的函数调 ...
- 【Unity】Domina-Game总结与反思
[Unity]Domina-Game总结与反思 2018/6/15 我总算是把物理课作业--Domina-Game给赶完了,这也算是我用Unity做的第一个游戏吧(不得不说我的脚本写的超烂的)...纪 ...
- C#读取MP3文件的专辑图片和ID3V2Tag信息(带代码)
第二次更新,后面的代码有问题,有些专辑图片读取不到.发现是PNG图片的问题.在读取的过程中调试发现,图片帧前10个字节包含了图片的格式,在有些歌曲写着JPEG的格式,数据却是PNG的.先说下思路. j ...
- NPOI设置Excel单元格字体、边框、对齐、背景色
代码: ICellStyle cellStyle = workbook.CreateCellStyle(); cellStyle.BorderBottom = BorderStyle.Thin; ce ...