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 ...
随机推荐
- 腾讯云无法绑定公网IP问题解释与解决方案。
http://blog.csdn.net/chenggong2dm/article/details/51475222 解释:公网IP并不直接配置在服务器上,而是在服务器外部的路由上,通过某种映射连接. ...
- Oracle学习历程--创建用户,分配表空间
记录下学习Oracle12c的过程中的点点滴滴. Oracle12c新特性:http://www.cnblogs.com/kerrycode/p/3386917.html --创建临时表空间CREAT ...
- AspNetCore-MVC实战系列(三)之个人中心
AspNetCore - MVC实战系列目录 . 爱留图网站诞生 . git源码:https://github.com/shenniubuxing3/LovePicture.Web . AspNetC ...
- 【算法系列学习】SPFA邻接表最短路 [kuangbin带你飞]专题四 最短路练习 F - Wormholes
https://vjudge.net/contest/66569#problem/F 题意:判断图中是否存在负权回路 首先,介绍图的邻接表存储方式 数据结构:图的存储结构之邻接表 邻接表建图,类似于头 ...
- nodejs版本管理工具NVM(Node Version Mene)
最近打算用心学习nodejs,所以在学习中了解到NVM-nodejs的版本管理工具,下面我就记录下我学习并且安装的详细过程,请大神们放过~~第一步.你要先把你本机上安装的nodejs以及npm相关的东 ...
- ST-1之乱码bug
我印象最深刻的一个错误就是乱码.上学期末做web期末作业时候,我就遇到了好多乱码问题.乱码问题并不是程序本身的逻辑错误,但是却让程序的可用性非常的差.只有输入英文时才能判断结果的正确与否.而且编译器又 ...
- linux-redhat-iso 下载
http://archive.download.redhat.com/pub/redhat/linux/9/en/iso/i386/ http://www.jb51.net/do/plus/downl ...
- maven的三大生命周期
一.Maven的生命周期 Maven的生命周期就是对所有的构建过程进行抽象和统一.包含了项目的清理.初始化.编译.测试.打包.集成测试.验证.部署和站点生成等几乎所有的构建步骤. Maven的生命周期 ...
- ucenter 单点登录,终极版
一 ,discuz ecshop 两边登陆都可以同步登陆到另一程序上,但退出则无法实现同步登陆.顺着 Ecshop 的退出流程,顺藤摸瓜找到了 lib_common.php 文件中的 uc_ca ...
- Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一.Js简介和入门 继续跟进JS开发的相关教程. <!-- [使用JS的三种方式] 1.HTML标签中内嵌JS(不提倡使用): 示例:<button onclick="javas ...