إدارة الأحداث

مقدمة

ما الحدث؟

النقر

<button>Button</button>		

<script>
/* Callback will run as son as
    the DOM is loaded
*/
$(document).ready(function(){
 
     $('button').click(function(){
         alert('Button clicked');
    });
})
</script>

تحذير

النقر المزدوج

<button>Coddy Button</button>

<script>
// runs when button is click
$("button").click(function(){
          $('button').text('Clicked')
 });

// runs when button is double click
$("button").dblclick(function(){
      $('button').text('Double Clicked')
 });
</script>

أحداث الماوس

<button>Coddy Button</button>

<script>

/* It runs when the mouse 
     hovers over the button
*/
$("button").hover(function(){
       $('button').text('Hovering...')
 });

/* 
It runs when the mouse 
enters an element
*/
$("button").mouseenter(function(){
        $('button').text('Mouse enter...')
 });

/* 
It runs when the mouse leaves 
an element
*/
$("button").mouseleave(function(){
     $('button').text('Mouse Leave...')
 });

</script>

أحداث لوحة المفاتيح

<input type="text" id="name" 
            name="yourname" 
            placeholder="Enter your name" />

<p>Keyboard event: <span id="state"></span></p>

<script>

/*
Callback will run as son as 
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press 
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
   $('#state').text('Key down')
 });

/*
It runs when we take our finger 
off the keyboard key
*/
$('#name').keyup(function(){
      $('#state').text('Key up')
 });

// Runs when the user focuses on input.
$('#name').focus(function(){
         $('#state').text('Focus')
 });

/*
It works when we unfocus 
from an input on the keyboard.
*/
$('#name').blur(function(){
     $('#state').text('Blur')
 });

})
</script>

أحداث النموذج

مثال على أحداث النموذج

*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
        function(event){

    });

أحداث النافذة

طريقة resize

const window = {};
const $ = (obj) => ({
    resize: (callback) => {
        console.log("Resize event handler would be attached here.");
    }
});
$(window).resize(function() {
     //trigging when user change windows size
 });

طريقة scroll

$(window).scroll(function() {
	//Calling when user scroll the window
});


$('#my-scrollable-element').scroll(function() {
	//Calling when user scroll the cursor 
        //that inside the #my-scrollable-element element
});

تهانينا