JavaScript事件处理

您所在的位置：网站首页 › 玉林狗肉事件处理方法 › JavaScript事件处理

JavaScript事件处理

2024-06-03 20:24| 来源: 网络整理| 查看: 265

文章目录一、事件与事件处理概述（一）JavaScript常用事件（二）事件的调用1、在HTML中调用2、在JavaScript中调用（三）事件对象二、表单相关事件（一）获得焦点与失去焦点事件（二）失去焦点内容改变事件（三）表单提交与重置事件三、鼠标和键盘事件（一）鼠标单击事件（二）鼠标按下和松开事件（三）鼠标移入和移出事件（四）鼠标移动事件（五）键盘事件四、页面事件（一）加载与卸载事件（二）页面大小事件

一、事件与事件处理概述

最近学JavaScript，学到了这里发现事件处理其实和asp.net中的控件意思差不多。

目录即为JavaScript事件处理的知识框架。

事件处理的过程分为三步：

发生事件启动事件处理程序事件处理程序做出反应

什么是事件？事件是指一些可以通过脚本响应的页面动作。当用户按下鼠标或者提交一个表单等等时候，事件都会出现。事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分相关联的事件发生时，事件处理器就会被调用。

（一）JavaScript常用事件

下表总结了一些JavaScript常用事件在这里插入图片描述

（二）事件的调用 1、在HTML中调用

在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或时函数名即可。例如：

2、在JavaScript中调用

在JavaScript中调用事件处理程序，首先需要获取要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。例如，单击保存按钮弹出对话框：

var b_save=document.getElementById("save"); //获取id属性值为save的元素 b_save.onclick=function () { alert("单击了保存按钮！"); }

或者：

form1.save.onclick=function () { alert("单击了保存事件！"); }

效果如下：在这里插入图片描述

（三）事件对象

在IE浏览器中事件对象是Window对象的一个属性event，并且event对象只能在事件发生时被访问，当所有事件处理完后，该对象就自动消失了。为了处理兼容性，通常这样写：

function someHandle(event) { //处理兼容性，获取事件对象 if(window.event) event=window.event; }

在IE浏览器中，发生事件的元素通过event对象的srcElemet属性获取，而在标准的DOM浏览器中，发生事件的元素通过event对象的target属性获取。为了处理两种浏览器兼容性，举例代码如下:

function handle(oEvent) { if(window.event) oEvent=event; var oTarget; if(oEvent.srcElement) oTarget=oEvent.srcElement; else oTarget=oEvent.target; alert(oTarget.tagName); //弹出发生事件的元素标记名称 } form1.save.onclick=handle; //为按钮绑定单击事件二、表单相关事件

实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式。

（一）获得焦点与失去焦点事件

获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件同时使用。

通过一个例子，来说明他是怎么用的，效果如下图所示。用户选中文本框时，改变选中文本框的背景颜色，当选择其他文本框时将失去焦点的文本框恢复为原来的颜色。

在这里插入图片描述直接上代码：

用户名： function txtfocus() { var e=window.event; //获取事件对象 var obj=e.srcElement; //获取事件发生的元素 obj.style.background="#ff9966"; } function txtblur() { var e=window.event; var obj=e.srcElement; obj.style.background="#FFFFFF"; } （二）失去焦点内容改变事件

失去焦点内容改变事件（onchange）是指当前元素失去焦点，并且元素的内容发生改变时触发事件处理程序。该事件一般再下拉菜单中使用。

例子：改变文本框中的字体颜色

黑色红色绿色 function Fcolor() { var e=window.event; var obj=e.srcElement; form1.textfield.style.color=obj.value; }

效果如下：在这里插入图片描述

（三）表单提交与重置事件表单提交事件（onsubmit）是在用户提交表单时，在表单提交之前被触发（提交表单通常使用“提交”按钮，也就是将按钮的type属性设置为submit），因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。

下面给出的这两个事件的使用格式：

如果onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return 语句，否则，不论在函数中返回的是真还是假，当前事件所返回都是true值

例子：验证提交的表单中是否有空值，通过onsubmit事件来判断提交的表单是否有空文本框，如果有空文本，则返回false，代码如下：

function AllSubmit() { var T = true; var e = window.event; var obj = e.srcElement; for(var i = 1 ; i if(n==(Arraycolor.length-1)) n = 0; n++; document.bgColor=Arraycolor[n]; }

效果如下：在这里插入图片描述

（二）鼠标按下和松开事件

鼠标的按下和松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件则是在鼠标松开时触发事件处理程序。

例子：用事件模拟超链接标记的功能，当按下鼠标时，字体改变颜色，当松开鼠标时则回到原来的颜色，代码如下：

Hello little pang！ function mousedown() { var obj = document.getElementById('p1'); //获取包含文本的元素 obj.style.color="#0022AA"; } function mouseup(){ var obj=document.getElementById('p1'); obj.style.color="#AA9900"; }

效果如下：在这里插入图片描述

（三）鼠标移入和移出事件

鼠标的移入移出事件分别是onmouseover和onmouseout事件，其中onmouseover事件时在鼠标移动到对象上方时触发事件处理程序，onmouseout事件则是在鼠标移出对象上方时触发事件处理程序。

例子：动态改变图片焦点，当鼠标移入图片，图片的透明度将为50%，否则100%显示。代码如下：

function visible(cursor,i) { if(i==0) cursor.style.opacity=1; //图片透明度设置为100 else cursor.style.opacity=0.5; //图片透明度设置为50 }

效果如下：在这里插入图片描述

（四）鼠标移动事件

鼠标移动事件（onmousemove）是指鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用Document对象实时读取鼠标在页面中的位置。

例子：获取鼠标指针的坐标。代码如下：

var x=0,y=0; function MousePlace() { x=window.event.x; y=window.event.y; //输出鼠标的当前位置 document.getElementById('position').innerHTML="鼠标在页面中的当前位置的横坐标X："+x+",纵坐标Y："+y; } document.onmousemove=MousePlace;

效果如下：在这里插入图片描述

（五）键盘事件

键盘事件包含onkeypress、onkeydown和onkeyup事件：

onkeypress：指在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作onkeydown：指在键盘上某个键被按下时触发此事件的处理程序，一般用于组合键的操作onkeyup：指在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作

键盘上的字母和数据键的键码值，请访问：

http://www.bejson.com/othertools/keycodes/

一般这样用：

function solve(){ if(window.event.keyCode==某个键码值){ 处理; } document.onkeydown=solve; } 四、页面事件

页面事件是指在页面加载或改变浏览器大小、位置及对页面中的滚动条进行操作时，所触发的事件处理程序。

（一）加载与卸载事件

加载事件onload是指在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体等等进行设置。

卸载事件onunload是指在卸载网页时触发相应的事件处理程序，指刷新、关闭或从当前页跳转到其他网页中。

例子：动态改变图片大小，代码如下：

效果如下：在这里插入图片描述

（二）页面大小事件

页面大小事件onresize是指用户改变浏览器的大小时触发事件处理程序。例如当浏览器窗口被调整大小时，将太初一个对话框，代码如下：

function showMsg(){ alert("浏览器窗口大小被改变！"); }

【本文地址】

JavaScript事件处理

JavaScript事件处理

今日新闻

推荐新闻