دورة javascript للمبتدئين الدرس السابع عشر


فهاد الدرس السابع عشر من دورة javascript  للمبتدئين غادي نشوفوا les événement  ف javascript  ملي كيكليكي المستخدم على شي bouton فهدا كيتعتبر événement فغادي نشوفوا انواع متعددة وغادي نشوفوا كيفاش نتعاملوا معاها.


1- ل événement click ف javascript

أول event غادي نشوفوا هو ل click يعني ملي كيكليكي المستخدم على شي élément مثلا هنا فالمثال زدنا champ و bouton ف index.html ف main.js استرجعنا ل bouton بل id ديالو من بعد ب addEventListener كنعطيه ل event click و ل fonction لي غادي تنفد ملي نكليكي على ل bouton هي clickBtn لي فقط كت afficher alert message فيه hi الكود لي زدنا هو :

                                //index.html

   <div class="text-center" id="main-div">
        <input type="text">
        <input type="button" value="valider" id="add">
    </div>

//main.js

const btn = document.getElementById('add');
btn.addEventListener('click',clickBtn);
function clickBtn(){
    alert('hi');
}
                            

2- ل événement dblclick ف javascript

 ل   événement dblclick يعني ملي كيكليكي المستخدم جوج مرات على شي élément فغادي نحتافظو بنفس المثال السابق فقط غادي نبدل ل click ل dblclick فاش المستخدم غادي يدير double click على ال bouton غادي يت afficha لميساج الكود لي زدنا هو :

                                //index.html code

   <div class="text-center" id="main-div">
        <input type="text">
        <input type="button" value="valider" id="add">
    </div>

//main.js

const btn = document.getElementById('add');
btn.addEventListener('dblclick',clickBtn);
function clickBtn(){
    alert('hi');
}
                            

3- ل événement mousedown ف javascript

 ل   événement mousedown يعني ملي كيكليكي المستخدم على la souris سواء بليمن ولا بليسر فغادي نحتافظو بنفس المثال السابق فقط غادي نبدل ل dblclick ل mousedown فاش المستخدم غادي يدير click على la souris ول click خص تكون على ال bouton غادي يت afficha لميساج الكود لي زدنا هو :


                                //index.html code

   <div class="text-center" id="main-div">
        <input type="text">
        <input type="button" value="valider" id="add">
    </div>

//main.js

const btn = document.getElementById('add');
btn.addEventListener('mousedown',clickBtn);
function clickBtn(){
    alert('hi');
}
                            

4- ل événement mouseover ف javascript

 ل   événement mouseover يعني ملي المستخدم كيحط  la souris على  شي élément فغادي نحتافظو بنفس المثال السابق فقط غادي نبدل ل mousedown ل mouseover فاش المستخدم غادي يحط la souris على ل bouton غادي يت afficha لميساج الكود لي زدنا هو :


                                    //index.html code

   <div class="text-center" id="main-div">
        <input type="text">
        <input type="button" value="valider" id="add">
    </div>

//main.js

const btn = document.getElementById('add');
btn.addEventListener('mouseover',clickBtn);
function clickBtn(){
    alert('hi');
}
                                

5- ل événement mouseout ف javascript

 ل   événement mouseout يعني ملي المستخدم كيحيد  la souris على  شي élément فغادي نحتافظو بنفس المثال السابق فقط غادي نبدل ل mouseover ل mouseout فاش المستخدم غادي يحيد la souris على ل bouton غادي يت afficha لميساج الكود لي زدنا هو :


                                    //index.html code

   <div class="text-center" id="main-div">
        <input type="text">
        <input type="button" value="valider" id="add">
    </div>

//main.js

const btn = document.getElementById('add');
btn.addEventListener('mouseout',clickBtn);
function clickBtn(){
    alert('hi');
}