JavaScript中的嵌套事件处理（在鼠标移动事件上）

Multiple event handling is the secret ingredient of dynamic WebPages seen now-a-days.

多重事件处理是当今动态网页的秘密组成部分。

Now, let’s get started...

现在，让我们开始吧...

Example Code

范例程式码

<html lang="en">
<head>
<meta charset="utf-8">
<title>Pirates Booty</title>
<script>
window.onload = init;
function init() {
var map = document.getElementById("map");
map.onmousemove=showCoords;
}
function showCoords(eventObj) {
var map = document.getElementById("coords");
x=eventObj.clientX;
y=eventObj.clientY;
map.innerHTML = "Map coordinates: "
+ x + ", " + y;
}
</script>
</head>
<body>
<img id="map" src="map.jpeg">
<p id="coords">Move mouse to find coordinates...</p>
</body>
</html>

Output/Result

输出/结果

On running the HTML file in the browser you will see that on moving the mouse over the image of the map, X and Y coordinates of the cursor get printed below the image.

在浏览器中运行HTML文件时，您会看到将鼠标移到地图图像上时，光标的X和Y坐标会打印在图像下方。

NOW, let’s move on to the explanation part of the code.

现在，让我们继续进行代码的解释部分。

As usual HTML code is self explanatory.

通常，HTML代码是不言自明的。

In the script tag, there are not many new things if you have gone through my previous article. The difference is that here I have used two event handlers instead of one and an event object.

在script标记中，如果您浏览了我的上一篇文章，则没有太多新鲜事物。区别在于，这里我使用了两个事件处理程序，而不是一个事件对象。

EVENT OBJECT: Whenever an event occurs an event object corresponding to it is generated which has various details regarding the event like in case of on mouse move event its event object has the x & y coordinates of the point where mouse or cursor is placed.

事件对象：每当事件发生时，都会生成与事件相对应的事件对象，该事件对象具有有关事件的各种详细信息，例如在鼠标移动事件的情况下，其事件对象具有放置鼠标或光标的点的x和y坐标。

First, init function has been assigned to onload event which occurs when Browser has fully generated the DOM of HTML code.

首先，已将init函数分配给onload事件，该事件在浏览器完全生成HTML代码的DOM时发生。

In init function, it can be seen that another handler showcoords has been assigned to onmousemoveevent of the object map representing the image map.

在init函数中，可以看到已将另一个处理程序showcoords分配给表示图像映射的对象映射的onmousemoveevent 。

Now, the major work zone i.e. the showcoords function.

现在，主要工作区域即showcoords功能。

As you can see event object corresponding to onmousemoveevent has been passed as an argument to showcoords handler.

如您所见，与onmousemoveevent对应的事件对象已作为参数传递给showcoords处理程序。

And then, clientX and clientY are properties of that eventobject which contain X & Y coordinate of cursor respectively.

然后， clientX和clientY是该事件对象的属性，分别包含光标的X和Y坐标。

These values are further getting printed via innerhtml property in paragraph element below the image.