JavaScript 事件入门知识
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="按钮" οnclick="alert('Lee');" /> 注意单双引号;
在HTML中把事件处理函数作为属性执行JS函数;
< input type="button" value="按钮" οnclick="box();" /> 执行JS的函数;
PS:函数不得放到window.onload里面,这样就看不见了;
三 脚本模型(DOM0级事件处理程序)
1
2
3
4
5
6
7
8
9
10
|
// 由于内联模型违反了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' οnlοad="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 事件入门知识相关推荐
- JavaScript事件基础知识总结【思维导图】
var EventUtil = {//注册事件 addHandler: function(element, type, handler){if (element.addEventListener){e ...
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》—— 第1章 网页设计基础知识...
本节书摘来异步社区<网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通>一书中的第1章,作者: 何新起 , 任 ...
- JavaScript事件---事件入门
JavaScript事件---事件入门 原文:JavaScript事件---事件入门 内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面 ...
- javascript 事件知识集锦
1.事件委托极其应用 转载的链接: http://www.webhek.com/event-delegate/#comments 2. 解析javascript事件机制 转载链接: http: ...
- JavaScript 事件 快速使用入门
目录 JavaScript 事件汇总 添加与绑定事件 oncontextmenu 事件 禁用右击事件 onbeforeunload 事件 JavaScript 事件汇总 事件 描述 onload.on ...
- 视频教程-JavaScript从入门到进阶视频课程-JavaScript
JavaScript从入门到进阶视频课程 南京大学软件工程硕士,全栈开发工程师,全栈讲师. 曾就职于中软国际.擎天科技.华为等公司,擅长Java开发.Web前端.Python爬虫.PHP等领域技术.从 ...
- 视频教程-JavaScript从入门到精通2016版教学视频-JavaScript
JavaScript从入门到精通2016版教学视频 19年软件开发经验,设计开发40多个大型软件,10年从事高等教育,主要为java系列课程,带你轻松进入java生涯. 赖国荣 ¥39.00 立即订阅 ...
- javascript从入门到跑路-----小文的js学习笔记(25)------运动框架----匀速运动、缓冲运动、多物体运动、链式运动
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
- 视频教程-javascript零入门实战系列-JavaScript
javascript零入门实战系列 7年php开发经验,国内某大型培训机构项目经理,曾授课程:php,ecshop二次开发,ThinkphpBootstrap商城,html,html5,css,css ...
最新文章
- 2021年大数据Spark(六):环境搭建集群模式 Standalone
- 【牛客】简单排序 (STL)
- Linux(debian)的网络内核参数优化来提高服务器并发处理能力
- PHP使用CURL案例
- 机器人学习--Robotics: Estimation and Learning(宾夕法尼亚大学COURSERA课程)
- java字节码_好的,每个接触Java字节码的人
- mybatisplus新增返回主键_第17期:索引设计(主键设计)
- 通过#define连接字符串的特殊方法[转]
- 从源码分析RocketMQ系列-Consumer消息接收逻辑
- 网易被曝暴力裁患绝症员工,回应:存在不近人情的地方,向前同事道歉
- SCCM TP4部署Office2013
- 并不对劲的bzoj5340:loj2552:uoj399:p4564: [Ctsc2018]假面
- python排序算法的时间复杂度_Python算法的时间复杂度和空间复杂度(实例解析)
- Android 存储
- mac mysql read only_mac Read-Only filesystem
- python函数之enumerate()快速打印出列表中的元素以及对应的下标
- 使用SpotBugs 进行代码检查
- 数据挖掘导论实验报告01
- unity简单实现融合树动画
- iOS - 接入 Live2D
热门文章
- 【ijkplayer】编译 Android 版本的 ijkplayer ⑤ ( 执行 init-android-libyuv.sh | 执行 init-android-soundtouch.sh )
- 【Android 内存优化】Android 原生 API 图片压缩原理 ( 图片质量压缩方法 | 查找 Java 源码中的 native 方法对应的 C++ 源码 )
- 【Android应用开发】 Android 崩溃日志 本地存储 与 远程保存
- 动态生成RadialMenuContainer
- Codeforces Round #520 (Div. 2)
- nginx+keepalived高可用及双主模式
- java string 转化为date
- iOS开发-登录界面开发(6)Toast-Swift的使用-Swfit4.1_Xcode9.3.1
- python 3.0内置函数map、filter
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录