آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش JavaScript EventListener

دوره های مرتبط با این مقاله

JavaScript HTML DOM EventListener

تابع ()addEventListener

مثال:

یک event listener اضافه می کنیم که به محض کلیک کاربر روی دکمه، اجرا می شود.
این مثال به وسیله ی متد ()addEventListener، یک رخداد click به المان دکمه الصاق (متصل) می کند.

نمونه یک

document.getElementById("myBtn").addEventListener("click", displayDate);
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
امتحان کنید

متد ()addEventListener یک مدیریت کننده ی رخداد (event handler) به المان مورد نظر ضمیمه می کند.
متد مزبور یک مدیریت کننده ی رخداد به المان مورد نظر، بدون بازنویسی (overwrite) مدیریت کننده های رخداد موجود، ضمیمه می کند.
می توان event handler های متعددی به تنها یک عنصر افزود.
می توان event handler های متعددی از نوع یکسان به یک المان اضافه کرد.
همچنین می توان event-handler ها را به هر شی DOM مانند شی window افزود.
این امکان وجود دارد که event listener های (گوش فراخوان رخداد) متعددی به هر شی DOM (و نه لزوما اشیا HTML) افزود.
متد ()addEventListener همچنین مدیریت نحوه ی واکنش event به bubbling را به مراتب آسان تر می سازد. در bubbling رخداد مورد نظر ابتدا توسط درونی ترین المان ضبط و مدیریت شده، سپس به المان های خارجی انتقال داده (propagate) می شود.
در واقع این متد عملیات eventحبابی را تسهیل کرده و نحوه ی اجرای event حبابی را مشخص می کند. Event حبابی مفهومی است که در آن یک event از یک tag درونی به یگ تگ بیرونی انتقال می یابد.
هنگامی که از متد ()addEventListener استفاده می کنید، جاوا اسکریپت به منظور خوانایی بهتر از نشانه گذاری های HTML (HTML markup) جدا سازی شده و نیز به شما اجازه می دهد حتی زمانی که HTML markup را کنترل نمی کنید، گوش فراخوان رخداد (event listener) به عنصر مورد نظر اضافه کنید.
جهت حذف گوش فراخوان رخداد نیز کافی است از متد ()removeEventListener استفاده کنید.

ساختار نگارشی

element.addEventListener(event, function, useCapture);

اولین پارامتر بیانگر نوع رخداد (event) می باشد مانند "click" یا "mousedown" .
دومین پارامتر، تابعی است که می خواهیم به هنگام اجرا شدن رخداد فراخوانده شود.
سومین پارامتر یک مقدار بولی است که مشخص می کند از event حبابی (event bubbling) استفاده شود یا event capturing (ضبط و مدیریت رخداد). پارامتر نیز اختیاری است.
Event capturing : در event capturing، رخداد ابتدا توسط بیرونی ترین المان ضبط (capture) شده، سپس به عناصر درونی انتقال داده می شود.

نکته:

توجه داشته باشید که نباید از پیشوند " on " برای رخداد استفاده کنید. به عنوان مثال بجای "onclick" از "click" استفاده کنید.

افزودن Event Handler به یک المان

مثال:

این مثال هنگامی که کاربر روی یک المان مشخص کلیک می کند، "Hello World!" را نمایش می دهد:

نمونه دو

document.getElementById("myBtn").addEventListener("click", function () {
            alert("Hello World!");
        });
امتحان کنید

یا

نمونه سه

document.getElementById("myBtn").addEventListener("click", myFunction);
        function myFunction() {
            alert("Hello World!");
        }
امتحان کنید

افزودن چندین event handler به یک المان

تابع ()addEventListener به شما امکان می دهد بدون بازنویسی ((overwrite رخدادهای موجود چندین رخداد متعدد جدید به تنها یک المان اضافه کنید:

نمونه چهار

        var x = document.getElementById("myBtn");
        x.addEventListener("click", myFunction);
        x.addEventListener("click", someOtherFunction);
        function myFunction() {
            alert("Hello World!");
        }
        function someOtherFunction() {
            alert("This function was also executed!");
        }
امتحان کنید

می توان رخدادهایی از نوع مختلف به المانی یکسان افزود:

نمونه پنج

        var x = document.getElementById("myBtn");
        x.addEventListener("mouseover", myFunction);
        x.addEventListener("click", mySecondFunction);
        x.addEventListener("mouseout", myThirdFunction);
        function myFunction() {
            document.getElementById("demo").innerHTML += "Moused over!
"; } function mySecondFunction() { document.getElementById("demo").innerHTML += "Clicked!
"; } function myThirdFunction() { document.getElementById("demo").innerHTML += "Moused out!
"; }
امتحان کنید

افزودن یک event handler به شی Window

متد ()addEventListener به شما امکان می دهد گوش فراخوان های رخداد متعددی به (هر) شی HTML DOM همچون المان های HTML، سند HTML ، شی window و یا هر شی دیگری (مانند xmlHttpRequest ) که از رخدادها پشتیبانی می کنند، اضافه کنید.

مثال:

یک گوش فراخوان رخداد (event listener) تخصیص دهید که به محض اینکه کاربر اندازه ی پنجره را تغییر داد، اجرا و راه اندازی شود:

نمونه شش

        window.addEventListener("resize", function () {
            document.getElementById("demo").innerHTML = Math.random();
        });
امتحان کنید

ارسال پارامتر

به هنگام ارسال مقادیر پارامتر، از یک "anonymous function" (یا تابع نام گذاری نشده) استفاده کنید که تابع مشخص شده را با پارامترهای مورد نظر فراخوانی کند:

نمونه هفت

        var p1 = 5;
        var p2 = 7;
        document.getElementById("myBtn").addEventListener("click", function () {
            myFunction(p1, p2);
        });
        function myFunction(a, b) {
            var result = a * b;
            document.getElementById("demo").innerHTML = result;
        }
امتحان کنید

Event Handling یا Event Bubbling ؟

در کل دو روش انتقال رخداد (event propagation) در HTML DOM وجود دارد که به ترتیب عبارتند از:

  1. Bubbling
  2. Capturing

انتقال رخداد (event propagation) یک روش برای تعیین کردن ترتیب رخداد event ها می باشد. چنانچه یک المان <p> داخل المان <div> دارید و کاربر روی المان <p> کلیک کند، رخداد "click" کدام المان باید اول اجرا و مدیریت شود؟
در bubbling، اول رخداد درونی ترین المان اجرا می شود و بعد رخداد المان بیرونی، به عبارتی دیگر رخداد click المان<p>پیش از رخداد click عنصر <div> مدیریت و اجرا می شود.
در capturing، رخداد بیرونی ترین المان پیش از رخداد درونی ترین المان اجرا می شود، به عبارتی دیگر رخداد click عنصر <div> ابتدا اجرا می شود و بعد رخداد click المان<p>.
می توان نوع propagation (انتقال) را با استفاده از "useCapture" به عنوان پارامتر ورودی در متد ()addEventListener تعیین کرد:

addEventListener(event, function, useCapture);

مقدار پیش فرض false است که از نوع انتقال bubbling استفاده می کند، اما همین که مقدار را روی true تنظیم می کنید، رخداد از نوع انتقال (propagation) capturing بهره می گیرد.

مثال:

نمونه هشت

document.getElementById("myP").addEventListener("click", function () {
            alert("You clicked the P element!");
        }, false);
امتحان کنید

متد ()removeEventListener

متد ()removeEventListener، مدیریت کننده های رخدادی (event handler) که به وسیله ی تابع ()addEventListener به المان ها متصل شده اند، حذف می کند:

نمونه نه

document.getElementById("myDIV").addEventListener("mousemove", myFunction);
        function myFunction() {
            document.getElementById("demo").innerHTML = Math.random();
        }
امتحان کنید

پشتیبانی مرورگرها از متدهای حذف و اضافه ی گوش فراخوان رخداد

توجه:

دو تابع ذکر شده در مرورگرهای IE ویرایش 8.0 و Opera ویرایش 7.0 و نسخه های پیشین این دو مرورگر پشتیبانی نمی شوند. برای ورژن های نام برده ی این دو مرورگر، به منظور متصل کردن و حذف event handler به المان مورد نظر، به ترتیب از دو متد ()attachEvent و ()detachEvent استفاده می کنیم.

element.attachEvent(event, function);
element.detachEvent(event, function);

مثال:

نمونه ده

      var x = document.getElementById("myBtn");
        if (x.addEventListener) {
            x.addEventListener("click", myFunction);
        } else if (x.attachEvent) {
            x.attachEvent("onclick", myFunction);
        }
        function myFunction() {
            alert("Hello World!");
        }
امتحان کنید

کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده بوده و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 4727
  •    2548
  • تاریخ ارسال :   1394/08/13

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش JavaScript EventListener
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .