JavaScript--事件入门(24)
// JavaScript事件是由访问Web页面的用户引起的一系列操作;
// 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码;
一 事件介绍
// 事件一般是用于浏览器和用户操作进行交互;最早是IE和Netscape Navigator中出现,作为分担服务器端元算负载的一种手段;
// 而DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件;
// IE9/Firefox/Opera/Safari和Chrome全部已经实现了"DOM2级事件"模块的核心部分;
// IE8之前浏览器仍然使用其专有事件模型;
// JavaScript有三种事件模型:内联模型/脚本模型和DOM2模型;
二 内联模型(HTML事件处理程序)
// 这种模型是最传统的简单的一种处理事件的方法;
// 在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件;
// 虽然内联在早期使用较多,但它是和HTML混写的,并没有与HTML分离; // 在HTML中把事件处理函数作为属性执行JS代码;
<input type="button" value="按钮" onclick="alert('Lee');" /> // 注意单双引号;
// 在HTML中把事件处理函数作为属性执行JS函数;
<input type="button" value="按钮" onclick="box();" /> // 执行JS的函数;
// PS:函数不得放到window.onload里面,这样就看不见了;
三 脚本模型(DOM0级事件处理程序)
// 由于内联模型违反了HTML和JavaScript代码层次分离的原则;
// 我们可以在JavaScript中处理事件,这种处理方式就是脚本模型;
var input = document.getElementsByTagName('input')[0]; // 得到input对象;
input.onclick = function(){ // 匿名函数执行;
alert('Lee');
}
// PS:通过匿名函数,可以直接触发对应的代码;
// 也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟括号);
input.onclick = box; // 把匿名函数赋值给事件处理函数;
input.onclick = null; // 删除事件处理程序;
四 事件处理函数
// JavaScript可以处理的事件类型为:鼠标事件/键盘事件/HTML事件;
JavaScript事件处理函数及其使用列表
事件处理函数 影响的元素 何时发生
onabort 图像 当图像加载被中断时;
onblur 窗口/框架/所有表单对象 当焦点从对象上移开时;
onchange 输入框/选择框/文本域 当改变一个元素的值且失去焦点时;
onclick 链接/按钮/表单对象/图像等 当用户单击对象时;
ondblclick 链接/按钮/表单对象 当用户双击对象时;
ondragdrop 窗口 当用户将一个对象拖放到浏览器窗口时;
onError 窗口/框架/所有表单对象 当脚本中发生语法错误时;
onfocus 窗口/框架/所有表单对象 当单击鼠标或将鼠标移动聚焦到窗口或框架时;
onkeydown 文档/图像/链接/表单 当按键被按下时;
onkeypress 文档/图像/连接/表单 当按键被按下然后松开时;
onkeyup 文档/图像/链接/表单 当按键被松开时;
onload 主体/框架集/图像 文档或图像加载后;
onunload 主体/框架集 文档或框架集卸载后;
onmouseout 链接 当图标移除链接时;
onmouseover 链接 当鼠标移到链接时;
onmove 窗口 当浏览器窗口移动时;
onreset 表单复位按钮 单击表单的reset按钮;
onresize 窗口 当改变浏览器窗口大小时;
onselect 表单元素 当选择一个表单对象时;
onsubmit 表单 当发送表格到服务器时;
// PS:对于每一个事件,它都有自己的触发范围和方式,事件处理将失效;
1.鼠标事件,页面所有元素都可触发
(1).click:当用户单击鼠标按钮或按下回车键时触发;
input.onclick = function(){
alert('Lee');
}; (2).dblclick:当用户双击鼠标按钮时触发;
input.ondblclick = function(){
alert('Lee');
} (3).mousedown:当用户按下鼠标还未弹起时触发;
input.onmousedown = function(){
alert('Lee');
} (4)mouseup:当用户释放鼠标按钮时触发;
input.onmouseup = function(){
alert('Lee');
} (5).mouseover:当鼠标移到某个元素上方时触发;
input.onmouseover = function(){
alert('Lee');
} (6).mouseout:当鼠标移出某个元素上方时触发;
input.onmouseout = function(){
alert('Lee');
} (7).mousemove:当鼠标指针在元素上移动时触发;
input.onmousemove = function(){
alert('Lee');
}
2.键盘事件
(1).keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发;
onkeydown = function(){
alert('Lee');
} (2).keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发;
onkeypress = function(){
alert('Lee');
} (3).keyup:当用户释放键盘上的键触发;
onkeyup = function(){
alert('Lee');
}
3.HTML事件
(1).load:当页面完全加载后(包括所有图像/JavaScript文件/CSS文件等外部资源),就会触发window上面的load事件;
window.onload = function(){
alert('Lee');
} // 图像上面也可以触发load事件,无论是在DOM中的图像元素还是HTML中的图像元素;
// 因此可以在HTML中为任何图像指定onload事件处理程序;
<img src='smile.client.gif' onload="alert('Image loaded.')" >
// PS:新图像元素不一定是从添加到文档后才开始下载,只要设置src属性就会开始下载; // <script>元素也会触发load事件,以便开发人员确定动态加载的JavaScript文件是否加载完毕;
// 与图像不同,只有在设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载JavaScript文件;
(2).unload:当文档被完全卸载后触发;
// 只要用户从一个页面切换到另一个页面,就会发生unload事件;
// 而利用这个事件最多的情况是清除引用,以避免内存泄漏;
window.onunload = function(){
alert('Lee');
}
(3).select:当用户选择文本框(input或textarea)内容改变且失去焦点后触发;
input.onselect = function(){
alert('Lee');
}
(4).change:当文本框(input或textarea)内容改变且失去焦点后触发;
input.onchange = function(){
alert('Lee');
}
(5).focus:当页面或元素获得焦点时在window及相关元素上面触发;这个事件不会冒泡;
input.onfocus = function(){
alert('Lee');
}
(6).blur:当页面或元素失去焦点时在window及相关元素上触发;这个事件不会冒泡;
input.onblur = function(){
alert('Lee');
}
(7).submit:当用户点击提交按钮在<form>元素上触发;
form.onsubmit = function(){
alert('Lee');
}
(8).reset:当用户点击重置按钮在<form>元素上触发;
form.onreset = function(){
alert('Lee');
}
(9).resize:当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件;
// 这个事件在window(窗口)上触发;浏览器窗口最大化或最小化也会触发resize事件;
// IE/Safari/Chrome和Opera会在浏览器变化时不断触发resize事件;
// Firefox则只会在用户停止调整窗口大小时才会触发resize事件;
window.onresize = function(){
alert('Lee');
}
(10).scroll:当用户滚动滚动条的元素使触发;
window.onscroll = function(){
alert('Lee');
}
JavaScript--事件入门(24)的更多相关文章
- 第一百一十九节,JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
- JavaScript 事件入门
一.事件介绍 JavaScript 有三种事件模型:内联模型.脚本模型和 DOM2 模型. 二.内联模型 //在 HTML 中把事件处理函数作为属性执行 JS 代码 <input type=&q ...
- JavaScript事件---事件入门
内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. ...
- JavaScript(第二十三天)【事件入门】
JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. 一.事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和 ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
- JavaScript基础入门07
目录 JavaScript 基础入门07 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门07 BOM ...
- JavaScript从入门到精通(转)
JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- JavaScript事件---事件对象
发文不易,若转载传播,请亲注明出处,谢谢! 内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...
随机推荐
- 初探日志框架Logback
一. 背景 最近因为学习项目时需要使用logback日志框架来打印日志, 使用过程中碰到很多的疑惑, 而且需要在控制台打印mybatis执行的sql语句, 于是决定沉下心来 研究一下logback的使 ...
- java后端导入excel将数据写入数据库
参考:https://www.cnblogs.com/hanfeihanfei/p/7079210.html @RequestMapping("/importExcel.do") ...
- Mac OSX配置XAMP虚拟主机
在前端工作中,有时候需要配置下环境,这篇文章主要是记录了在wamp中配置虚拟主机 首先需要下载wamp软件和navicat数据库管理软件进行管理,下面默认已经下载好所需软件.并且打开服务. 第一步:把 ...
- js中cookie,localStorage(sessionStorage)的存取
一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...
- webpack 打包调试
本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...
- android屏幕密度规律及dp px转换
px和dp(sp) 之间转化公式: 1 乘以(dp转px)或者除以(px转dp) scal缩放因子,在上浮0.5f /** * 密度转换像素 * */ public static int dip2p ...
- Python中的 // 与 / 的区别
" / " 表示浮点数除法,返回浮点结果;" // " 表示整数除法,返回不大于结果的一个最大的整数 [code] print("6 // 4 = & ...
- TFS2018环境搭建一单实例安装(适用于小型团队)
1.服务器配置 阿里云 单核CPU,2GB的RAM,SSD硬盘,安装TFS实例 TFS2018要求SQL Server 2016 (minimum SP1)以上.其要求有以下几点: (1).安装SQL ...
- 【Canal源码分析】client工作过程
client的工作过程,需要我们自己去编写对应的逻辑,我们目前只能从example写的例子来看.目前examle中提供了两个例子,一个是单机的,一个是集群的cluster,我们后续如果需要进行开发的话 ...
- SQL SERVICE日志收缩
ALTER DATABASE 数据库SET RECOVERY SIMPLE WITH NO_WAIT;ALTER DATABASE 数据库SET RECOVERY SIMPLE; --简单模式DBCC ...