事件介绍
事件处理由三部分组成:
1.触发事件的元素节点对象
2.事件处理函数
3.事件执行函数
例如:单击文档任意处.
document.onclick = function(){
console.log('单击了文档页面某一个地方')
};
在上面的程序中:
docunment:是触发事件的对象,表示触发事件的元素所在区域
onclick:表示一个事件处理函数(on+事件类型click)
function(){};匿名函数是被执行的函数,用于触发事件后执行
所有的事件处理函数都会有两部分组成,on+事件类型;
例如:onclick事件处理函数就是on加上click
注意事件处理函数一般都是小写字母
事件的分类
JavaScript可以处理的事件种类分有三种:鼠标事件,键盘事件和HTML事件
1.鼠标事件:页面所有元素都可以触发鼠标事件
click:当单击鼠标按钮并在松开时触发
onclick = function(){
console.log('单击了鼠标')
}
dblclick:当双击鼠标按钮时触发
onclick = function(){
console.log('双击了鼠标')
}
mousedown:当前按下了鼠标还未松开时触发
onmousedown = function(){
console.log('按下了鼠标')
}
mouseup:释放鼠标按钮时触发
mouseover:当鼠标移入某个元素的那一刻触发
mouseout:当鼠标移出某个元素的那一刻触发
mousemove:当鼠标指针在某个元素上移动时触发
mouseenter:当鼠标移入某个元素的那一刻触发
mouseleave:当鼠标刚移出某个元素的那一刻触发
mouseover和mouseenter的区别是:
mouseover:元素的子元素移入也会触发事件
mouseenter:元素的子元素移入不会触发事件
键盘事件
键盘事件:在键盘上按下键时触发的事件
(一般由window对象或者document对象调用)
keydown:当用户按下键盘上某个键触发,如果按住不放,会重复触发
window.onkeydown = function(){
console.log('按下了键盘上的某个键')
}
keypress:当用户按下键盘上的字符键触发,如果按住不放会重复触发
keyup:当用户释放键盘上的某个按键时触发
HTML事件
HTML事件,跟HTML页面相关的事件
load:当页面完全加载后触发
window.onload = function(){
console.log('页面已经加载完毕')
}
unload:当页面完全卸载后触发
window.unload = function(){
console.log('页面已经卸载完毕')
}
select:当用户选择文本框(input或者 textarea)中的内容触发
input onselect = function(){
console.log('选择了文本框中的内容')
}
change:当文本框(input或者 textarea)中的内容改变且失去焦点后触发
input.onchange = function(){
console.log('文本框中内容改变了')
}
focus:当页面或者元素获得焦点时触发
input.onfocus = function(){
console.log('文本框获得了焦点')
}
blur:当页面或者元素失去了焦点时触发
submit:当用户点击提交按钮在<form>元素节点上触发
form.onsubmit = =function(){
console.log('提交form表单')
}
reset:当用户点击重置按钮在<form>元素节点上触发
scroll:当用户滚动带滚动条的元素时触发
window.onscroll = function(){
console.log('滚动了滚动条')
}
事件对象Event
1事件对象(event对象)是什么?
event对象是在触发事件时,浏览器会通过函数把事件对象作为参数传递过来,在事件触发执行函数式一般会得到一个隐藏的函数,该函数也是放在argument数据中
2事件对象的属性
button:鼠标按下了哪个键
例如:
document.onclick = function(evt){
var e = evt || event
console.log(e.button)
}
clienX:浏览器可视区域的X坐标
clienY:浏览器可视区域的Y坐标
pageX: 浏览器内容区域的x坐标
pageY: 浏览器内容区域的y坐标
screenX: 显示器屏幕的x坐标
screenY: 显示器屏幕的y坐标
offsetX: 鼠标点击的元素位置距离元素左边界的x坐标
offsetY: 鼠标点击的元素位置距离元素上边界的y坐标
target:目标对象,存放绑定事件的元素节点对象
3.键盘事件的组合键
键盘上某些键可以配合鼠标来触发一些特殊的事件,比如Shift,Ctrl,Alt
shiftkey:判断是否按下了Shift键
ctrlkey:判断是否按下了ctrl键
altkey:判断是否按下了alt键
键码:keyCode属性
所有按键在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应.对数字字母字符集,keyCode属性的值与ACSII码中对应
注意大写字母或小写字母的编码相同,都为大写字母的编码
字符编码:charCode属性
Firefox, Chrome和Safari的event对象支持charCode属性, 只有按下字符键并且使用keypress事件时才会得到charCode, 这个charCode的值和ASCII码对应, 和keyCode也类似, 但是charCode的字母区分大小写. ( 字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )
事件中的this
在JS事件中, this表示触发事件的元素节点对象;
var box = document.getElementById('box');
box.onclick = function() {
console.log(this.nodeName); //this表示box对象
};
通过for循环添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) {
aInput[i].index = i;
aInput[i].onclick = function() {
console.log(this.index);
};
}