unload:事件在用户退出页面时发生

    window.onload = function(){

      return "页面关闭!";

    };

onblur:失去焦点发生变化

    window.onblur = function(){

      inp.value = inp.value.toUppercase();

    };

onfocus:点击文本框会获得焦点发生

    inp.focus = function(){

      alert('弹出的内容');

    };

onselect:要选中文本框中的内容会执行的事件

    inp.onselect = function(){

      alert('要执行的内容');

    };

onchange:事件会在域的内容发生改变时发生

    inp.onchange = function(){

      alert('要执行的内容');

    };

onreset:当点击重置的时候才会发生

    form.onreset = function(){

      //点击重置,是form;

    };

onsumbit:点击提交

    form.onsumbit = function(){

      alert('要执行的内容');

    };

onresize:当窗口发生大小变换的时候就会执行

    window.onresize = function(){

      alert('要执行的内容');

    };

scrollBy、scrollTo:相对于自己之前的位置发生偏移,一个x一个y轴为参数

    function scroll(){

      window.scrollBy(100,100);

      window.scrollTo(100,100);//绝对,固定

    };

ondbclick:双击发生变化

    inp.ondbclick = function(){

      inp.value = "我双击了";

    };

onclick:点击发生变化

    inp.onclick = function(){

      inp.value = "我点击了";

    };

onmouseover:鼠标经过会发生变化,类似hover效果

    inp.onmouseover = function(){

      inp.value = "我鼠标滑过了";

    };

onmouseout:鼠标移除会发生变化

    inp.onmouseout = function(){

      inp.value = "我鼠标移除来了了";

    };

onmousedown:鼠标按键按下去会发生变化

    inp.onmousedown = function(){

      inp.value = "我鼠标按下来了";

    };

onmouseup:按键按下去并释放松开会发生变化

    inp.onmouseup = function(){

      inp.value = "我鼠标按下并释放了";

    };

onkeydown:按下键盘去会发生变化

    inp.onkeydown = function(){

      inp.value = "我按下键盘了";

    };

onkeyup:按下键盘去会发生变化

    inp.onkeyup = function(){

      inp.value = "我松开键盘了";

    };

DOM事件类型总结大全的更多相关文章

  1. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  2. DOM事件类型详解

    一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...

  3. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  4. 深入理解DOM事件类型系列第五篇——文本事件

    × 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...

  5. 深入理解DOM事件类型系列第四篇——剪贴板事件

    × 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...

  6. 深入理解DOM事件类型系列第三篇——变动事件

    × 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...

  7. 深入理解DOM事件类型系列第六篇——加载事件

    前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...

  8. 深入理解DOM事件类型系列——剪贴板事件

    定义 剪贴板操作包括剪切(cut).复制(copy)和粘贴(paste)这三个操作,快捷键分别是ctrl+x.ctrl+c.ctrl+v.当然也可以使用鼠标右键菜单进行操作 对象事件 关于这3个操作共 ...

  9. d3.js:数据可视化利器之 交互行为:响应DOM事件

    selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...

随机推荐

  1. JS模式--通用对象池的实现

    var objectPoolFactory = function (createObjFn) { var objectPool = []; return { create: function () { ...

  2. MongoDB副本集的常用操作及原理

    本文是对MongoDB副本集常用操作的一个汇总,同时也穿插着介绍了操作背后的原理及注意点. 结合之前的文章:MongoDB副本集的搭建,大家可以在较短的时间内熟悉MongoDB的搭建和管理. 下面的操 ...

  3. Echarts环形进度使用 【1 简单的使用示例】

    使用中说明几点属性:  hoverAnimation:false,//此处查了好久属性//控制鼠标放置在环上时候的交互//这里一个简单的示例使用Echarts 环形图使用方式//常用于统计完成进度等等 ...

  4. PHP三维数组拼装

    foreach ($records as $k => $v) { foreach ($records as $m => $n) { if ($v['days'] == $n['days'] ...

  5. Linux:PS命令详解与使用

    要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程,ps命令就是最基本进程查看命令.使用该命令可以确定有哪些进程正在运行和运行的状态.进程是否结束.进程有没有僵尸.哪些进程占 ...

  6. Vector的浅析

    Vector 可实现自动增长的对象数组.java.util.vector 提供了向量类(vector)以实现类似动态数组的功能.在Java语言中没有指针的概念,但如果正确灵活地使用指针又确实可以大大提 ...

  7. Python装饰器实现几类验证功能做法(续)

    :昨天聊了一下构造.今天试了一下.感觉昨天聊的还是不够细化.今天结合代码实现,加以一点补充. 首先观察下面这个例子 from functools import wrapsdef decorator(f ...

  8. AlertDialog中的EditText不能输入

    一.描述 在项目中有碰到使用AlertDialog,给他设置自定义布局,自定义布局中有包含EditText,但是运行起来后发现EditText不能输入文字,没有焦点,一开始还以为是事件拦截掉了,后来试 ...

  9. EntityFramework6.X之DataAnnotations

    DataAnnotations 在web开发中不仅在客户端需要执行验证逻辑,会对会对用户向表单中输入的数据给出一个即时反馈:且在服务器端也需验证逻辑,因为来自网络的信息都是不能信任的.在MVC中通常是 ...

  10. TWaver 2D+GIS+3D的试用和在线Demo

    TWaver 2D for HTML5试用下载: http://download.servasoft.com/dl/twaver/sssyuwyeriUR/k/twaver-html5-5.4.7.z ...