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. angular 实现时间段选择组件

    前段时间公司有个后台项目需要使用一个选择时间段的组件,看了一下就自己写了一下,用angular写这种插件还是很简单的. 先看看最终是什么样子的: 功能是用户可以选择任意时间段,鼠标可以拖动任意的一周的 ...

  2. 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

    Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...

  3. Laravel 5.2 教程 - 文件上传

    一.简介 Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包. Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空 ...

  4. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  5. nodejs querystring踩坑笔记----只能用于表单提交

    API中的实例: var http = require('http'); var querystring = require('querystring'); var postData = querys ...

  6. HTML标签元素分类(HTML基础知识)

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

  7. httpd配置ResponseHeader

    今天遇到一个问题:我把项目编译后的静态文件发布到开发机上,开发机使用httpd启的静态文件服务,页面的访问是在特制的壳浏览器里面,我更新了代码后,发现页面被缓存了,找到壳的RD联调了一下,发现我的主页 ...

  8. 玩一玩nodejs--一个简单的在线实时填表应用

    学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...

  9. eclipse C 开发 Stm32

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载eclipse需要的运行环境,JDK/JRE. 在http://wiki.eclipse.org/Eclipse/Installation ...

  10. 【收藏】15个常用的javaScript正则表达式

    1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...