امروز چهارشنبه ۱۴۰۰/۰۱/۲۵

2021/04/14 GMT +4:30

» رویدادها (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>
پیش نمایش آنلاین
دسته بندی: آموزش مقدماتی » JavaScript
related مطالب بیشتر:
» حلقه for و while در جاوا اسکریپت (JavaScript)
» تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
» عملگرها (Operators) در جاوا اسکریپت (JavaScript)
» توابع (Functions) در جاوا اسکریپت (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 خطاهای احتمالی را مشاهده و رفع کنید، برای اطمینان می توانید از پیش نمایش آنلاینی که در انتهای این آموزش درج شده استفاده کنید.
نویسنده: محسن
۱۵:۰۵ ۱۴۰۰/۰۱/۰۸
سلام ،
سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم ، وقتی چند تا نماد در چند صفحه مجزا سرچ میکنم نمادها میان ولی با تاخیر بروزرسانی میشن و نمیتونم عملا خرید و فروشی انجام بدم چون جا میمونم و باید دوباره خودم نماد رو سرچ کنم تا بیاد تغییرات قیمتی که روش اعمال شده. حالا میخوام با استفاده از کدنویسی ، کاری کنم که این نماد هر ۵ ثانیه یکبار بروزرسانی بشه و اسکرول صفحه بیاد بالا و از ابتدای صفحه نمایش داده بشه.
لطفا من رو راهنمایی کنید؟ آیا میشه کدنویسی کرد.
پاسخ: 
با توجه به توضیحات یا باید از iFrame استفاده کنیم یا اینکه پنل کارگزاری را با توابعی مانند file_get_contents و curl دریافت و رفرش ها را مدیریت کنیم، در کل بدون بررسی فنی ساختار و کدنویسی پنل کارگزاری نمی توان نظر خاصی داد، احتمال دارد دسترسی به صفحه در حالت فریم بلاک شده باشد و نتوانیم از این طریق کنترل رفرش را بدست بگیریم که در اینصورت کار سخت خواهد بود، در صورت تمایل برنامه تیم ویور را نصب و از طریق منوی تماس اطلاع دهید تا به صورت آنلاین امکان انجام چنین کاری بررسی شود.
نویسنده: erfan
۲۰:۳۳ ۱۴۰۰/۰۱/۲۱
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم با زدن دوباره دکمه اون محتوا مثل اول پنهان بشه؟ دو اینکه چیکار کنم که از بین اون 5 تا دکمه وقتی یکی زده میشه و بعد میخوای دکمه بعدیو بزنی دکمه قبلی بسته بشه؟
پاسخ: 
برای ایجاد دکمه های نمایش و مخفی سازی محتوا می توانید از الگوی نمونه کد زیر استفاده کنید:
<style>
.block {
display: none;
}
</style>
<div id="block-1" class="block">محتوای 1</div>
<div id="block-2" class="block">محتوای 2</div>
<div id="block-3" class="block">محتوای 3</div>
<button onclick="toggleShowHide('block-1', 3);">دکمه 1</button>
<button onclick="toggleShowHide('block-2', 3);">دکمه 2</button>
<button onclick="toggleShowHide('block-3', 3);">دکمه 3</button>
<script>
function toggleShowHide(id, total){
let active_block = document.getElementById(id);
let other_block;

//بلاک مربوط به دکمه کلیک شده
if(active_block.style.display != 'block'){
active_block.style.display = 'block';
} else {
active_block.style.display = 'none';
}

//سایر بلاک ها
for(let i = 1; i <= total; i++){
other_block = document.getElementById('block-' + i);

if(active_block != other_block){
other_block.style.display = 'none';
}
}
}
</script>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





8 × 9
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

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

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

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

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

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷

form احمد
در:
با سلام و خسته نباشید ببخشید داخل جیکوری یدونه متغییر دارم الان میخوام همین متغییر رو با یه عدد دیگه جمع کنم ولی وقتی علامت...
۱۳۹۹/۱۲/۲۶
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.