为了便于使读者更好地运用js事件,就把常用事件大致分为以下几种:
a. 表单元素事件,在表单元素中生效
onfocus ------获取焦点
onblur -------失去焦点
onsubmit ------ 点击提交按钮
onreset --------重新点击鼠标按键
onchange ------框内容改变时,该事件常用于输入字段的验证,用于input输入
eg.离开输入框时,value值转换为大写
x.value=x.value.toUpperCase();
b. 键盘事件:
onkeydown ------键盘按下
onkeyup ---------松开键盘
onkeypress ------按下或者按住键盘
键盘码:
document.onkeydown = function (ev) {
ev = ev || window.event;
console.log(ev.keyCode);
}
组合键盘 ctrl+c
if (ev.ctrlkey && ev.keyCode == 67) {
alert("组合键ctrl+C");
//执行对应的事件
}
c.点击事件
onclick -----单击事件
onblclick -----双击事件
d. 鼠标事件
onmouseover------鼠标移上
onmouseout ------鼠标移出
注意: onmouseover onmouseout事件会出现事件冒泡(图片闪动现象)
relatedTarget 事件属性返回与事件的目标节点相关的节点。
对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
对于其他类型的事件来说,这个属性没有用。
解决办法:
方法一:
document.getElementById('boximg').onmouseover = function(ev){
event = ev || window.event;
// relatedTarget获取鼠标源
var frm = event.relatedTarget || event.fromElement;
while(frm){
if (frm == this) {
return;
}
frm = frm.parentNode;
console.log('hahah');
}
}
document.getElementById('boximg').onmouseout = function(ev){
event = ev || window.event;
// console.log('leave');
var to = event.relatedTarget || event.toElement;
while(to){
if (to == this) {
return false;
}
to = to.parentNode;
console.log(to.nodeName);
}
}
方法二:onmouseenter onmouseleave 不支持事件冒泡
因此,把onmouseover onmouseout 替换为对应的 onmouseenter onmouseleave 事件
onmousedown -----按下鼠标时触发
onmouseup -------松开鼠标时触发
onmousemove-----鼠标移动
e. 窗口事件,只有在body和frameset元素中才有效
onload ----用户进入页面;事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onunload ----用户离开页面
f. 其他:
onresize -----窗口或者框架被重新定义尺寸时触发
jquery常用的事件是在js事件的基础上去掉on即可,例如:onclick 与 click()事件 对应;onsubmit 与 submit() 事件对应等;记住常用的js事件,则jquery事件也差不多记一般了…^-^
希望可以帮助大家~~