JavaScript常用事件介绍


Posted in Javascript onJanuary 21, 2019

JavaScript 事件(常用)

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick 事件来触发某个函数。事件在HTML 页面中定义。

事件举例:

  • 鼠标点击
  • 页面或图像载入
  • 鼠标悬浮于页面的某个热点之上
  • 在表单中选取输入框
  • 确认表单
  • 键盘按键

注意:事件通常与函数配合使用,当事件发生时函数才会执行。

JavaScript常用事件介绍

事件三要素

事件源、事件、事件驱动程序。

三句话:获取事件源、绑定事件、书写事件驱动程序。

  • 1.获取事件源:document.getElementById(“box”);
  • 2.绑定事件:  box.onclick = function(){ 程序 };
  • 3.书写事件驱动程序:以后要学习的关于DOM的操作

JavaScript常用事件介绍

JavaScript常用事件介绍

行内绑定事件:

JavaScript常用事件介绍

JavaScript常用事件介绍

JavaScript常用事件介绍

onload事件用于body标签控制整个页面(主要用于页面一加载就触发)

JavaScript常用事件介绍

a.窗口事件,只在body和frameset元素中才有效

  •     onload      页面或图片加载完成时
  •     onunload     用户离开页面时

b.表单元素事件,在表单元素中才有效

  •     onchange     框内容改变时
  •     onsubmit     点击提交按钮时
  •     onreset     重新点击鼠标按键时
  •     onselect     文本被选择时
  •     onblur      元素失去焦点时
  •     onfocus     当元素获取焦点时

c.键盘事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

  •     onkeydown    按下键盘按键时
  •     onkeypress    按下或按住键盘按键时
  •     onkeyup     放开键盘按键时

d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

  •     onclick     鼠标点击一个对象时
  •     ondblclick    鼠标双击一个对象时
  •     onmousedown 鼠标被按下时
  •     onmousemove 鼠标被移动时
  •     onmouseout    鼠标离开元素时
  •     onmouseover 鼠标经过元素时
  •     onmouseup    释放鼠标按键时

e.其他

  •     onresize     当窗口或框架被重新定义尺寸时
  •     onabort     图片下载被打断时
  •     onerror     当加载文档或图片时发生错误时

自定义对象:有初始化对象和定义构造函数的对象两种方法

a:初始化对象

例如:对象={属性1:值1;属性2:值2;......属性n:值n} 注意:每个属性/值对之间用分号隔开;

b: 定义构造函数的对象

例如:

function 函数名(属性1, 属性2,......属性N){
this.属性1=属性值1;
this.属性2=属性值2;
this.属性n=属性值n;
this.方法名1=函数名1;
this.方法名2=函数名2;
}

注意:方法名和函数名可以同名,但是在方法调用函数前,函数必须已经定义好,否则会出错为自定义的函数创建新的实例一样是使用new语句。

  • onfocus/onblur 聚焦离焦事件表单校验比较合适
  • 0nclick/ondblclick 鼠标单击或双击事件
  • Onkeydown/onkeypress 搜索引擎使用较多(键盘某个键被按下或按住)
  • Onload 页面加载事件(整个页面js、css等),所有的其它操作(匿名方式)都可以放到这个绑定函数里面去
  • Onmouseover/onmouseout/onmousemove 购物网站商品详细信息
  • Onsubmit 表单提交事件,有返回值,控制表单是否提交。onsubmit="return 函数名()"
  • Onreset 重置按钮被点击
  • Onchange 当用户改变内容的时候使用这个事件(二级联动)
  • oninput 当表单值发生改变时触发事件(h5新样式)

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示: 该事件类似于onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发,onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

如有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
犀利的js 函数集合
Jun 11 Javascript
javascript随机之洗牌算法深入分析
Jun 07 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
详解ES6中的let命令
Apr 05 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
js实现3D旋转相册
Aug 02 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
JavaScript闭包与作用域链实例分析
Jan 21 #Javascript
js中事件对象和事件委托的介绍
Jan 21 #Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
Jquery的Ajax技术使用方法
Jan 21 #jQuery
js变量声明var使用与不使用的区别详解
Jan 21 #Javascript
Vue中Axios从远程/后台读取数据
Jan 21 #Javascript
You might like
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
jQuery中使用validate插件校验表单功能
2019/05/24 jQuery
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
python 创建一维的0向量实例
2019/12/02 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL