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 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
py-charm延长试用期限实例
2019/12/22 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
高中校园广播稿
2014/01/11 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
运动员代表致辞
2015/07/29 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
Python实现8种常用抽样方法
2021/06/27 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python