异步编码—事件处理

2022/4/22 23:45:38

编程Tag： 事件异步图像 image var 事件处理 name 处理程序编码

本文主要是介绍异步编码—事件处理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在js里面，事件指的是什么

用户单击按钮、鼠标位置发生变化、通过网络收到数据、窗口大小发生变化、定时器到期、浏览器发生变化、用户提交了表单、知道用户按下了键盘按钮、知道元素获得了用户界面焦点、监视所有的鼠标移动、监视时钟并管理定时器和定时事件、获取网页所需的额外数据、跟踪用户缩放或滚动网页的操作、知道cookie已创建完毕、跟踪用户在网页上执行的所有单击操作，无论单击的是安妮、链接还是其他地方、知道网页已经加载并显示完毕。

事件处理程序是什么？

实际上即使一小段代码，知道事件发生时该如何做。从代码的角度说，处理程序就是一个函数。事件发生时，其处理程序函数将会被调用

新的代码组织方式

以响应事件的方式组织代码是另一种代码编写方式。要以这种方式编写代码，需要考虑的是可能发生的事件以及代码如何响应这些事件。在计算机科学种，通常说这种代码是异步。将各种事件的众多处理程序整合起来，构成一个应用程序

创建一个游戏来理解事件

理解事件的最佳方式是实践。

游戏描述

这个游戏是这样的：你加载一个网页，它显示一幅图像。这幅图像不是普通的图像，而是一幅非常模糊的图像。它的任务是猜出图像是什么，要核实你是否猜对了，可单击图像，让它不再模糊不清。当图像清晰几秒之后，重新变回模糊版本

实现游戏

浏览器加载html页面后，你将看到非常模糊的图像。为实现这个游戏，需要用户单击这副图像做出反映，将图像的清晰版本呈现出来。

我需要做的是：

访问DOM中的这个图像对象，并将其属性onclick设置为一个处理程序
在这个处理程序中编写代码，将图像的src属性从模糊图像改为清晰图像

确保这些代码在网页的DOM创建好之后再执行，为此，可使用windows对象的属性onload.将这些代码放在init中，并将属性onload设置这个函数。

1 window.onload=init;

function init(){
2         var image=document.getElementById("zero");
3         image.onclick=showAnswer;
}

要添加一个响应图像单击事件的处理函数，只需将一个函数赋给图像的属性onclick.下面将这个函数命名为showAnswer并定义它

    function showAnswer(){
        var image=document.getElementById("zero");
        image.src="zero.jpg";
    }

如果我们有一系列图像，我们先将它们添加到网页中，我们再添加五幅图像，这样网页将总共包含6副图像。我们还修改css，让图像之间有一定的间距。

<body>
    <img id="zero" src="../zeroblur.jpg">
    <img id="one"  src="../oneblur.jpg">
    <img id="two"  src="../twoblur.jpg">
    <img id="three"  src="../threeblur.jpg">
    <img id="four"  src="../fourblur.jpg">
    <img id="five"  src="../fiveblur.jpg">
    <img id="six"  src="../sixblur.jpg">
</body>

如何将同一个处理程序应用于所有图像

function init(){
        var image=document.getElementsByTagName("img");
        for(var i=0;i<image.length;i++){
            image[i].onclick=showAnswer;
        }

使用getElementsByTagName，这个方法将一个标签名作为参数，并返回一个列表，其中包含所有匹配的元素

事件对象的工作原理：

单击事件程序被调用时，将向他传递一个事件对象。事实上，大多人文档对象模型事件发生的时候，都应向第项的处理程序传递一种事件对象。事件对象包含一些事件的常规信息。

事件对象所包含的的信息被称为eventObj，将会放在被调用的函数参数中。

1     function showAnswer(eventObj){
2         var image=eventObj.target;
3         var name=image.id;
4         name="../"+name+".jpg";
5         image.src=name;
6         
7     }

当图像清晰几秒之后，重新变回模糊版本

 1 function showAnswer(eventObj){
 2         var image=eventObj.target;
 3         var name=image.id;
 4         name="../"+name+".jpg";
 5         image.src=name;
 6         
 7         setTimeout(reblur,2000,image);
 8     }
 9     function reblur(image){
10         var name=image.id;
11         name="../"+name+"blur.jpg";
12         image.src=name;
13     }

setTimeout第一个参数是处理程序，第二个参数是过多少毫秒之后调用事件处理程序，第三个参数是要重新变模糊的图像

这篇关于异步编码—事件处理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！