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 ...
随机推荐
- JS模式--装饰者模式(用AOP动态改变函数的参数)
Function.prototype.before = function (beforefn) { var _self = this; return function () { beforefn.ap ...
- 用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...
- 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
一.打印控件 第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
- JDK版本不匹配...
Java compiler level does not match the version of the installed Java project facet. 今天从把交通厅的项目,导进来就报 ...
- TypeScript基本知识(为学习AngularJS2框架做个小铺垫)
学习angularjs2框架,需要了解一些TypeScript知识点,基本了解下面这几个知识点学习AngularJS2 就够用了 1.TypeScript 1.1显示类型的定义 TypeScript类 ...
- shell入门笔记1:执行方式、运行方式、变量、替换
说明: 本文是关于http://c.biancheng.net/cpp/shell/的相关笔记 shell的两种执行方式 交互式(interactive) 解释执行用户的命令,用户输入一条命令,She ...
- zabbix安装配置
实验环境 主机名 操作系统版本 IP地址 安装软件 console CentOS 7.0 114.55.29.246 Httpd.Nginx.MySQL.Zabbix log1 CentOS 7.0 ...
- Jquery ajaxSubmit()的浏览器兼容问题
form.ajaxSubmit({ 2 beforeSubmit: function() { 3 if (FinanceUtil.validate(form)) { 4 FinanceUtil.loa ...
- three.js粒子效果(分别基于CPU&GPU实现)
前段时间做了一个基于CPU和GPU对比的粒子效果丢在学习WebGL的群里,技术上没有多作讲解,有同学反馈看不太懂GPU版本,干脆开一篇文章,重点讲解基于GPU开发的版本. 一.概况 废话不多说,先丢上 ...
- 【JAVAWEB学习笔记】06_jQuery基础
接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...