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事件也差不多记一般了…^-^

js常用事件

希望可以帮助大家~~

上一篇:JS常用事件的总结


下一篇:js常用事件及事件对象