How to capture mouse events in JavaScript

Preface

Adding user interaction to a page is one of the basic features of JavaScript. To do this, we need mechanisms to detect users and programs at specific times

What are you doing. For example, where the mouse is in the browser, whether the user clicked the mouse or pressed the key, the page is fully loaded into the browser and so on. In something that happens

Things that we call "events," JavaScript provides a variety of tools to manipulate them.

. 1 onclick event handler

The OnClick event handler can be used on almost any visible HTML element on the page. One way to use it is to add an attribute to the HTML element

is: onclick. Look at the following example:

<! DOCTYPE html>


As follows:




The HTML code above adds a button to the body area of the page and sets its OnClick property to run the corresponding

JavaScript code. When the user taps this button, the onclick event is activated, and the JavaScript statement contained in the execution property is executed.

. 2 onmouseover and onmouseout event handlers

If you need to detect the position of the mouse pointer with a particular page element, you can use the onmouseover and onmouseout event handlers. When the mouse

The onmouseover event is triggered when you enter a occupied area on the page. The onmouseout event, apparently, is when the mouse leaves the area and touches

of the hair. The following procedure demonstrates the process of onmouseover events.

<! DOCTYPE html>


As you can see from the program above, the event handler is triggered when the mouse enters the image area. As follows:




Implementing Image Transformations

Using the onmouseover and onmouseout event handlers, you can change the way images are displayed when the mouse is over the image. To do this, when the mouse

When you enter the image area, you can use onmouseover to change the src attribute of the  element, and when the mouse leaves, use the onMouseOut property

Change back, of course, this kind of image transformation can be implemented entirely in CSS, this is just to demonstrate the onmouseover and onmouseout event processing

Method.
<! DOCTYPE html>


Some new syntax appears in the above code, using the keyword this in the onmouseover and onmouseout statements, when the event handler is

The HTML element's attributes are added to the page, where this is the HTML element itself, and the example refers to the current image, which means that the image is THIS.SRC

The SRC attribute of the image.

In IMG We also see the properties of width and height, which are IMG properties that represent the width and height of the image.

Let's look at the results as follows:





--------------------------------------------------------------------------------------------------------------- ----------------------------------------
Reprint Please specify the Source: http://blog.csdn.net/hai_qing_xu_kong/article/details/48206441 Emotional Control


 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
How to capture mouse events in JavaScript