事件：
能被js监听到的行为
事件三要素：
1. 事件源: 触发事件的源头，谁触发的这个事件（oBtn）
2. 事件类型：是哪种事件类型，如：鼠标事件，键盘事件。。。。。（click，dblclick，mouseover，mouseout.....）
3. 事件处理函数: 事件触发后执行的行为（{}中会执行的代码）
1,oBtn.onclick = function(){}
2,obtn.onclick = fn
function fn(){}
事件中的this： 指向事件源
普通函数中的this：指向的是window
oBtn.onclick = function(){
this指向的就是oBtn
} oBtn.onclick = fn（不要带括号）
function fn(){ this指向的就是oBtn }<button onclick = 'del(this)'></button>
function del(obj){
obj 指代的就是点击元素
}1、事件绑定（事件注册）：
1.1 DOM0级事件绑定
语法：事件源.on事件类型 = 事件处理函数
距离：div.onclick = function(){}
缺点：不能给同一个对象的同一个事件进行多次绑定
优点：书写简单，兼容性好
1.2 DOM2级事件绑定（事件监听）
1.2.1
语法：事件源.addEventListener("事件类型",事件处理函数，布尔值)；第三参数可以省去
事件源.addEventListener("事件类型",事件处理函数)；第三参数可以省去
优点：可以给同一个对象的同一个事件进行多次绑定
缺点：兼容性不好（IE低版本的不支持该写法）
1.2.2 IE低版本支持
语法：事件源.attachEvent('on事件类型',事件处理函数)；只有两个参数
案列点击div,变色更改内容
1. DOM0级事件绑定
1. DOM0级事件绑定
A写的
// oDiv.onclick = function () {
// this.style.backgroundColor = 'yellow'
// }
B写的
// oDiv.onclick = function () {
// this.innerHTML = 'yellow'
// }2. DOM2级事件绑定
A
oDiv.addEventListener('click',function(){
this.style.backgroundColor = 'yellow'
})
B
oDiv.addEventListener('click',function(){
this.innerHTML = 'yellow'
})
DOM0级解绑：
事件源.on事件类型 = null
DOM2级解绑：
语法：事件源.removeEventListener('事件类型',事件处理函数)
注意：先绑定再移除（函数再外面单独书写）
1·绑定 事件源.addEventListener('事件类型',fn)
2·移除 事件源.removeListener('事件类型',fn)
function fn(){}
var oBtn = document.querySelector('button')
var oDiv = document.querySelector('div')
// // 1. DOM0级事件绑定
// // 鼠标已入
// oBtn.onmouseover = function () {
// oDiv.style.backgroundColor = 'yellow'
// }
// // 鼠标移出
// oBtn.onmouseout = function () {
// oDiv.style.backgroundColor = 'pink'
// // 移出的时候把移入事件给清除了
// oBtn.onmouseover = null;
// }2. DOM2级事件绑定和解绑
/ 绑定了两个事件
oBtn.addEventListener('mouseover',fn1)
oBtn.addEventListener('mouseout',fn2)
function fn1(){
oDiv.style.backgroundColor = 'yellow'
}
function fn2(){
oDiv.style.backgroundColor = 'pink'
// 移除的时候，解绑移入事件
oBtn.removeEventListener('mouseover',fn1)
}
js类型：
鼠标事件
click 单击
dblclick 双击
mouseover/mouseout 移入移出
mouseenter/mouseleave 移入移出
mousedown/mousemove/mouseup 按下/移动/抬起 （拖拽）
contextmenu 右键
表单事件
focus 获取焦点时触发
blur 失去焦点时触发
input 输入内容时触发
change 内容改变时触发
submit 提交时触发
reset 重置时触发
键盘事件
注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown ：按下键盘的键时触发的，会连续触发
keypress：按住键盘中键时触发的，会连续触发
keyup：从键盘中的一个键抬起时触发，从键上抬起的那一刻触发一次（**）
案列，输入内容时span得内部数字发生变化
1. 输入内容的个数？oIpt.value.length
2. 还剩多少个 100 - 输入的个数
3. 放到span中
$('input').onfocus = function(){
$('span').innerHTML = '亲，请输入'
this.nextElementSibling.style.color = 'red'
this.style.color = 'green'
}
$('input').onblur = function(){
this.nextElementSibling.innerHTML = ''
}键盘事件
注意：不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown ：按下键盘的键时触发的，会连续触发
keypress：按住键盘中键时触发的，会连续触发
keyup：从键盘中的一个键抬起时触发，从键上抬起的那一刻触发一次（**
// $('input').onkeydown = function(){
// console.log(1);
// }
// $('input').onkeypress = function(){
// console.log(1);
// }
// $('input').onkeyup = function(){
// console.log(1);
// }事件对象：
干什么的：事件对象中包含（记录）该事件发生时的一系列的信息
事件对象的获取：
标准浏览下获取:
事件处理函数的参数位置，书写一个参数，这个参数就是事件对象
odiv.onclick = function(e){
e就事件对象
}
IE低版本获取： 事件处理函数的内部用window.event来表示事件对象
处理兼容性问题：
odiv.onclick = function(e){
var ev = e || window.event;//ev就是兼容性的事件对象
鼠标事件对象的一些属性：
1. e.pageX和e.pageY : 鼠标点击位置距离页面的左偏移量和上偏移量
1. e.clientX和e.clientY ：鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
1. e.offsetX和e.offsetY ：鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量
$('div').onclick = function (e) {
// console.log("e.clientX:"+e.clientX+","+"e.pageX:"+e.pageX);
// console.log("e.clientY:"+e.clientY+","+"e.pageY:"+e.pageY);
console.log(e.clientX);
console.log(e.clientY);
}