js常用事件

为了便于使读者更好地运用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事件也差不多记一般了…^-^

 

希望可以帮助大家~~