广告合作QQ：76874919

JavaScript 事件入门知识

JavaScript 2018-12-31

JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码;

一 事件介绍

事件一般是用于浏览器和用户操作进行交互;最早是IE和Netscape Navigator中出现,作为分担服务器端元算负载的一种手段; 而DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件; IE9/Firefox/Opera/Safari和Chrome全部已经实现了"DOM2级事件"模块的核心部分; IE8之前浏览器仍然使用其专有事件模型; JavaScript有三种事件模型:内联模型/脚本模型和DOM2模型;

二 内联模型(HTML事件处理程序)

这种模型是最传统的简单的一种处理事件的方法; 在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件; 虽然内联在早期使用较多,但它是和HTML混写的,并没有与HTML分离;

在HTML中把事件处理函数作为属性执行JS代码; 注意单双引号; 在HTML中把事件处理函数作为属性执行JS函数; 执行JS的函数; PS:函数不得放到window.onload里面,这样就看不见了;

三 脚本模型(DOM0级事件处理程序)

<div class="jb51code">
<pre class="brush:js;">
// 由于内联模型违反了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事件处理程序; // PS:新图像元素不一定是从添加到文档后才开始下载,只要设置src属性就会开始下载;

//