[A] 认识事件
事件基础：Javascript事件是由访问web页面的用户引起的一系列操作；
当用户执行某些操作的时候，再去执行一些列代码；
或者获取事件的详细信息，如鼠标位置，键盘按键等。
1. javascript可以处理的事件类型为：
A.鼠标事件
click: 单击鼠标的键钮。
dblclick： 双击鼠标的键钮。
mouseover： 鼠标移入。
mouseout： 鼠标移出。
mousemove： 鼠标移入(不停的触发)。
mousedown： 鼠标的键被按下。
mouseup： 鼠标的键被释放弹起。
mouseenter: 鼠标移入(冒泡，即同样会去触发子节点)。
mouseleave: 鼠标移出(冒泡，即同样会去触发子节点)。
B.键盘事件(表单元素，全局window)
keydown： 键盘按下(若按下不松手，则会一直触发)
keyup： 键盘抬起
keypress： 键盘按下(只支持字符键)
C.HTML事件
1.window事件
load 当页面加载完成以后的触发
unload 当页面解构(页面刷新，关闭等使页面消失)的时候触发。
scroll 当前页面发生滚动时触发
resize 当前窗口发生大小变化时触发
2.表单事件
blur 失去焦点
focus 获取焦点
select 在输入框中选中文本时触发
change 输入框中的文本被修改，并且失去焦点
【注】必须添加在form元素上
submit 当点击submit按钮时触发
reset 当点击reset按钮时触发
2. 所有事件处理函数都会有两个部分组成，on+事件名称
【注】系统会在在事件绑定完成的时候，生成一个事件对象；
事件触发的时候，系统会自动去调用事件绑定的函数，将事件对象当作是第一个参数传入。
// 这种通过形参拿事件事件对象的方式在IE8以下不兼容，IE8以下用window.event // IE8以下调用方式(固定用法) function show(ev){ var e = arg||window.event; alert(e); }
3. javascript事件绑定的两种模式：
1.内联模式 事件在行间绑定
function btn(){
alert("你好，很高兴见到你！！！");
}
<div id="div1" onclick="btn()">nihao</div>
2.外联模式/脚本模式(更常用)
事件在window.onload = fucntion(){}函数中调用
[B] 事件绑定方法
事件绑定：
元素节点.on + 事件类型 = 匿名函数
【注】系统会在在事件绑定完成的时候，生成一个事件对象；
当事件被触发的时候，系统会自动去调用事件绑定的函数，将事件对象当作是第一个参数传入。
[C] 鼠标事件对象属性
[D] 键盘事件属性
1. keyCode 键码
which(which为其他操作系统下的键码)
【注】只在keydown下支持，也就是键盘按下才有效
【返回值】键码的返回值不区分大小写的ASCII键码值(支持功能键)
通用的固定调用格式 var w = e.which || e.keyCode;
2. charCode 字符码
which(which为其他操作系统下的键码)
【注】只在keypress下支持。
【返回值】键码的返回值区分大小写的ASCII键码值(不支持功能键)
通用的固定调用格式 var w = e.which || e.charCode;
[E] 事件对象属性：
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
-
-
-
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
-
-
[F] 拖拽效果
1. 拖拽三剑客：mousedown,mousemove,mouseup
2. 实现方法：0. 目标对象设置为可移动的，即 position: absolute；
1. 鼠标左键按下时，记录鼠标与目标对象左上角的相对位置；
2. 鼠标移动时，将目标对象的位置设置为鼠标的位置减去它俩的相对位置；
3. 鼠标左键松开时，目标对象的位置不再变化。
3. 拖拽效果的函数封装：
// 拖拽(可以越界) function dragFree(node){ node.onmousedown = function(ev){ var e = ev || window.Event; // 保存鼠标按下时，鼠标与目标对象的相对位置 var oLeft = e.clientX - node.offsetLeft; var oTop = e.clientY -node.offsetTop; document.onmousemove = function(ev){ var e = ev || window.Event; // 鼠标移动时(此时已持续按下)，修改目标对象的坐标 node.style.left = e.clientX - oLeft + "px"; node.style.top = e.clientY - oTop + "px"; } } node.onmouseup = function(){ document.onmousemove = null; } }
[G] 事件委托
事件委托:
A委托B去买饭
A发布任务 委托方
B接受任务 代理方
事件委托实现步骤：
1. 找到当前节点的父节点或者祖先节点
2. 将事件添加到你找到的父节点或者祖先节点上
3. 找到出发对象，判断出发对象是否是想要的出发对象，再进行后续的安排
window.onload = function(){ var oBtn = document.getElementById("btn1"); var oUl = document.getElementById("ul1"); // var oLists = oUl.getElementsByTagName("li"); oUl.onclick = function(ev){ var e = ev || window.event; var tar = e.target || window.event.srcElement; if(tar.nodeName.toLowerCase() == "li"){ tar.style.backgroundColor = "red"; } } var i = 6; oBtn.onclick = function(){ var node = document.createElement("li"); node.innerHTML = i++ * 111; oUl.appendChild(node); } } <button id="btn1">添加</button> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>
[H] 事件监听器
1. 传统的事件绑定存在两个问题：
a. 给同一个事件多次绑定，后面的会覆盖掉前面的，最终只有最后一个绑定有效
b. 当同一个事件被绑定多个函数时，无法精确的删除其中某一个函数
2. 事件监听器可以解决上述两个问题
事件监听器的方法：
addEventListenser()
格式：node.addEventListenser()
参数：
第一个参数 事件类型，如 click
第二个参数 绑定的函数，如 fun1
第三个参数 布尔值 false 事件冒泡，默认值
true 事件捕获
removeEventListenser()
格式：node.removeEventListenser()
参数：
第一个参数 事件类型，如 click
第二个参数 需删除的函数名，如 fun1
3. 事件监听器的兼容
在低版本IE中不兼容事件监听器
低版本IE支持 attachEvent() 和 detachEvent()
兼容函数：略
[ I ] 动态生成表格
练习
[J] 放大镜效果
等比例放大局部图片
练习