javascript事件处理（重点）-02

最新推荐文章于 2023-05-05 00:30:57 发布

a584898

最新推荐文章于 2023-05-05 00:30:57 发布

阅读量140

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/a584898/article/details/83351644

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件处理（重点）

事件的处理指的是根据某一状态发生之后进行的反应，在事件处理之中会存在有事件源，以及事件的监听。
当监听到指定的事件之后会调用函数进行事件的处理。所以来讲JavaScript之中，针对于事件处理必须事件
源和处理函数，而函数都是由用户自己定义的
在HTML之中，所有的事件都会以onXxx的形式命名，例如，观察两个简单事件

页面加载事件：onload
页面卸载事件：onunload

范例：事件处理
<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
//在事件触发前的语句编写处理函数
function funA(){
alert("你好你好，一般此处都会弹框");
}
function funB(){
alert("拜拜，此处一般都会询问是否要添加收藏");
}
</script>
</head>
<body οnlοad="funA()" οnunlοad="funB()">
</body>
</html>

很多时候onload事件是非常重要的，例如：在日后要学习的ExtJs框架，所有的代码都要求在onload事件之中进
行处理。页面加载往往会做许多的处理。
那么在进行鼠标处理的时候也可以进行鼠标的事件控制，鼠标事件分为如下几种

onmouseover:鼠标经过时触发
onmouseup:鼠标松开时触发
onmousedown:鼠标点击时触发
onmouseout:鼠标离开时触发
onmousemove:鼠标移动时触发

<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
//在事件触发前的语句编写处理函数
function fun(){
alert("鼠标事件触发");
}
</script>
</head>
<body>
<img src="images/1.jpg" οnmοuseοver="fun()" >
</body>
</html>

那么现在既然有了事件处理的基本概念，下面利用事件做一些动态的处理效果。例如：编写一个程序，
当鼠标经过过的时候自动替换为其它照片。
那么这个时候就必须采用一个“<span>”作为图片元素的包裹元素，使用span包裹元素之后，往往需要
类型设置一个id，而后通过此id取得元素

Java属于面向对象的编程语言，面向对象过程之中，需要由用户自己定义类，自己产生对象。但是JavaScript
是一种基于对象的编程语言，即：所有的对象都已经由浏览器自动为用户提供好了，用户直接使用即可，最
典型的对象：每一个HTML元素都是一个对象。所有HTML定义的时候如果要想轻松的取得指定元素，必须加上有
ID属性，作为唯一标记。
当取得了span元素对象之后利用innerHTML取得数据

范例：观察元素取得
<html>
<head>
<title>JavaScript应用</title>
</head>
<body>
<span id="my">
<img src="images/1.jpg" >
</span>
<span id="msg" alt="hello">
改变图片信息
</span>
</body>
<script type="text/javascript" >
//在事件触发前的语句编写处理函数
//根据id取得指定对象
var obj=document.getElementById("msg");
alert(obj.innerHTML);
</script>
</html>

范例：利用以上的操作实现图片的修改
<html>
<head>
<title>JavaScript应用</title>
<script type="text/javascript" >
function changePic(){
   var flag=true;
   var mySpan=document.getElementById("my");
   if(flag){
   mySpan.innerHTML="<img
   src=\"images/2.jpg\"
   οnmοuseοver=\"changePic()\">";
   flag=false;
}else{
   mySpan.innerHTML="<img
   src=\"images/1.jpg\"
   οnmοuseοut=\"changePic()\">";
   flag=true;
}
}
</script>
</head>
<body>
<span id="my">
<img src="images/1.jpg"
οnmοuseοver="changePic()">
</span>
</body>
</html>