事件,就是函数在某种状态下被调用.JS捕捉到的发生在网页上的行为,官方称为事件句柄,是交互体验的核心功能。就是元素在某种状态达成时，要执行的前提设定好的程序。
事件的三要素: 缺一不可！
1 事件源====>触发的节点
2 事件类型====>某种状态
3 事件处理程序====>函数
事件绑定方式：
1.行内绑定方式在标签行内 的事件值上写上标志"javaScript:后跟js代码"：可以绑多个
<button οnclick="javaScript:alert(666)">点我</button>
"javaScript:alert(666)"===>执行体，当点击后会当作js代码运行。
举例：
<body>
<div class="box" onclick="javaScript:myconsole.mylog()"></div>
<script>
var myconsole={
mylog:function(){
console.log("我自己的打印");
}
}
</script>
2.元素属性绑定方式：只能绑定一个，需要多个时，就需要调用多次。
ele.onxxx=function(event){}
举例：
box.onclick=fucntion(){
console.log("打印1")
}
box.onclick=fucntion(){
console.log("打印2")
}
打印===>打印2，绑定多个时前面的会被后面的覆盖
3.同元素多处理程序绑定方式1：给元素添加监听器。可以绑定多个
obj.addEventListener(type,fn,false)
type：事件类型，事件名字
fn：监听函数
false：默认不写，【在事件机制中会详细讲解】
举例：
box.addEventListener("click",function(){
console.log(123)
})
4.同元素多处理程序绑定方式2
IE浏览器：
box.addchEvent("click",function(){
console.log(123)
})
兼容：
box.add= box.addEventListener|| box.addchEvent
box.add("click",function(){
console.log(123)
})
事件解绑
1、ele.οnclick=false/' '/null;===>行内和属性绑定方式解绑
举例：
box.onclick=fucntion(){
box.noclick=null
}
2、ele.removeEventListener(type,fn,false);
举例：
box.addEventListener("click",fn=function(){
console.log(123)
})
box.removeEventListener("click",fn)
3、ele.detachEvent("on"+type,fn);
事件类型：
on是绑定的意思
鼠标事件
1、click：鼠标按下和松开时都在所选区域、
mousedown：鼠标在备选区域按下、
mousemove：在备选区域移动，和时间位置有关、
mouseup：在备选区域松开、
dblclick：(双击)第一次按下和第二松开时，鼠标在被选区域内时间间隔要短、
contextmenu、
mouseenter(html5标准)、mouseover：在备选区域进入、
mouseleave(html5标准)、mouseout：在备选区域出去、
onwheel:鼠标滚轮滚动时，鼠标指针在备选区域
2、DOM3标准规定：click事件只能监听左键，mousedown和 mouseup来判断鼠标键,event.button来区分鼠标的按键，0/1/2
键盘事件
1、keydown：输入框的键盘按下了，按下不松手会一直触发，监听键盘：不一定可以绑定输入框，表格也可以、
keyup：输入框的键盘松开、
keypress：输入框的键盘按着，按下不松手就会一直触发
输入框操作事件
1、input：用户输入时触发、监听元素；
focus():是个函数让输入框自动获焦、
focus:输入框获取焦点时触发
blur：输入框失焦是触发、
change：输入框失焦，框内的value值发生变化才触发
其他事件
1、scroll：常用于绑定在window对象上,滚动滚动条时触发:单位时间内滚动条的位置发生变化就会触发，
wheel:鼠标滚轮滚动时，鼠标指针在备选区域,
举例：window.οnscrοll=func
//wheel 它是鼠标的
2、load：等待网页资源下载完毕再执行
img.onload 图片节点加载完毕不会调用 要资源加载完毕就会调用
window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的。浏览器加载完毕：5大BOM的功能加载完成才调用。
事件对象
事件对象上存储着事件发生时的相关信息，就是事件触发时handler函数内部会传入数据，就是触发时的信息
a) 事件处理函数形参ev(event)，
b) 全局对象 window.event
// 兼容性写法 var event= ev|| window.event
var e=(e.constructor==PointerEvent&&e)||window.event
事件对象携带的信息
事件源对象：
event.target 火狐只有这个
event.srcElement IE6/78只有这个
这两个chrome都有
兼容性写法 var ele=event.target|| event.srcElement
鼠标事件触发时:
altKey 鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey 鼠标事件发生时，是否按下windows/commond键,返回一个布尔
shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔
pageX 鼠标点击的 X 坐标；(包含body隐藏的)
pageY 鼠标点击的 Y 坐标；(包含body隐藏的)
clientX clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素(不包括body隐藏的)
screenX screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素
movementX，movementY返回一个位移值，单位为像素，表示当前位置与上一个mousemove事件之间的距离，从左往右为正，从右往左为负。
offsetX/offsetY 相对于元素自己的x/y 跟它是否是定位的元素无关
键盘事件触发时:
charCode/keyCode 键码值 key 键码
37左
38上
39右
40下
13enter
this
1.行内:
<buttontype="button"onclick="fn(this)">xxx</button>
<scripttype="text/javascript">
function fn (e) {
console.log(e,this)//btn和window
}
</script>
//行内绑定时 行内的环境对象是btn 函数的调用者是window 无法获取事件对象
2.元素属性: this指向的是dom元素本身事件对象在参数中
3.addEventListener:this指向的是dom元素本身事件对象在参数中
4.attachEvent: this指向 window事件对象在参数中
3892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
