article

رویدادها (Events) در جاوا اسکریپت (JavaScript)

javascript-event

از جمله ویژگی های ذاتی زبان برنامه نویسی جاوا اسکریپت (JavaScript) رویداد محور بودن آن است که امکان ایجاد قابلیت های تعاملی را در صفحات وب ممکن می کند، به طور مثال می توانیم تابعی تعریف کنیم که حاصل جمع نمرات آزمون های آنلاین را پس از کلیک کاربر (رویداد onclick) بر روی دکمه (button) در یک کادر نمایش دهد، یا به فرض زمانی که صفحه وب به صورت کامل بارگذاری شد (رویداد onload) مدت زمان باقیمانده تا رفرش بعدی را در خروجی چاپ کند، تعداد و نوع رویدادها در مفسر جاوا اسکریپت بسته به نیاز قابلیت های در نظر گرفته شده در صفحات وب بسیار متنوع است و چند شیوه مختلف برای به کار بردن (Handle) آنها وجود دارد، در ادامه این آموزش با معنی رویداد، انواع مختلف و نحوه استفاده از آنها در کدنویسی HTML و JavaScript به صورت مفصل آشنا خواهیم شد.

معنی رویداد (Event) در جاوا اسکریپت


به طور ساده رویداد (Event) در جاوا اسکریپت به معنی بروز یک اتفاق در صفحه وب (یا هر بستری که مفسر جاوا اسکریپت در آن اجرا می شود) است که می تواند عامل آن کاربر یا سیستم باشد، بعد از رخ دادن رویداد مفسر جاوا اسکریپت آن را شناسایی کرده و در صورتی که متناسب با آن Event کد خاصی نوشته شده باشد دستورات متناظر اجرا می شود، لذا همانطور که پیش تر در بحث توابع (Functions) دیدیم رویدادها در واقع حکم استارت را برای موتور توابع بازی می کنند و معمولا هر تابع متصل به یک یا چند رویداد است.
در مثال زیر نحوه فراخوانی تابع با رویداد onclick (زمانی که کاربر روی یک عنصر کلیک می کند) را بررسی می کنیم:
<script>
function setAlert(){
    alert("این پیام با کلیک کاربر بر روی دکمه نمایش داده می شود");
}
</script>
<input type="button" name="button" value="کلیک" onclick="setAlert();">
زمانی که کاربر بر روی دکمه input کلیک می کند قسمت مربوط به onclick اجرا و تابع فرضی setAlert فراخوانی می شود، onclick یکی از رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب است.

شیوه های به کار بردن (Handle) رویدادها در صفحات وب


 برای استفاده از رویدادها یا به اصطلاح Handle (به کار بردن) آنها در صفحات وب و نسبت دادن رویداد به یک عنصر در مجموع سه راه وجود دارد:
- استفاده از رویداد با Event Handler خطی (Inline) و ترکیب با کدنویسی HTML
- استفاده از رویداد با Event Handler مستقل و خارج از کدنویسی HTML
- استفاده از رویداد با addEventListener و removeEventListener
در ادامه آموزش به صورت موردی در خصوص هر کدام از این شیوه ها توضیح خواهیم داد.

استفاده از رویداد با Event Handler خطی (Inline)


ساده ترین شیوه به کاربردن رویداد در صفحات وب استفاده از آنها به صورت خطی (Inline) در ترکیب با تگ های HTML مانند input، div، button و... است، به طور مثال:
<script>
function showMessage(msg){
    alert(msg);
}
</script>
<button type="button" onclick="showMessage('پیامی که با کلیک نمایش داده می شود');">Click</button>
با کلیک بر روی دکمه button رویداد خطی onclick اتفاق می افتد و تابع showMessage اجرا و در نهایت پیام زیر به صورت پنجره Alert نمایش داده خواهد شد:
پیامی که با کلیک نمایش داده می شود
نکته 1: اختصاص رویداد به شیوه خطی به جهت ترکیب بخش اسکریپت نویسی با کدنویسی HTML از نظر دانش سئو (SEO یا بهینه سازی صفحات وب برای موتورهای جستجو) توصیه نمی شود، بهتر است این شیوه را صرفا به عنوان روشی به اصطلاح دم دستی مد نظر داشته باشیم و برای صفحاتی که از نظر سئو باید بهینه باشند از روش هایی که در ادامه بررسی خواهیم کرد استفاده کنیم (توصیه می شود بخش اسکریپت ها را از بخش HTML جدا کنیم).
نکته 2: در اصطلاح برنامه نویسی به اتفاق افتادن رویداد Fire یا Trigger و به فراخوانی تابع Call می گویند.

استفاده از رویداد با Event Handler مستقل


روش دیگر به کار بردن رویداد استفاده از آن به صورت مستقل (در تگ script یا فایل JS) و خارج از کدنویسی HTML است، در این شیوه می توانیم به یک عنصر در صفحات وب یک یا چند رویداد مجزا با تنظیمات سفارشی نسبت دهیم، به طور مثال:
<button id="click-button" type="button">Click</button>
<script>
function showMessage(msg){
    alert(msg);
}
var elm = document.getElementById('click-button');
elm.onclick = function(){
    showMessage('پیامی که با کلیک نمایش داده می شود');
}
</script>
همان طور که مشخص است در این شیوه از به کار بردن رویدادها ابتدا باید عنصر مورد نظر در صفحه انتخاب شود (در اینجا متغیر elm با توجه به ID تعیین شده در متد getElementById دکمه button را انتخاب و تبدیل به آبجکت می کند)، سپس با نمونه Syntax زیر رویداد onclick را برای این آبجکت Handle می کنیم (یعنی با اجرای onclick در عنصر elm کدهای تنظیم شده در داخل کاراکترهای {} پردازش می شوند):
elm.onclick = function(){}
عنصر مورد نظر در صفحات وب می تواند بسته به نیاز برنامه متفاوت باشد، به طور مثال آبجکت window یا آبجکت تگ های HTML، مثال:
<script>
function showMessage(msg){
    alert(msg);
}
window.onload = function (){
    var elm = document.getElementById('click-button');
    elm.onclick = function(){
        showMessage('پیامی که با کلیک نمایش داده می شود');
    }
}
</script>
<button id="click-button" type="button">Click</button>
در این نمونه کد ما رویداد onload را برای آبجکت window (پنجره جاری) تنظیم کرده ایم، در نمونه کد اول اگر تگ script را قبل از تگ button درج کنیم خطای زیر را دریافت خواهیم کرد (مشاهده خطاها با زدن کلید F12 در مرورگر، قسمت Console):
Uncaught TypeError: elm is null
دلیل دریافت این خطا مشخص است، ما عنصری را در صفحه وب انتخاب کرده ایم که هنوز پردازش نشده است! کدنویسی صفحات وب به ترتیب از بالا به پائین پردازش می شود و مشخص است انتخاب تگی که هنوز در دسترس نیست برنامه را با خطا مواجه می کند، برای رفع این خطا می توانیم پردازش قسمتی از کدهای جاوا اسکریپت را به بعد از بارگذاری کامل صفحه موکول کنیم و این کار با اختصاص رویداد onload به آبجکت window (عنصر صفحه جاری) قابل انجام است، به این صورت حتی اگر کدها را قبل از تگ مورد نظر درج کنیم مشکلی به وجود نمی آید و بعد از بارگذاری کامل صفحه این قسمت از دستورات پردازش می شود.

استفاده از رویداد با addEventListener و removeEventListener


در سال 2000 میلادی کنسرسیوم جهانی وب W3C شیوه دیگری برای اختصاص رویداد جاوا اسکریپتی به عناصر مختلف صفحات وب معرفی کرد که در حال حاضر به استانداردی فراگیر تبدیل شده است:
https://www.w3.org/TR/DOM-Level-2-Events/#events-Events-registration
این شیوه استفاده از متدی تحت عنوان addEventListener است که در مکانیزم آن مفسر جاوا اسکریپتی مرورگر گوش به زنگ اجرای رویداد بر روی عنصر مورد نظر بوده و در صورت اتفاق تابع متناظر پردازش می شود، شیوه کار addEventListener شباهت زیادی به Event Handler مستقل دارد منتها Syntax آنها متفاوت و قابلیت های addEventListener بیشتر است که در ادامه بررسی خواهیم کرد.
نکته: addEventListener در نسخه های قدیمی (8 و ماقبل) مرورگر اینترنت اکسپلورر پشتیبانی نمی شود و در صورتی که کاربرانی با این نسخه از مرورگر اکپسلورر مد نظر برنامه ما باشند باید از attachEvent استفاده کنیم.
برای استفاده از addEventListener باید از Syntax آن پیروی کنیم:
object.addEventListener('event', function, options);
پارامتر object همان عنصری است که در صفحه انتخاب کرده ایم، قسمت Event نام رویداد (به فرض click) و Function تابعی است که به رویداد متصل و قسمت Options تنظیمات اضافه و اختیاری متد است که در صورت نیاز اعمال می شود (مقدار پارامتر سوم را فعلا false در نظر گرفته و توضیح تکمیلی در این خصوص را به آموزش های پیشرفته جاوا اسکریپت موکول می کنیم)، در نمونه کد زیر در صورت کلیک بر روی بلاک رنگی با آی دی فرضی clickable تابع showText اجرا می شود:
<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("بر روی بلاک رنگی کلیک شد");
}

if(block.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر 8 و ماقبل
    block.addEventListener("click", showText, false);
} else{
    //اینترنت اکسپلورر 8 و ماقبل
    block.attachEvent("onclick", showText);
}
</script>
در انتهای این صفحه می توانیم به صورت آنلاین مثال هایی از کاربرد addEventListener را بررسی کنیم.
همان طور که مشخص است بین دو روش addEventListener و Event Handler مستقل شباهت زیادی وجود دارد، اما به چند دلیل استفاده از روش addEventListener می تواند بهینه تر باشد:
- وجود امکان حذف رویداد اختصاص داده شده به یک عنصر با removeEventListener (detachEvent برای IE8 و ماقبل)، مثال:
<style>
#clickable{
    width: 100px;
    height: 100px;
    background: #FC9;
}
</style>
<div id="clickable"></div>
<script>
var block = document.getElementById("clickable");

function showText(){
    alert("این پیام فقط یک بار نمایش داده می شود");
    if(block.removeEventListener){
        block.removeEventListener("click", showText, false);
    } else{
        block.detachEvent("onclick", showText);
    }
}

if(block.addEventListener){
    block.addEventListener("click", showText, false);
} else{
    block.attachEvent("onclick", showText);
}
</script>
به این صورت با یک بار اجرای تابع showText رویدادهای اختصاص داده شد قبلی حذف می شوند.
- وجود امکان اختصاص بیش از یک تابع در رویداد مد نظر، به طور مثال:
<button id="click-button" type="button">Click</button>
<script>
var button = document.getElementById("click-button");

function showText1(){
    alert("تابع اول اجرا شد");
}

function showText2(){
    alert("تابع دوم اجرا شد");
}

if(button.addEventListener){
    button.addEventListener("click", showText1, false);
    button.addEventListener("click", showText2, false);
} else{
    button.attachEvent("onclick", showText1);
    button.attachEvent("onclick", showText2);
}
</script>
به این صورت می توانیم دو یا چند Handler مختلف را به عنصر مورد نظرمان با Listener مشابه نسبت دهیم.

رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب


با توجه به طیف وسیع دستگاه هایی که جاوا اسکریپت در آنها اجرا می شود و همچنین وجود قابلیت تنظیم خاصیت های CSS با JavaScript رویدادهای این زبان فراوانی و تنوع زیادی دارند و بررسی کامل آنها زمانبر و شاید خارج از حوصله این مبحث است، از این رو جهت آشنایی بیشتر در لینک زیر لیستی از رویدادهایی که بیشترین کاربرد را در کدنویسی صفحات وب دارند به همراه مثال های آنلاین تهیه کرده ایم که به نظر برای آشنایی اولیه و استفاده های متداول کافی خواهد بود:
لیست رویدادهای پرکاربرد جاوا اسکریپت در صفحات وب
نکته: برخی رویدادهای جاوا اسکریپتی در مرورگرها و نسخه های مختلف آنها به یک میزان و به یک شکل پشتیبانی نمی شوند، لذا در به کار بردن آنها (بخصوص اگر کاربران هدف برنامه ما از نسخه های قدیمی مرورگرها استفاده می کنند) باید به سطح پشتیبانی رویداد دقت و حتی المقدور در چند مرورگر مختلف آن را تست و بررسی کنیم.

مثال و پیش نمایش آنلاین


برای آشنایی بیشتر با مبحث رویدادها آموزش را با چند مثال به پایان می بریم، جهت تست و بررسی می توانیم از کد و پیش نمایش آنلاین زیر استفاده کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | تست و بررسی رویدادها در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
}
#black-block {
    width: 100px;
    height: 100px;
    background-color: #333;
    display: block;
    margin: 4px;
}
#show-text {
    height: 20px;
}
</style>
</head>
<body>
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!<br></noscript>
<script>
function hello(){
    alert("به آموزش جاوا اسکریپت خوش آمدید");
}

function add(){
        document.getElementById("show-text").innerHTML = "این متن با اجرا شدن رویداد onmouseover در بلاک div با آی دی فرضی show-text چاپ می شود، برای بررسی رویداد onmouseout نشانه گر را از محدوده این دکمه خارج کنید.";
}

function clean(){
        document.getElementById("show-text").innerHTML = '';
}
</script>
مثال برای رویداد onclick:
<br><br>
<input type="button" value="کلیک کنید" onclick="hello();">
<hr>
مثال برای رویداد onclick با شیوه addEventListener:
<br><br>
بر روی بلاک زیر کلیک کنید.
<div id="black-block"></div>
<script>
var myblock = document.getElementById("black-block");

function showText(){
    alert("بر روی بلاک مشکی کلیک شد");
}

if(myblock.addEventListener){
    //تمام مرورگرها به جزء اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.addEventListener("click", showText, false);
} else {
    //اینترنت اکسپلورر نسخه 8 و ماقبل
    myblock.attachEvent("onclick", showText);
}
</script>
<hr>
مثال برای رویدادهای onmouseover و onmouseout:
<br><br>
<input type="button" value="ماوس را بر روی این دکمه بیاورید" onmouseover="add();" onmouseout="clean();">
<div id="show-text"></div>
<hr>
مثال برای رویدادهای onfocus و onblur:
<br><br>
<input type="text" value="در این فیلد کلیک کنید..." onfocus="myFocusFunc(this);" onblur="myBlurFunc(this);">
<script>
function myFocusFunc(element){
    if(element.value == element.defaultValue){
        element.value = '';
    }
}

function myBlurFunc(element){
    if(element.value == ''){
        element.value = element.defaultValue;
    }  
}
</script>
<hr>
مثال برای رویدادهای onkeydown و onkeyup:
<br><br>
<input type="text" id="first" placeholder="اینجا تایپ کنید..." onkeydown="myKeydownFunc(this);" onkeyup="myKeyupFunc(this);">
<script>
function myKeydownFunc(element){
    element.style.color = "red";  
}

function myKeyupFunc(element){
    element.style.color = "blue";    
}
</script>
</body>
</html>
پیش نمایش آنلاین
sectionدسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
» کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» حلقه for و while در جاوا اسکریپت (JavaScript)
» شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)
commentنظرات (۴۱ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: nili ball
۲۳:۲۳ ۱۳۹۷/۰۱/۲۴
سلام وقت بخیر .. واقعا تشکر میکنم از مطالبتون خیلی عالی بود . ممکنه راهنماییم کنید من یه عکس دارم می خوام روش کلیک شد بره به یه صفحه دیگه که لینکشو دارم مثلا روی عکس لوگو گوگل کلیک شد بره صفحه مربوط به گوگلو یاز کنه یعنی روش کلیک شد وارد https://www.google.com بشه ممکه راهنماییم کنید؟
پاسخ: 
برای این منظور باید به آدرس صفحه مد نظر با تگ a در HTML لینک ایجاد کنید به فرض:
<a href="https://google.com" title="Google" target="_self">Google</a>
برای نمایش لینک در صفحه جدید به جای self مقدار blank را قرار دهید.
نویسنده: محمود
۰۹:۰۰ ۱۳۹۷/۰۵/۲۱
سلام ، با آرزوی سلامتی برا شما و سایت خوبتان.
میخواهم تابعی طراحی کنم که وقتی روی یکی از خانه های جدول کلیک شد تابع فراخوانی شود. البته در خانه های جدول رویداد onclick را ننویسم . مثل خواسته دوستمان مصطفی که خاسته بود تابعی طراحی کنید که اگه کاربر هر کجای صفحه کلیک کرد تابع فراخوانی بشه،
به مصطفی اینچنین پاسخ داده بودید .
<script type="text/javascript">
window.onclick = function(){
alert('ok!');
}
</script>
حال اگر به جای window من کد زیر را قرار می دهم جواب نمی دهد.
document.getElementById("ftrow").onclick = function(){
alert('ok!');
}
لطفن راهنمایی کنید.
پاسخ: 
احتمالا باید تابع را بعد از کدهای جدول در صفحه درج کنید (نه قبل از آن)، علت این است که بر اساس HTML DOM عناصر صفحه از بالا به پائین بارگذاری می شوند و زمانی که به یک عنصر ارجاع می دهید باید از قبل بارگذاری شده و در دسترس باشد، در غیر اینصورت خطای Element Undefined در مفسر جاوا اسکریپت رخ می دهد.
نویسنده: admin
۱۹:۰۲ ۱۳۹۷/۰۹/۳۰
سلام خدمت مدیر گروه محترم
برای تغییر رنگ خودکار تصویر پس زمینه در زمانهای مختلف مثلا شب تم شب و روز تم روز ظاهر شود از چه دستوری باید استفاده کنیم
پاسخ: 
در نمونه کد زیر تغییر رنگ پس زمینه با توجه به زمان شب یا روز بودن برای بلاک با آی دی header انجام شده است که از همین الگو می توانید برای موارد مشابه استفاده کنید:
<style>
#header {
height: 200px;
width: 100%;
border: 1px solid #B5B5B5;
}
.day {
background: #35AAFF;
}
.night {
background: #F7272A;
}
</style>
<div id="header"></div>
<script>
function smartTemplate(){
var daynight = document.querySelector('#header');
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();

if(hours < 6 || hours >= 18) {
//console.log('night');
daynight.classList.remove('day');
daynight.classList.add('night');
}

if(hours >= 6 && hours < 18) {
//console.log('day');
daynight.classList.remove('night');
daynight.classList.add('day');
}
}

//call function
smartTemplate();
</script>
نویسنده: ansari
۰۹:۳۰ ۱۳۹۸/۰۷/۱۵
سلام وقتتون بخیر من می خوام وقتی که از تابع alert استفاده می کنم title باکس رو عوض کنم یعنی this page says نیاد مثلا مثل شما که نوشتید webgoo.ir says بیاد باید چیکار کنم خیلی گشتم چیزی پیدا نکردم
ممنون میشم کمکم کنید
پاسخ: 
این متن به صورت خودکار توسط مرورگر (گوگل کروم) اضافه می شود و متاسفانه امکان تغییر آن وجود ندارد، در صورتی که در سایت آنلاین پنجره را نمایش دهید آدرس سایت در عبارت جایگزین می شود، اگر نیاز مبرم به نمایش متن سفارشی دارید باید پنجره اختصاصی مشابه طراحی کنید که نیازمند کدنویسی HTML + CSS + JavaScript است.
نویسنده: mahdi
۲۰:۲۸ ۱۳۹۹/۰۱/۰۱
سلام استاد ، یه سوالی داشتم ، من باید دونه دونه ایونت ها رو یاد بگیرم ؟ چون خیلیاشون رو دیدم که اصلا الکی هستن یا این لیستی که گذاشتین کافیه ؟... بعد من اگر بخوام جاوااسکریپت رو بصورت حرفه ای یاد بگیرم رو چه مباحثیش تاکید کنم و از چه مباحثیش بگذرم که اصلا اهمیتی ندارن ؟ چون من یه عادت بد یا خوب دارم اینکه آموزش یه چیزیو شروع میکنم خودمو حبس میکنم تا زیرو بمشو یاد بگیرم ... آموزش کاملی هم که وجود نداره مثلا برا یه مبحثی که شاید یه معلم توی ده دقیقه کامل آموزشش میده ، من باید اول متوجه بشم که یه همچین مبحثی هست بعد مثلا یه روز زمان بزارم که همون مبحث ده دقیقه ای رو یاد بگیرم ، ممنون میشم راهنماییم کنی
پاسخ: 
در مباحث برنامه نویسی و به طور خاص برنامه نویسی وب لزومی ندارد تمام ریز متدها و رویدادها را مورد به مورد بررسی کنیم چون عملا چنین کاری به دلیل گستردگی آیتم ها نه نیاز است و نه ممکن، مهم این است کلیت یک مبحث و نکات کلیدی آن را یاد بگیریم به طور مثال نحوه فراخوانی و بکارگیری رویدادها، هدف از به کار بردن آنها، طیف های متنوع رویدادها و در نهایت کار با چند نمونه رویداد و تست در مرورگر، همین قدر برای سطح مقدماتی کافی است، در هنگام نوشتن پروژه ها و برنامه ها ممکن است نیاز به تمرکز بیشتر روی رویداد خاصی باشد که در آن مرحله می توانیم و باید وقت بیشتری روی آن رویداد خاص صرف کنیم، این حالت در اغلب مباحث به همین شکل است و با نوشتن برنامه های کوچک و ساده به مرور متوجه می شوید که خیلی از مباحث و تجربه ها حین کار کسب می شوند.
نویسنده: mahdi
۱۰:۴۱ ۱۳۹۹/۰۱/۰۴
سلام استاد عزیز ، Bubble یا حباب دقیقا یعنی چی ؟ یعنی گسترده شدن رویداد یک عنصر تا عنصر فرزندش؟
پاسخ: 
این مبحث به ترتیب اجرا و اعمال رویدادها در HTML DOM یا همان سورس صفحه مربوط می شود، به زبان ساده وقتی چند عنصر به صورت والد و فرزند داریم:
<html>
<div>
<ul>
<li>
</li>
</ul>
</div>
</html>
در این نمونه ساختار اگر رویداد onclick را به تگ li و div نسبت داده باشیم با کلیک کاربر در محدوده li قاعدتا هم li و هم div باید رویداد onclick را اجرا یا به اصطلاح Handle کنند چون خود li درون div قرار گرفته و کلیک کردن علاوه بر li شامل div نیز می شود، اما مرورگر چطور تصمیم می گیرد رویداد کدام عنصر اول اجرا شود؟ اینجاست که بحث Event Bubbling و Capturing مطرح می شود، در حالت Bubbling مرورگر ابتدا عنصر اصلی که کلیک شده را بررسی و رویداد آن را اجرا می کند، سپس گام به گام تگ های والد بالاتر از عنصر اصلی را برای پیدا کردن رویداد متناظر با کلیک بررسی کرده تا به بالاترین تگ صفحه یعنی html برسد، اما در حالت Capturing این رویه برعکس اتفاق می افتد و مرورگر از تگ html رویدادها را بررسی و در نهایت به عنصر اصلی کلیک شده می رسد.
مرورگرهای جدید از هر دو حالت پشتیبانی می کنند اما حالت Bubbling شیوه پیش فرض است، برای تغییر حالت پیش فرض در هنگام استفاده از addEventListener می توانیم آرگیومنت سوم را به صورت true در نظر بگیریم (معمولا تغییر این موارد ضرورتی ندارد!)، همچنین برای جلوگیری از تداخل و اجرای ناخواسته رویدادها از stopPropagation استفاده می کنیم.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
نکته: اینها نکات عمیق و پیشرفته جاوا اسکریپت هستند که بهتر است پس از تجربه نوشتن چند برنامه ساده تا متوسط به آنها نیم نگاهی داشته باشیم.
نویسنده: امید
۰۰:۱۰ ۱۳۹۹/۰۲/۱۷
با سلام و عرض ادب
فیلتری میخوام که تعداد جوابهای فیلترهای سایت tse بورس که با جاوا نوشته شده رو بگه مثلا
(pd1)=(tmax)
بگه چنتا جواب داره و در
=(cfield0)
قرار بدهد
چنتا برنامه اینترنت پیدا کردم ولی تو سایت وارد میکنم
آلارم class میده
پاسخ: 
تا آنجا که اطلاع داریم (در این زمینه فعالیتی نداریم!) راهنمای قسمت فیلترهای سایت بورس برای نمایش تعداد نتایج برگردانده شده دستور یا رویه خاصی ارائه نکرده است، اگر کلاس خاصی در دسترس دارید در صورت تمایل می توانید درج کنید تا امتحان کنیم، ممکن است ایرادی در Syntax یا پارامترها وجود داشته باشد.
نویسنده: Maryam
۰۲:۲۱ ۱۳۹۹/۰۲/۳۱
سلام .. من میخاستم کدی بنویسم که خروجی آن دکمه on .. of باشه که با زدن دکمه رنگ پس زمینه تغییر کند ممنون میشم کمکم کنین باتشگر
پاسخ: 
آموزش اختصاصی در این خصوص در سایت وجود دارد، لطفا عبارت "ساخت افکت رنگی با جاوا اسکریپت + وبگو" را در گوگل جستجو کنید.
نویسنده: شبنم
۱۷:۱۰ ۱۳۹۹/۰۷/۱۷
سلام وقتتون بخیر، ببخشید از کلمه event یا e دقیقا چه زمانی توی فانکشن استفاده میکنیم؟
پاسخ: 
اجرای توابع جاوا اسکریپت در صفحات وب متنی بر رویداد است، به طور مثال وقتی بر روی قسمتی از صفحه کلیک می کنیم یا زمانی که صفحه بارگذاری می شود اطلاعات این رویداد در مفسر جاوا اسکریپت در آبجکت Event نگهداری می شود، برای دسترسی به این آبجکت و اطلاعات زیرمجموعه آن از عبارت e که مخفف event است به عنوان آرگیومنت استفاده می کنیم، لذا زمانی باید از e در تابع استفاده کنیم که بخواهیم از اطلاعات آبجکت رویداد استفاده یا رفتار عادی مرورگر مبتنی بر رویدادها را تغییر دهیم، چند مثال:
- به دست آوردن شماره دکمه صفحه کلید کاربر:
<script>
function getKeyCode(e) {
var code = e.keyCode ? e.keyCode : e.charCode;
//console.log(code);
alert(code);
}
</script>
<input type="text" size="20" placeholder="کلیک و تایپ" onkeyup="getKeyCode(event);">
- غیرفعال کردن اسکرول مرورگر:
<style>
body {
height: 2000px;
}
</style>
<script>
/*
left: 37, up: 38, right: 39, down: 40,
spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
*/
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
if(keys[e.keyCode]) {
preventDefault(e);
return false;
}
}

//modern Chrome requires {passive: false} when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function() {supportsPassive = true;}
}));
} catch(e) {}

var wheel_option = supportsPassive ? {passive: false} : false;
var wheel_event = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

//call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); //older FF
window.addEventListener(wheel_event, preventDefault, wheel_option); //modern desktop
window.addEventListener('touchmove', preventDefault, wheel_option); //mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

//call this to Enable
function enableScroll() {
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheel_event, preventDefault, wheel_option);
window.removeEventListener('touchmove', preventDefault, wheel_option);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}
</script>
<html>
<body>
<input type="button" value="اسکرول خاموش" onclick="disableScroll();">
<input type="button" value="اسکرول روشن" onclick="enableScroll();">
</body>
</html>
- بدست آوردن آی دی عنصر کلیک شده:
<script>
function getElmID(e){
e = e || window.event;
elm = e.target || e.srcElement;

alert(elm.id);
}
</script>
<input id="btn-1" type="button" value="کلیک" onclick="getElmID();">
<input id="btn-2" type="button" value="کلیک" onclick="getElmID();">
نویسنده: احسان عباسی
۱۹:۴۰ ۱۳۹۹/۰۷/۱۷
با سلام و تشکر از سایت خوبتون من یه کد تعریف کردم که در بورس ایران سهم مدنظرمو بیاره .. میخواستم ببینم امکانش هست دستوری رو اضافه کنم تا زمان آوردن اون سهم هم برای من نمایش داده بشه
سپاس
پاسخ: 
تا آنجا که اطلاع داریم بورس تهران پلتفرم خاص خودش را دارد و مبتنی بر فیلترنویسی است، متاسفانه در خصوص فیلترنویسی و موارد مشابه فعالیتی نداریم.
نویسنده: ar
۱۴:۵۵ ۱۳۹۹/۰۸/۲۰
سلام ممنون از سایت خوبتون
ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست
من بعضی وقتا کدهایی که مینویسم اجرا نمیشه میخواستم بدونم مشکل از لپتاپ هست یا چیز دیگه ای ؟؟
مثلا توی همین addEventListener وقتی میخوام تابع رو بزارم توی این کد حتما باید () رو برای تابع بزارم تا اجرا بشه به این صورت :
addEventListener('click',function(
درصورتی که درکلیپ های آموزشی بدون گزاشتن () برای تابع دستور اجرا میشه.
یا مثلا وقتی از دستور removeEventListener استفاده میکنه اصلا دستور اجرا نمیشه من میگم اون دستوری که تو addEventListener دادم رو حذف کنم ولی دستور بازم اجرا میشه از detachEvent , attachEvent هم استفاده کردم مشکل برطرف نشد
دستورات اونجوری که تو ویدیوها نشون داده میشه اجرا نمیشه درصورتی که من همون کد رو مینویسم مثلا تو ویدیو به صورت alert وقتی روی صفحه نمایش کلیک میکنه پیام نشون داده میشه ولی من همون کد رو مینویسم ولی اجرا نمیشه (فقط یکبار وقتی صفحه نمایش رو رفرش میکنم اجرا میشه ولی وقتی روی صفحه نمایش کلیک میکنم اجرا نمیشه ولی تو آموزش وقتی کلیک میکنه هم alert باز میشه و پیام نشون داده میشه)
خواهش میکنم راهنماییم کنید خیلی گیج شدم
نمیدونم مشکل از لپتاپه یا چیز دیگه ای هست؟
کدنویسی رو همیشه تو brackets انجام میدم چون سبکه و هنگام کدنویسی هم کمک میکنه. از phpstorm و notepad++ هم استفاده میکنم فرقی نمیکنه مشکل برطرف نمیشه.
خیلی ممنون
پاسخ: 
قوی یا ضعیف بودن سخت افزار ارتباط خاصی به اجرای دستورات جاوا اسکریپت ندارد، همین که مرورگر بتواند صفحه وب را پردازش و بارگذاری کند کافی خواهد بود، سعی کنید Syntax دستورات را مطابق آموزش حاضر پیاده سازی نمائید و با زدن دکمه F12 در پنجره مرورگر قسمت Console خطاهای احتمالی را مشاهده و رفع کنید، برای اطمینان می توانید از پیش نمایش آنلاینی که در انتهای این آموزش درج شده استفاده کنید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





3 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form محمد رستمی
در:
سلام اگه میشه لیست توابع و کاربردشونو توی یه فایل pdf بزارین
۱۳۹۹/۰۹/۰۵

form شهریار صادقی
در:
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول...
۱۳۹۹/۰۹/۰۱

form دوست خوب
در:
اگر بخواهیم برای رفتن به مرورگر و باز کردن یک صفحه لینک دهیم؟
۱۳۹۹/۰۹/۰۱

form مجتهدزاده خیاوی
در:
سلام و خسته نباشید من جدولی دارم که تعداد ستون های اون نسبتا زیاده. توی نمایشگر های دسکتاپ مشکلی ندارم اما تو گوشی و...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
خیلی ممنون از پاسخگویی سریع! بله خوشبختانه سرور هاست دانلود LiteSpeed هست و از جدیدترین PHP هم پشتیبانی میکنه. تو قسمت path هم دایرکتوری...
۱۳۹۹/۰۸/۲۹

form Alireza
در:
عرض سلام و خسته نباشید از مطالب استفاده کردم و نظرات هم خوندم واقعا مفید بودن. یکی دو نفر مشکلی شبیه بنده داشتن. من...
۱۳۹۹/۰۸/۲۹

form امیرحسین
در:
سلام استاد عزیز وقت بخیر من یه سوال در مورد function use داشتم اگه ممکنه با مثالی کاربردی توضیح بدید که کارش چیه :...
۱۳۹۹/۰۸/۲۷

form Amin Eskandari
در:
سلام عالی بود ممنون
۱۳۹۹/۰۸/۲۷

form فاطمه
در:
چگونه در حلقه ها اعداد را جمع کنیم و در خروجی مجموع انان را نشان دهد مثلا جواب
۱۳۹۹/۰۸/۲۶

form میکاییل
در:
درسته مشکلی نیست تو ارسال اطلاعات. تنها مشکلم اینه که هدر عمل نمیکنه و ریدایرکت انجام نمیشه و نمیره سمت صفحه پرداخت. حالا نمیدونم به...
۱۳۹۹/۰۸/۲۵

form میکاییل
در:
سلام من تو قسمتی از صفحه پرداخت انلاین دارم همه چی درسته و اطلاعات بصورت ایجکسی ارسال میشه و سمت سرور نوشتم که هدر...
۱۳۹۹/۰۸/۲۵

form mohsen
در:
با عرض سلام و خسته نباشید خدمت استاد ببخشید من یه فرمی دارم که از طریق ایجکس ثبت میشه داخل دیتا و بعد میره به...
۱۳۹۹/۰۸/۲۳

form مجید
در:
سلام وقت بخیر . ببخشید نمیشه دیتابیس توی کدنویسی html ایجاد کنیم افرادی هستن توی محل کارش اینترنت ندارن . اینو باید چکارکنم
۱۳۹۹/۰۸/۲۳

form حسینی سیانکی
در:
سلام مطلب خیلی مفید و کاملی بود. خسته نباشید
۱۳۹۹/۰۸/۲۰

form ar
در:
سلام ممنون از سایت خوبتون ببخشید من تازه دارم زبان برنامه نویسی جاوااسکریپت رو یاد میگیرم و لپتاپم لپتاپ نسبتا ضعیفی هست من...
۱۳۹۹/۰۸/۲۰
form saba
در:
سلام من این کد رو در قسمت کد های اختصاصی کاربر وارد کردم اما هیچ تغییری ایجاد نشد ممکنه راهنمایی کنید؟
۱۳۹۹/۰۸/۱۹
form مینا
در:
سلام. من میخوام از regex توی ماشین حساب استفاده کنم ممنون میشم منو راهنمایی کنین
۱۳۹۹/۰۸/۱۹
form intal
در:
سلام خسته نباشید من واقعا از وبگو ممنونم که این آموزش های ارزشمند رو در اختیار کاربران قرار میده راستش من هرکاری می کنم پوزیشن...
۱۳۹۹/۰۸/۱۷
form بهروز
در:
مهندس جان خیلی عالی بود دستت درد نکنه درست شد.
۱۳۹۹/۰۸/۱۷
form اصغر
در:
خوندمش خیلی ممنون مفید بود
۱۳۹۹/۰۸/۱۵
form بهروز
در:
ممنون، خیلی لطف کردید، چشم امتحان میکنم خبر میدم فقط یه موری رو یادم رفت عرض کنم اینکه مثلا لینک exm.ir/m/yyyy به...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
ممنون از پاسخگویی سریعتان در سوال فوق yyyy متغیر هست یعنی هرسری یه عددی کلیک میشه مثلا exm.ir/1234 حالا میخوام ریدایرکت بشه به آدرس...
۱۳۹۹/۰۸/۱۴
form بهروز
در:
سلام اگه بخوام ادرس 1 رو به ادرس دو ریدایرکت کنم چطور انجام دهم:
۱۳۹۹/۰۸/۱۴
form Mori
در:
سلام. میخواستم بدونم که چگونه در html میشه چند لیست عمودی رو کنار هم قرار داد. یعنی در واقع لیست ها زیر هم نباشند. ...
۱۳۹۹/۰۸/۱۰
form مبین
در:
با سلام من می خواستم دستوری در دیتابیس بنویسم که بر اساس قد افراد نتایج را مرتب و چاپ کند و اگه قد برار بود...
۱۳۹۹/۰۸/۰۹
form عباس علیمردانی
در:
سلام. من یک سوال یا بهتر بگم خواهش داشتم ایا شما میتوانید وبلاگ رو فیلتر کنید؟ یعنی با حکم قضایی فیلتر بشه. وبلاگ برایه...
۱۳۹۹/۰۸/۰۹
form ابوالفضل
در:
سلام استاد اومدم امروز بعد از سالها سوالاتی که از شما استاد بزرگوارم میپرسیدم رو زیر این پست مرور می کردم واقعا چقدر مبتدی...
۱۳۹۹/۰۸/۰۹
form mahtab
در:
سلام وقتتون بخیر ببخشید من میخوام یه آهنگی رو بزارم وبم کدش تو اینترنت زدم اما نیاورد بی زحمت میشه راهنمایی کنین چجوری...
۱۳۹۹/۰۸/۰۸
form Mori
در:
بهترین سایت برنامه نویسی در ایران هستید
۱۳۹۹/۰۸/۰۷
form Mori
در:
سلام. چگونه باید در لیست برای هر کدام از اعضا به صورت جداگانه لینک بگذاریم؟؟
۱۳۹۹/۰۸/۰۷
form جیهوپ
در:
سلام استاد عزیز من میخواستم صفحه وبی ایجاد کنم مثل این صفحه وبی ایجاد کنید که مشخصات شما را در 3 پاراگراف با ویژگی...
۱۳۹۹/۰۸/۰۶
  در انتظار بررسی: ۲
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.