事件
JavaScript有两种事件实现模式：
1, 内联模式,
2, 脚本模式。
内联模式
内联模式 : 直接在HTML标签中添加事件.
//在 HTML中把事件处理函数作为属性执行JS代码
<input type="button" value="按钮" onclick="alert('hello');" />
//注意单双引号
//在HTML中把事件处理函数作为属性执行 JS 函数
<input type="button"value="按钮" onclick="btnClick();" />
//执行JS 的函数
注: 内联模式调用函数, 则函数不能放到window.onload 里面，否则会找不到该函数。
脚本模式
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件, 如我们可以采用三种方式来获得节点对象: getElementById(), getElementsByTagName(), getElementsByName()
添加事件方式一 : 通过匿名函数，可以直接触发对应的代码
//给box节点对象添加点击事件onclick
box.onclick = function() {
console.log('Hello world!');
};
添加事件方式二 : 通过指定的函数名赋值的方式 来执行函数
//给box节点对象添加点击事件onclick
box.onclick = func;
function func() {
console.log('Hello world!');
};
循环添加事件
var aArr = document.querySelectorAll("a"); var sectionArr = document.querySelectorAll("section"); for(var i=0; i<aArr.length; i++){ aArr[i].index = i; aArr[i].onclick = function(){ for(var i=0; i<sectionArr.length; i++){ sectionArr[i].classList.remove("active"); aArr[i].classList.remove("active"); } this.classList.add("active"); sectionArr[this.index].classList.add("active"); }; } /*以下为用闭包实现方法*/ for (var i in aArr) { aArr[i].onclick = fn(i); } function fn(index){ var click = function(){ for(var j=0;j< aArr.length;j++){ aArr[j].classList.remove("active"); sectionArr[j].classList.remove("active"); } aArr[index].classList.add("active"); sectionArr[index].classList.add("active"); } return click; }
addEventListener() 方法用于向指定元素添加事件句柄。
提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
语法
element.addEventListener(event, function, useCapture)
参数值
|
参数 |
描述 |
|
event |
必须。字符串，指定事件名。 |
|
function |
必须。指定要事件触发时执行的函数。 |
|
useCapture |
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
|
事件处理函数
所有的事件处理函数都会都有两个部分组成，on+ 事件名称;
注: 事件处理函数一般都是小写字母
JavaScript 可以处理的事件种类有三种：
1, 鼠标事件、
2, 键盘事件、
3, HTML事件。
鼠标事件
click： 当单击鼠标按钮并在松开时触发 boxNode.onclick = function() { };
dblclick： 当双击鼠标按钮时触发。ondbclick = function() { };
mouseover：当鼠标移入某个元素的那一刻触发。onmouseover = function() { };
mousedown：当按下了鼠标还未松开时触发。 onmousedown = function() { };
mousemove：当鼠标指针在某个元素上移动时触发。onmousemove = function() { };
mouseup： 释放鼠标按钮时触发。 onmouseup = function() { };
mouseout：当鼠标刚移出某个元素的那一刻触发。 onmouseout = function() { };
键盘事件
键盘事件，在键盘上按下键时触发的事件;
(一般由window对象或者document对象调用)
keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。
window.onkeydown = function() { };
keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发
window.onkeypress = function() { };
keyup：当用户释放键盘上的某个键触发。
window.onkeyup = function() { };
Keypress和keydown的区别
KeyDown：在控件有焦点的情况下按下键时发生。会重复触发
KeyPress：在控件有焦点的情况下按下键时发生。会重复触发
KeyUp：在控件有焦点的情况下释放键时发生。
1.KeyPress主要用来捕获数字(注意：包括Shift+数字的符号)、字母（注意：包括大小写）、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符 KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键）
2.KeyPress 只能捕获单个字符KeyDown 和KeyUp 可以捕获组合键。
3.KeyPress 可以捕获单个字符的大小写
4.KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值，也就是不能判断单个字符的大小写。
5.KeyPress 不区分小键盘和主键盘的数字字符。KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
6.其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
系统组合键的判定
在使用键盘的时候，通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。对于此，我们如何来判定？
通过KeyUp 事件能够来处理（这里说明一下为什么不用KeyDown，因为在判定KeyDown的时候，CTRL、SHIFT和ALT 属于一直按下状态，然后再加另外一个键是不能准确捕获组合键，所以使用KeyDown 是不能准确判断出的，要通过KeyUp 事件来判定 ）
HTML事件
load：当页面完全加载后触发 window.onload = function() { };
unload：当页面完全卸载后触发window.onunload = function() { };
select：当用户选择文本框(input 或 textarea)中的内容触发。
input.onselect = function() { };
change：当文本框(input 或 textarea)内容改变且失去焦点后触发。
input.onchange = function() { };
focus：当页面或者元素获得焦点时触发。 input.onfocus = function() { };
blur：当页面或元素失去焦点时触发。input.onblur = function() { };
submit：当用户点击提交按钮在<form>元素节点上触发。
form.onsubmit = function() { };
reset：当用户点击重置按钮在<form>元素节点上触发。
form.onreset = function() { };
scroll：当用户滚动带滚动条的元素时触发。
window.onscroll= function() { };
事件处理的三个组成部分
事件处理由三个部分组成：
1, 触发事件的节点对象
2, 事件处理函数
3, 事件执行函数。
this关键字
在JS事件中, this表示触发事件的元素节点对象;this指向函数的所有者
var box = document.getElementById('box'); box.onclick = function() { console.log(this.nodeName); //this表示box对象 };
event对象的获取
event对象(事件对象)是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中.
box.onclick = function(evt){ var oEvent = evt || event; //获取到event对象(事件对象) alert(oEvent); };
event对象的属性
1.button属性
document.onclick = function(evt) { var oEvent = evt || event; console.log(oEvent.button); };
（右键属性在mousedown中可以显示）；
2.可视区坐标及屏幕坐标
事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区坐标，另一组是屏幕区坐标。
Client 是到window的坐标，screen是到整个电脑屏幕的坐标
document.onmousedown= function(evt) { var oEvent = evt || event; console.log(oEvent.clientX + ',' + oEvent.clientY); console.log(oEvent.screenX + ',' + oEvent.screenY); };
event对象的属性/键盘事件(修改键)
有时，我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为： Shfit、Ctrl、Alt 和 Meat(Windows 中就是 Windows 键，苹果机中是 Command 键)，它们经常被用来修改鼠标事件和行为，所以叫修改键。
event对象的属性/键盘事件(键码)
1. 键码 : keyCode属性
所有按键, 包括功能键(control, alt,shift, tab, 方向键等), (不包括亮度,音量..的按键)在发生 keydown和keyup 事件时，event对象的 keyCode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode属性的值与 ASCII 码中对应, 大写字母或小写的编码相同, 为大写字母。
document.onkeydown = function(evt) { var oEvent = evt || window.event; alert(oEvent.keyCode); //按任意键，得到相应的 keyCode };
event对象的属性/键盘事件(字符码)
2.字符编码 : charCode属性
Firefox、Chrome 和 Safari 的event对象支持charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的keyCode通常等于0或者也可能等于所按键的编码
( 键盘上的数字, 字母(区分大小写), 字符, 空格, 回车)
document.onkeypress = function(evt) { var oEvent = evt || event; console.log(oEvent.charCode); }
注：可以使用 String.fromCharCode()将 ASCII 编码转换成实际的字符
事件的目标(target属性)
target: 目标对象,存放绑定事件的元素节点对象
document.onclick = function(evt) { var oEvent = evt || event; console.log("document: " + oEvent.target); //HTMLHtmlElement }
事件的冒泡
事件流
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候， 那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围 的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
事件冒泡是从里往外逐个触发。事件捕获，是从外往里逐个触发。那么现代的浏览器 默认情况下都是冒泡模型
事件的冒泡: 指的是在页面上层节点触发的事件会继续传递给下层节点, 这种传递方式,我们称之为事件的冒泡传递;
阻止冒泡的方式有两种:
( 在指定不想再继续传递事件的节点的事件执行函数中使用)
//1, 取消冒泡
oEvent.cancelBubble = true; //这个用的比较多
//2, 停止传播
oEvent.stopPropagation(); //不支持IE8以下
阻止右键菜单事件
阻止右键菜单
在之前使用event对象的button属性时, 点击鼠标右键会弹出系统菜单, 如果我们想要创建自己的右键菜单, 则需要先阻止默认的右键菜单
document.oncontextmenu = function(){ alert("右键被按下"); return false; }
超链接的拦截
<a>标签有属性href, 在用户点击超链接标签<a>时, 实际上内部会调用onclick事件，那么如果我们需要在超链接跳转前做一些判断处理, 则可以将onclick指向我们自己的函数,并返回true或者false来决定是否允许超链接跳转;
var oA = document.getElementsByTagName("a")[0]; oA.onclick = function() { return (confirm("你确定要跳转吗?"))； }
<a href="http://www.baidu.com">百度一下</a>
拖拽
所谓拖拽: 就是按住元素后移动位置, 最后松开的过程
1, 实现拖拽相关的三大事件:
onmousedown : 鼠标按下
onmousemove : 鼠标移动
onmouseup : 鼠标松开
实现拖拽思路：
1, 给目标元素添加onmousedown事件(鼠标按下事件)
在鼠标按下的瞬间, 记录鼠标所在位置与目标元素左边界的距离disX, 以及与上边界的距离disY
2, 当onmousedown事件发生以后(鼠标按下后)，就给document添加onmousemove事件(鼠标移动事件)
在onmousemove(鼠标移动事件)中, 根据以下公式不断刷新目标元素所在的位置:
公式: 目标元素的left = oEvent.clientX – disX + “px”;
目标元素的top = oEvent.clientY – disY + “px”;
3, 在onmousedown事件(鼠标按下事件)发生以后，给document再添加onmouseup事件(鼠标松开事件)，且在onmouseup事件中，取消document的onmousemove事件;
onmousedown触发事件的对象: 目标元素(即要拖拽的元素);
onmousemove触发事件的对象: document
onmouseup触发事件的对象: document
onmousemove和onmouseup的触发事件对象都是document, 意味着鼠标在网页的任意位置移动鼠标或松开鼠标，都会触发对应的事件;
onmousemove和onmouseup 都要写在onmousedown事件中, 这样就可以保证鼠标按下后才可以移动目标元素(onmousemove)或停止移动(onmouseup)
取消事件的方法：把该事件等于null,(divNode.onmousedown = null;)
事件监听器
事件监听器, 是JS事件中的一种事件触发机制, 我们可以通过添加事件监听器的方式给元素添加事件及执行函数
1, 添加事件监听器
box.addEventListener("click", func, false) : 给box元素添加点击事件(click), 以及事件执行函数func
针对该函数的三个参数作说明:
第一个参数(“click”) : 事件名称(前面没有on)
第二个参数(func): 事件执行函数名称(没有双引号, 也没有())
匿名函数写法：function(){}
第三个参数(false/true) : 是否使用捕捉(反向冒泡)，默认false，为冒泡
注: IE8及其以下不支持，火狐和谷歌支持。
2, 移除事件监听器
box.removeEventListener("click", func) : 将box元素的点击事件(click), 以及对应的事件执行函数func移除
注: 这里只会删除使用box.addEventListener()方法添加的事件监听器
获取style样式
Var cssStyle = box.currentStyle || getComputedStyle(box, null);
例子：console.log(getComputedStyle(box, null).width);
修改style属性的时候只能用 doxNode.style.width =’100px’;
offsetParent参照物父元素(只能取值，不能赋值)
当某个元素的父元素或以上元素都未进行CSS定位时，则返回body元素，也就是说元素的偏移量（offsetTop、offsetLeft）等属性是以body为参照物的
当某个元素的父元素进行了CSS定位时（absolute或者relative），则返回父元素，也就是说元素的偏移量是以父元素为参照物的
当某个元素及其父元素都进行CSS定位时，则返回距离最近的使用了CSS定位的元素
Offsetwidth 类似于 style.width,此处取到的是自身的宽度 Offsetheight 类似于 style.height，此处取到的是自身的高度
oEvent.offsetX 就是鼠标点击的位置距离其所属对象左边界的距离
oEvent.offsetY 就是鼠标点击的位置距离其所属对象上边界的距离