Content

1 Events

Events

The actions that the user performs or the changes you make in the page are known under the name of events

An event is the sign that 'something' has happened

Syntax of events

You need to specify a selector, to know which element the event will interact with, followed by the event in parentheses

$(selector).event(function() {
    //Code to execute
});

We will use the following sample HTML, that contains a simple form, to get to know the use of the events, accompanied by a file that we will call event.js

To process the form, we have also added a file form.php however, we are not going to use the examples on events

<html>
    <head>
<!-- Inserted by miarroba -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>
<!-- Inserted by miarroba -->
        <meta charset='utf-8'>
        <script src='jquery-3.4.1.min.js'></script>
        <script type='text/javascript' src='event.js'></script>
   </head>

   <body>
<!-- Inserted by miarroba -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Inserted by miarroba -->
      <form id='form' action='form.php' method='POST'>
          <label for='login'>Login:</label>
          <input type='text' id='login'/>

          <label for='pass'>Password:</label>
          <input type='text' id='pass'/>

          <input type='submit' id='button'/>
      </form>
   <!-- Inserted by miarroba -->
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1733247816&k=b5cf4ae3cee8dc6445d07e2545e8accc&__muid="></script>
<!-- Inserted by miarroba -->
</body>
</html>

Item events

This type of event is that normally used by the user to interact with the elements of the HTML, when you hover the mouse over the element or is pressed, among others

Among the most important of which we highlight:

focus
is triggered when the focus goes to the element
blur
is triggered when the focus goes to another element or lose it
click
is activated when you click on the element
dblclick
is activated when you double click on the element

var warning = function() {
    alert('Click');
};

$(function() {
    $('#button').click(warning);
});

In the example we have selected the element with the id button, and responds to the click event that has as a parameter the variable warning

It could have included the code inside the click event, but wanted to emphasize that the parameters can be a variable that contains a function, so we can have different variables with different behavior, without having to modify our code

Mouse events

Occur when the user uses the mouse within the HTML document or any of the elements that compose it

Among the most important of which we highlight:

mousedown
turns on when you press a mouse button
mouseup
is activated when you stop pressing a mouse button
mousemove
is triggered when the mouse moves
mouseover
is triggered when the mouse moves over an item (when we enter in the item)
mouseout
is triggered when the mouse leaves the element (when we leave the element)

var warning = function() {
    alert('Click');
};

var over = function() {
    this.style['font-weight']='bold';
};

var out = function() {
    this.style['font-weight']='initial';
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
});

In the example, we have added a couple of events that change the type of letter when you pass the mouse over the element with id button

It is possible to assign to these event parameters that contain information about a mouse event

Among the most important of which we highlight:

screenX and screenY
represent the coordinates of the mouse pointer with respect to the global coordinates of the screen
clientX and clientY
represent the coordinates of the mouse pointer with respect to the browser window
button
is the number of the button that has been pressed (left = 0, center = 1, right = 2)

If you do not want to pass it as a parameter, we can use the property buttonsthat includes more buttons, as the mouse wheel or the forward and back buttons of the browser

var warning = function(info) {
    alert('The button pressed has been: ' + (info.button == 0 ? 'left' : (info.button == 1 ? 'central' : (info.button == 2 ? 'right' : 'other') ) ) + '\nIn the screen position: ' + info.screenX + ', ' + info.screenY);
};

In the example we have modified the variable warning to detect which button has been clicked and what position you had the mouse on the screen, when it has been clicked

Keyboard events

Occur when the user uses the keyboard

Among the most important of which we highlight:

keydown
turns on when you press a key
keyup
is activated when you stop pressing a key
keypress
is activated when you press and stops the press of a key

It is possible to assign to these event parameters that contain information about the event from the keyboard

Among the most important of which we highlight:

char or charCode
is a string with the character that has been pressed (provided that the same is representable)
key or keyCode
it is an identifier that represents the key that has been pressed

You can see the complete list on the page for developers Mozilla
ctrlKey,, shitKey and altKey
these are fields that indicate whether the key Control, Shift or Alt key had been pressed when the event occurred keyboard

var key = function(info) {
    //The letter a has the code 97 and the value of the rest is consecutive
    var dictionary = 'abcdefghijklmnopqrstuvyz';

   console.log('You have pressed the key: ' + dictionary.charAt(info.keyCode - 97) );
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
});

In the example has been added to the variable key with parameters to capture the keystrokes when you type in the element with the id login, and has modified the set of calls to use, using the keypress event

Touch events

These events are produced by touching a touch screen

Are similar to those produced by a mouse, but its delay is much lower

Because of this, conflicts can occur with mouse events, this is why it is advisable to disable them, not to run similar events twice

Among the most important of which we highlight:

touchstart
is activated when the finger touches the surface of the screen
touchend
is activated when the finger stops pressing the surface of the screen
touchmove events
is activated when the finger slides on the surface of the screen
touchenter
is activated when the finger is moved over an item (when we enter in the item)
touchleave
is triggered when the finger leaves the element (when we leave the element)
touchcancel
is activated when the finger goes outside the bounds of the browser window

Form events

The forms have their own events, among the most important of which we highlight:

click
it is activated when we click the mouse on an item
It is usually used with buttons (button, submit)
change
is triggered when the user modifies the value of a text element

This is normally used with input of type text, textarea or drop-down lists to select an option
focus
is activated when the user selects a form element
blur
is triggered when the user moves to another form element
submit
is activated when the user performs the action of submitting the form (not just when pressed the button submit, which can be simulated at the push of a button which makes the time of submit or when you force a call to the event from another event)

In addition, the submit event generates the events mousedown, click, mouseup and submitin that same order, which allows us to perform validations on the form elements before final submission
reset
is activated when the user performs the action of resetting the form (not only when you press the reset button, which can be simulated at the push of a button that makes the times of reset, or when force a call to the event from another event)

var send = function(event) {
    var login = $('#login').val();
    var pass = $('#pass').val();

    if( (login.length == 0) || (pass.length == 0) ) {
        alert('One of the data was unfilled');
        event.preventDefault();
    }
};

var write = function() {
    var value = $('#pass').val();

    if(value.indexOf('@') 1= *1) {
       alert('The password cannot contain the @ symbol');
    }
};

$(function() {
    $('#button').click(warning);
    $('#button').mouseover(over);
    $('#button').mouseout(out);
    $('#login').keypress(key);
    $('#form').submit(send);
    $('#pass').change(write);
});

In the example, we have added the variables to send (to validate the fields login and pass) and write (to validate that it does not enter the @ symbol into the field, pass); has modified the set of calls to use, using the events submit and change

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Secarcam's Computer Science Web

Events

Events

Syntax of events

Item events

Mouse events

Keyboard events

Touch events

Form events

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Events

Syntax of events

Item events

Mouse events

Keyboard events

Touch events

Form events

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy