1.事件概念和事件三要素
事件就是能被JS监听到的的行为。
事件三要素:
1.事件源:触发事件的源头,谁触发的事件谁就是事件源。
2.事件类型:是哪种事件类型,如:鼠标事件,键盘事件…(click, dblclick, mouseover, mouseout…)
3.事件处理函数:事件触发后执行的行为({}中会执行的代码)
2.this的指向
//事件中的this,指向事件源,即oBtn。
oBtn.onclick = function(){
this.style.backgroundColor = '';
}
//普通函数中的this,指向window
function method(){
console.log(this);
}
3.事件的绑定(事件注册)
1.DOM0级事件绑定
语法:事件源.on事件类型 = 事件处理函数;
缺点:不能给同一个对象的同一个事件进行多次绑定。
优点:书写简单,兼容性好。
2.DOM2级事件(事件监听)
语法:事件源.addEventListener("事件类型", 事件处理函数, 布尔值);第三参数可省。
优点:可以给同一个对象的同一个事件进行多次绑定。
缺点:兼容性不佳(IE低版本不支持该写法)
IE低版本支持
语法:事件源.attachEvent("on事件类型", 事件处理函数);只有两个参数。
4.事件的解绑
1.DOM0级事件解绑
语法:事件源.on事件类型 = null;
2.DOM2级事件解绑
语法:事件源.removeEventListener('事件类型', 事件处理函数);
注意:先绑定再移除(函数在外面单独写)
1.绑定:事件源.addEventListener('事件类型', fn);
2.移除:事件源.removeEventListener('事件类型', fn);
function fn(){};
5.事件类型
鼠标事件
click 单击
dblclick 双击
mouseover / mouseout 鼠标移入 / 鼠标移出
mouseenter / mouseleave 鼠标移入 / 鼠标移出
mousedown / mouseup 鼠标按下 / 鼠标弹起
mousemove 鼠标移动
contextmenu 鼠标右键
表单事件
focus 获得焦点时触发
blur 失去焦点时触发
input 输入内容时触发,输入的时候就触发
change 内容发生改变时触发,需要失去焦点一次,内容与初始状态发生了改变就触发。
submit 提交时触发
reset 重置时触发
键盘事件
注意:不是任何元素都可以绑定键盘事件,window,document
表单元素是可以绑定键盘事件的
keydown 按下键盘的按键触发,会连续触发。
keypress 按住键盘的按键触发,会连续触发。
keyup 当键盘中按下的按键弹起时触发。
浏览器事件
window.onscroll = function(){}; 页面滚动时触发
window.onresize = function(){}; 页面窗口大小变化时触发
window.onload = function(){}; 页面资源(图片,视频...)加载完成时触发
6.事件对象
事件对象:
事件对象中包含(记录)该事件发生时的一系列的信息。
事件对象的获取:
标准浏览器下的获取:
事件处理函数的参数位置,书写一个参数,这个参数就是事件对象。
tianIn.onclick = function(e){ };//e就是事件对象
IE低版本获取:事件处理函数的内部用window.event来表示事件对象。
处理兼容性问题:
tianIn.onclick = function(e){
var ve = e || window.event;
//ve就是兼容性的事件对象
}
鼠标事件对象的一些属性:
1.鼠标点击位置距离页面的左偏移量和上偏移量
e.pageX 和 e.pageY
2.鼠标点击位置距离浏览器窗口的左偏移量和上偏移量
e.clientX 和 e.clientY
3.鼠标点击位置距离自身元素(事件源)的左偏移量和上偏移量
e.offsetX 和 e.offsetY