1.事件:能被js监听到的行为:
1.1事件三要素:
1. 事件源: 触发事件的源头,谁触发的这个事件(oBtn)
2. 事件类型:是哪种事件类型,如:鼠标事件,键盘事件。。。。。(click,dblclick,mouseover,mouseout.....)
3. 事件处理函数: 事件触发后执行的行为({}中会执行的代码)
举例:
oBtn.onclick = function(){}
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 指代的就是点击元素
}
2、事件绑定(事件注册):
1.1 DOM0级事件绑定
语法:事件源.on事件类型 = 事件处理函数
举例:div.onclick = function(){}
缺点:不能给同一个对象的同一个事件进行多次绑定
优点:书写简单,兼容性好
1.2 DOM2级事件绑定(事件监听)
1.2.1
语法:事件源.addEventListener("事件类型",事件处理函数,布尔值);第三参数可以省去
优点:可以给同一个对象的同一个事件进行多次绑定
缺点:兼容性不好(IE低版本的不支持该写法)
1.2.2 IE低版本支持
语法:事件源.attachEvent('on事件类型',事件处理函数);只有两个参数;
3.DOM事件解绑:
DOM0级解绑:
事件源.on事件类型 = null
DOM2级解绑:
语法:事件源.removeEventListener('事件类型',事件处理函数)
注意:先绑定再移除(函数在外面单独书写)
1·绑定 事件源.addEventListener('事件类型',fn)
2·移除 事件源.removeListener('事件类型',fn)
function fn(){}
4. js类型:
鼠标事件:
click 单击
dblclick 双击
mouseover/mouseout 移入移出
mouseenter/mouseleave 移入移出
mousedown/mousemove/mouseup 按下/移动/抬起 (拖拽)
contextmenu 右键
表单事件:
focus 获取焦点时触发
blur 失去焦点时触发
input 输入内容时触发
change 内容改变时触发
submit 提交时触发
reset 重置时触发
键盘事件:
注意:不是任何元素都可以绑定键盘事件的,window,document.表单元素是可以绑定这几个事件的
keydown :按下键盘的键时触发的,会连续触发
keypress:按住键盘中键时触发的,会连续触发
keyup:从键盘中的一个键抬起时触发,从键上抬起的那一刻触发一次(**)
浏览器事件(都只有仅有window触发):
window.onscroll = function(){} 页面滚动时触发
window.onresize = function(){} 页面窗口大小变化时触发
window.onload = function(){} 页面资源(图片,音频,视频,dom节点)加载完成时触发
5.事件对象:
干什么的:事件对象中包含(记录)该事件发生时的一系列的信息;
事件对象的获取:
标准浏览器下获取:
事件处理函数的参数位置,书写一个参数,这个参数就是事件对象
odiv.onclick = function(e){
e就事件对象
}
IE低版本获取: 事件处理函数的内部用window.event来表示事件对象
处理兼容性问题:
odiv.onclick = function(e){
var ev = e || window.event; (ev就是兼容性的事件对象)
}
鼠标事件对象的一些属性:
1. e.pageX和e.pageY : 鼠标点击位置距离页面的左偏移量和上偏移量;
2. e.clientX和e.clientY :鼠标点击位置距离浏览器窗口的左偏移量和上偏移量;
3. e.offsetX和e.offsetY :鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量;