// 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)的更多相关文章

  1. 第一百一十九节,JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  2. JavaScript 事件入门

    一.事件介绍 JavaScript 有三种事件模型:内联模型.脚本模型和 DOM2 模型. 二.内联模型 //在 HTML 中把事件处理函数作为属性执行 JS 代码 <input type=&q ...

  3. JavaScript事件---事件入门

    内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码. ...

  4. JavaScript(第二十三天)【事件入门】

    JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码.   一.事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和 ...

  5. JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...

  6. JavaScript基础入门07

    目录 JavaScript 基础入门07 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门07 BOM ...

  7. JavaScript从入门到精通(转)

    JavaScript从入门到精通 转自: https://github.com/Eished/JavaScript_notes 视频连接:https://www.bilibili.com/video/ ...

  8. 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  9. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

  10. JavaScript事件---事件对象

    发文不易,若转载传播,请亲注明出处,谢谢!   内容提纲: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开 ...

随机推荐

  1. 初探日志框架Logback

    一. 背景 最近因为学习项目时需要使用logback日志框架来打印日志, 使用过程中碰到很多的疑惑, 而且需要在控制台打印mybatis执行的sql语句, 于是决定沉下心来 研究一下logback的使 ...

  2. java后端导入excel将数据写入数据库

    参考:https://www.cnblogs.com/hanfeihanfei/p/7079210.html @RequestMapping("/importExcel.do") ...

  3. Mac OSX配置XAMP虚拟主机

    在前端工作中,有时候需要配置下环境,这篇文章主要是记录了在wamp中配置虚拟主机 首先需要下载wamp软件和navicat数据库管理软件进行管理,下面默认已经下载好所需软件.并且打开服务. 第一步:把 ...

  4. js中cookie,localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

  5. webpack 打包调试

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶. 首先请读者按照我前一篇文章 Webpack 10分钟入门介绍的步骤,在本地搭建一个webpack的hell ...

  6. android屏幕密度规律及dp px转换

    px和dp(sp) 之间转化公式: 1  乘以(dp转px)或者除以(px转dp) scal缩放因子,在上浮0.5f /** * 密度转换像素 * */ public static int dip2p ...

  7. Python中的 // 与 / 的区别

    " / " 表示浮点数除法,返回浮点结果;" // " 表示整数除法,返回不大于结果的一个最大的整数 [code] print("6 // 4 = & ...

  8. TFS2018环境搭建一单实例安装(适用于小型团队)

    1.服务器配置 阿里云 单核CPU,2GB的RAM,SSD硬盘,安装TFS实例 TFS2018要求SQL Server 2016 (minimum SP1)以上.其要求有以下几点: (1).安装SQL ...

  9. 【Canal源码分析】client工作过程

    client的工作过程,需要我们自己去编写对应的逻辑,我们目前只能从example写的例子来看.目前examle中提供了两个例子,一个是单机的,一个是集群的cluster,我们后续如果需要进行开发的话 ...

  10. SQL SERVICE日志收缩

    ALTER DATABASE 数据库SET RECOVERY SIMPLE WITH NO_WAIT;ALTER DATABASE 数据库SET RECOVERY SIMPLE; --简单模式DBCC ...