1、事件的绑定方式:内联模式、外联模式/脚本模式
2、事件的类型:
1)鼠标事件:click:当用户点击某个对象时调用的事件句柄
dblclick:当用户双击某个对象时调用的事件句柄
mousedown:鼠标按钮被按下
mouseup:鼠标按键被松开
mouseover:鼠标移到某元素之上
mouseout:鼠标从某元素移开
mousemove:鼠标被移动
2)键盘事件:keydown:某个键盘按键被按下
keypress:某个键盘按键被按下并松开
keyup:某个键盘按键被松开
3)HTML事件:load:一张页面或一幅图像完成加载
unload:用户退出页面
scroll:当文档被滚动时发生的事件
scrollTop:返回被选元素的垂直滚动条位置
scrollLeft:返回被选元素的水平滚动条位置
resize:窗口或框架被重新调整大小
blur:元素失去焦点时触发
focus:元素获取焦点时触发
select:用户选取文本时触发 (<input>和<textarea>)
change:表单元素的内容改变时触发(<input>、<keygen>、<select>和<textarea>)
submit:表单提交时触发
reset:表单重置时触发
语法:元素节点.on + 事件类型 = 函数;
3、获取事件对象:
document.getElementById("id").onclick = function(even){
var e = even || window.event;
alert(e);
}
4、事件对象的属性:
1)鼠标事件对象:button:返回当事件被触发时,哪个鼠标按钮被点击
参数0:指定鼠标左键
参数1:指定鼠标中键
参数2:指定鼠标右键
clientX/Y:返回当事件被触发时鼠标指针相对于浏览器页面(或当前窗口)的水平/垂直坐标
screenX/Y:返回当事件被触发时鼠标指针相对于屏幕的水平/垂直坐标
pageX/Y:返回当事件被触发时鼠标指针相对于文档的左边缘/上边缘坐标
shiftKey:返回一个布尔值,指示当事件发生时,Shift键是否被按下并保持住
ctrlKey:返回一个布尔值,指示当事件发生时,Ctrl键是否被按下并保持住
altKey:返回一个布尔值,指示当事件发生时,Alt键是否被按下并保持住
metaKey:返回一个布尔值,指示当事件发生时,windows/command键是否被按下并保持住
2)键盘事件对象:keyCode:返回onkeypress事件触发键值的字符代码或onkeydown/onkeyup事件触发键的代码
字符代码:ASCII字符的数字
键盘代码:键盘上真实键的数字
charCode:返回onkeypress事件触发键值的字符代码
3)target:返回事件的目标节点(触发该事件的节点)
document.getElementById("id").onclick = function(even){
var e = even || window.event;
var target = e.target || window.event.srcElement;
alert(target);
}
5、事件流:
事件流是描述的从页面接受事件的顺序。当几个都具有事件的元素层叠在一起的时候,点击其中一个元素,并不是只有当前被点击的元素会触发事件,而是层叠在点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获
1)事件冒泡:根据层级由里向外逐层触发
2)事件捕获:根据层级由外向里逐层触发
阻止事件冒泡:
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
6、阻止右键菜单:
document.oncontextmenu = function(){
return false;
}
阻止默认行为:
function preDef(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
7、事件委托:
利用冒泡的原理,把事件加到父级上,触发执行效果
流程:1)找到当前节点的父节点或祖先节点
2)将要添加的事件添加在找到的节点上
3)找出触发对象,如果触发对象符合条件,进行后续操作
8、拖拽:
function drag(node){
var offsetX = 0;
var offsetY = 0;
node.onmousedown = function(ev){
var e = ev || window.event;
//记录相对位置
offsetX = e.clientX - node.offsetLeft;
offsetY = e.clientY - node.offsetTop;
//添加鼠标移动
document.onmousemove = function(ev){
var e = ev || window.event;
node.style.left = e.clientX - offsetX + 'px';
node.style.top = e.clientY - offsetY + 'px';
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
9、事件监听器:
1)addEventListener():用于向指定元素添加事件句柄
element.addEventListener(event, function, useCapture)
event:字符串,指定事件名
function:指定要事件触发时执行的函数
useCapture:布尔值,指定事件是否在捕获或冒泡阶段执行
true:事件句柄在捕获阶段执行
false:默认。事件句柄在冒泡阶段执行
2)removeEventListener():用于移除由addEventListener()方法添加的事件句柄
element.removeEventListener(event, function, useCapture)
event:要移除的事件名称
function:指定要移除的函数。
useCapture:布尔值,指定移除事件句柄的阶段
true:在捕获阶段移除事件句柄
false:默认。在冒泡阶段移除事件句柄
3)IE事件处理函数及浏览器兼容:
A、添加事件
function addEvent(node, eventType, func){
if(node.addEventListener){
node.addEventListener(eventType, func, false);
}else{
node.attachEvent("on" + eventType, func);
}
}
B、删除事件
function removeEvent(node, eventType, func){
if(node.removeEventListener){
node.removeEventListener(eventType, func);
}else{
node.detachEvent("on" + eventType, func)
}
}