DOM事件类型总结大全
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事件类型总结大全的更多相关文章
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- DOM事件类型详解
一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...
- 深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...
- 深入理解DOM事件类型系列第四篇——剪贴板事件
× 目录 [1]定义 [2]对象方法 [3]应用 前面的话 剪贴板操作可能看起来不起眼,但是却十分有用,可以增强用户体验,方便用户操作.本文将详细介绍剪贴板事件 定义 剪贴板操作包括剪切(cut).复 ...
- 深入理解DOM事件类型系列第三篇——变动事件
× 目录 [1]删除节点 [2]插入节点 [3]特性节点[4]文本节点 前面的话 变动(mutation)事件能在DOM中的某一部分发生变化时给出提示,这类事件非常有用,但都只能使用DOM2级事件处理 ...
- 深入理解DOM事件类型系列第六篇——加载事件
前面的话 提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
- 深入理解DOM事件类型系列——剪贴板事件
定义 剪贴板操作包括剪切(cut).复制(copy)和粘贴(paste)这三个操作,快捷键分别是ctrl+x.ctrl+c.ctrl+v.当然也可以使用鼠标右键菜单进行操作 对象事件 关于这3个操作共 ...
- d3.js:数据可视化利器之 交互行为:响应DOM事件
selection.on:事件监听操作符 on()操作符可以添加或移除选择集中每个 DOM元素的事件监听函数: selection.on(type[,listener[,capture]]) 参数ty ...
随机推荐
- angular 实现时间段选择组件
前段时间公司有个后台项目需要使用一个选择时间段的组件,看了一下就自己写了一下,用angular写这种插件还是很简单的. 先看看最终是什么样子的: 功能是用户可以选择任意时间段,鼠标可以拖动任意的一周的 ...
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...
- Laravel 5.2 教程 - 文件上传
一.简介 Laravel 有很棒的文件系统抽象层,是基于 Frank de Jonge 的 Flysystem 扩展包. Laravel 集成的 Flysystem 提供了简单的接口,可以操作本地端空 ...
- 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
一.打印控件 第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
- nodejs querystring踩坑笔记----只能用于表单提交
API中的实例: var http = require('http'); var querystring = require('querystring'); var postData = querys ...
- HTML标签元素分类(HTML基础知识)
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
- httpd配置ResponseHeader
今天遇到一个问题:我把项目编译后的静态文件发布到开发机上,开发机使用httpd启的静态文件服务,页面的访问是在特制的壳浏览器里面,我更新了代码后,发现页面被缓存了,找到壳的RD联调了一下,发现我的主页 ...
- 玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...
- eclipse C 开发 Stm32
版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下载eclipse需要的运行环境,JDK/JRE. 在http://wiki.eclipse.org/Eclipse/Installation ...
- 【收藏】15个常用的javaScript正则表达式
1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...