آموزش 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) شده، سپس به عناصر درونی انتقال داده می شود.

افزودن 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();
        }

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

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!");
        }

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