// 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. [学习笔记]后缀自动机SAM

    好抽象啊,早上看了两个多小时才看懂,\(\%\%\%Fading\) 早就懂了 讲解就算了吧--可以去看看其他人的博客 1.[模板]后缀自动机 \(siz\) 为该串出现的次数,\(l\) 为子串长度 ...

  2. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  3. cpu 亲和性 affinity

    http://www.ibm.com/developerworks/cn/linux/l-affinity.html

  4. [JavaScript] 的异步编程之手写一个Gernerator的例子

    <html> <head> <meta charset="UTF-8"> <title>Generator Demo</tit ...

  5. Shell - 简明Shell入门07 - 数组(Array)

    示例脚本及注释 #!/bin/bash test0=() # 定义数组 test1=(a b c d e f) # 定义数组 test2=( # 定义数组 'A?' "BB!" C ...

  6. odoo开发笔记:Server+Action服务器动作自动触发执行

           Odoo的市场定位是SME(中小型企业),这个市场的ERP产品,多如牛毛,产品各具特色.不过,Odoo的自动化处理机制,可以睥睨天下,无人能及.包括一些大型国产软件,如用友.金蝶也不具备 ...

  7. mvc大对象json传输报错

    public ActionResult GetLargeJsonResult() { return new ContentResult { Content = new JavaScriptSerial ...

  8. rtp header

    rtp协议基于udp传输,流媒体音视频数据被封装在rtp中,通过rtp协议进行实时的传输. 一.rtp协议头格式 The RTP header has a minimum size of 12 byt ...

  9. php -- 表单多选

    ----- 011-form.html ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  10. vue代码上传服务器后背景图片404解决方法

    问题:代码上传服务器后,图片404,使用的font-awesome图标也是404 解决办法: 如果你用了vue-cil,那么在build目录下找到utils.js中的ExtractTextPlugin ...