为了便于使读者更好地运用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常用事件的更多相关文章

  1. JS常用事件的总结

    JS常用事件的总结 outsbumit     表单提交事件 onload     页面加载事件 onclick     鼠标单击某个对象事件 ondblclick     鼠标双击某个对象事件 on ...

  2. js 常用事件总结

    无论web端还是手机端,用户的交互总伴随着事件监听 下面是我总结的一些常用到的事件 1.监听标签内容变化 非input元素 $(dom).bind('DOMNodeInserted',function ...

  3. js 常用事件

    onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的. 如:点击验证码时进 ...

  4. js 常用事件句柄总结

    HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,这些属性可插入 HT ...

  5. js常用事件列表

    onmousedown.onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分.首先当点击鼠标按钮时,会触发 ...

  6. js常用事件及事件对象

  7. js的事件冒泡

    先来段代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  9. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

随机推荐

  1. 53环境Jenkins新增工程配置

    1. 登录http://10.179.175.53:8080/环境. 2. 点击新建任务,输入任务名称,并在复制一个NOS的类似工程即可. 3. 在配置页面,修改源码地址: 4. 点击完成,执行构建, ...

  2. 现代C++之理解decltype

     现代C++之理解decltype decltype用于生成变量名或者表达式的类型,其生成的结果有的是显而易见的,可以预测的,容易理解,有些则不容易理解.大多数情况下,与使用模板和auto时进行的类型 ...

  3. javaScript——原型继承四步曲

    <script> //js模拟类的创建以及继承 //第一步:创建父类 function Parent(name){ this.name = name; } //给父类添加属性方法 Pare ...

  4. 025_set专题

    一.sed过滤maven的setting文件的XML注释 sed 's/<!--.*-->//g' /usr/local/apache-maven-3.5.0/conf/settings. ...

  5. centos6.5/centos7安装部署企业内部知识管理社区系统wecenter

    企业内部知识系统wecenter社区系统安装及部署 centos 6.5环境安装 因为是公司内部使用在线人数不会太多,使用yum安装lamp环境即可 1.安装lamp基本环境 yum -y insta ...

  6. Android数据存储:SQLite

    Android数据存储之SQLite SQLite:Android提供的一个标准的数据库,支持SQL语句.用来处理数据量较大的数据.△ SQLite特征:1.轻量性2.独立性3.隔离性4.跨平台性5. ...

  7. 浅谈C语言内存管理、内存泄露、堆栈

    1.内存分配区间:         对于一个C语言程序而言,内存空间主要由五个部分组成:代码段(.text).数据段(.data).静态区(.BSS).堆和栈组成.         BSS段:BSS段 ...

  8. layui上传文件配合进度条

    首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...

  9. LiteQuery MAX(Integer)、MAX(String) 判断是否返回值

    unit Unit6; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...

  10. 查看Linux端口的占用及连接情况

    [root@cloudplatform ~]# netstat -nap | grep 22066 | grep 127.0.0.1 -vtcp        0      0 :::22066    ...