一.事件介绍

JavaScript 有三种事件模型:内联模型、脚本模型和 DOM2 模型。

二.内联模型

//在 HTML 中把事件处理函数作为属性执行 JS 代码

<input type="button" value="按钮" onclick="alert('Lee');" /> //注意单双引号

//在 HTML 中把事件处理函数作为属性执行 JS 函数
<input type="button" value="按钮" onclick="box();" /> //执行 JS 的函数
PS:函数不得放到 window.onload 里面,这样就看不见了。

三.脚本模型

var input = document.getElementsByTagName('input')[0]; //得到 input 对象
input.onclick = function () { //匿名函数执行
  alert('Lee');
};

PS:通过匿名函数,可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟着括号)。
input.onclick = box; //把函数名赋值给事件处理函数

四. 事件处理函数
JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件。

1.鼠标事件,页面所有元素都可触发

click:当用户单击鼠标按钮或按下回车键时触发。

dblclick:当用户双击主鼠标按钮时触发。

mousedown:当用户按下了鼠标还未弹起时触发。

mouseup:当用户释放鼠标按钮时触发。

mouseover:当鼠标移到某个元素上方时触发。

mouseout:当鼠标移出某个元素上方时触发。

mousemove:当鼠标指针在元素上移动时触发。

2.键盘事件
keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发。

keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发。

keyup:当用户释放键盘上的键触发。

3.HTML 事件
load:当页面完全加载后在 window 上面触发,或当框架集加载完毕后在框架集上触发。

unload:当页面完全卸载后在 window 上面触发,或当框架集卸载后在框架集上触发。

select:当用户选择文本框(input 或 textarea)中的一个或多个字符触发。

change:当文本框(input 或 textarea)内容改变且失去焦点后触发。

focus:当页面或者元素获得焦点时在 window 及相关元素上面触发。

blur:当页面或元素失去焦点时在 window 及相关元素上触发。

submit:当用户点击提交按钮在<form>元素上触发。

reset:当用户点击重置按钮在<form>元素上触发。

resize:当窗口或框架的大小变化时在 window 或框架上触发。

scroll:当用户滚动带滚动条的元素时触发。

JavaScript 事件入门的更多相关文章

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

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

  2. JavaScript事件---事件入门

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

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

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

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

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

  5. JavaScript事件---事件对象

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

  6. Javascript闭包入门(译文)

    前言 总括 :这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略. 译者 :文章写在2006年,可直到翻译的21小时之前作者还在完善这篇文章,在Stackov ...

  7. 《javascript经典入门》-day01

    <javascript经典入门>-day01 1.了解JavaScript 01.浏览器每次加载和显示页面时,都在内存里创建页面及其全部元素的一个内部表示体系,,也就是DOM.在DOM里, ...

  8. JavaScript基础入门09

    目录 JavaScript 基础入门09 Event 自定义右键菜单 获取鼠标按键 获取鼠标坐标 获取键盘按键 页面中位置的获取 浏览器的默认行为 冒泡 什么是冒泡 小练习 JavaScript 基础 ...

  9. JavaScript基础入门08

    目录 JavaScript 基础入门08 DOM 介绍 绑定事件 给一组元素绑定事件 节点 节点树 节点类型 选取文档内容 通过id选取元素 通过指定的标签名选取元素 用指定的css类来选取元素 通过 ...

随机推荐

  1. 深入理解PHP内核(二)概览-PHP生命周期与Zend引擎

    本文参考自<深入理解PHP内核>,地址:https://github.com/reeze/tipi 本文链接:http://www.orlion.ml/232/ 1.SAPI接口 SAPI ...

  2. tomcat server容器解读

    1. server的实例类为:org.apache.catalina.core.StandardServer为顶层容器. 2.二级容器GlobalNamingResources,设置认证用户信息. & ...

  3. [Node.js] 对称加密、公钥加密和RSA

    原文地址:http://www.moye.me/2015/06/14/cryptography_rsa/ 引子 对于加解密,我一直处于一种知其然不知其所以然的状态,项目核心部分并不倚重加解密算法时,可 ...

  4. ArrayBuffer简析

    关键技术: JavaScript,ArrayBuffer,Type Array,DataView,Web Worker,性能对比 ArrayBuffer 在文章开头列出了这些关键字,主要就是让大家了解 ...

  5. 《HelloGitHub月刊》第04期(秋招临近,本期加入了面试相关的项目)

    兴趣是最好的老师,而<HelloGitHub> 就是帮你找到兴趣! 因为我比较熟悉python语言,所以月刊中python语言的项目居多,个人能力有限,其他语言涉及甚少,欢迎各路人士加入, ...

  6. .net 使用Json(),maxJsonLength属性设置的值问题

    “使用JSON JavaScriptSerializer进行序列化或反序列化时出错.字符串的长度超过了为maxJsonLength属性设置的值” 今天业务找我说线上的国家地区都显示数字(地区ID),而 ...

  7. asp.Net获取脚本传过来的参数的方法汇总

    最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...

  8. C# Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面

    个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...

  9. 【分享】学长的安利来了~~O(∩_∩)O

    前言:应栋哥要求,学长把演讲稿稍微整理下发布出来,这可以算是一篇安利文,也可以说是一篇经历文吧.作为一个确确实实从软工里收获到挺多东西的过来人,学长希望可以通过学长的经历来让你们对软工更加期待. 安利 ...

  10. HtmlAgilityPack 处理通配的contains

    //选择不包含class属性的节点 var result = node.SelectNodes(".//span[not(@class)]"); //选择不包含class和id属性 ...