JavaScript 事件入门知识


Posted in Javascript onApril 13, 2015

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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 #Javascript
JavaScript DOM元素尺寸和位置
Apr 13 #Javascript
JavaScript DOM操作表格及样式
Apr 13 #Javascript
JavaScript DOM进阶方法
Apr 13 #Javascript
JavaScript DOM基础
Apr 13 #Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 #Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 #Javascript
You might like
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
linux面试题参考答案(5)
2016/11/05 面试题
英语师范专业毕业生自荐信
2013/09/21 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
办理信用卡工作证明
2014/01/11 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
收银员岗位职责
2015/02/03 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
导游词之上海豫园
2019/10/24 职场文书