رویداد | معنی و کاربرد | مثال |
---|---|---|
onchange | این رویداد زمانی اتفاق می افتد که مقادیر یکی از فیلدهای input، select یا textarea در صفحات وب تغییر کند، در مورد فیلدهای input و textarea بعد از تغییر محتوای متنی باید در خارج از فیلد کلیک کنیم تا رویداد اجرا شود. |
<style>
.input-1 {
width: 90%;
}
.rtl {
direction: rtl;
}
</style>
<script>
function setOnchangeAlert(){
alert("این پیام با اجرای رویداد onchange نمایش داده می شود");
}
</script>
<input type="text" name="button" class="input-1 rtl" placeholder="در این فیلد تایپ و در خارج از آن کلیک کنید" onchange="setOnchangeAlert();">
|
onclick | این رویداد زمانی اتفاق می افتد که بر روی عنصر هدف در صفحه وب کلیک شود، در واقع پس از فشردن و رها کردن نشانه گر ماوس رویداد onclick اجرا می شود. |
0 :onclick تعداد رویداد <script>
var onclick_count = 0;
function countOnclickEvent(id){
var onclick_elm = document.getElementById(id);
onclick_count++;
onclick_elm.innerHTML = onclick_count;
}
</script>
<input type="button" name="button" value="کلیک کنید" onclick="countOnclickEvent('onclick-count');">
<br>
<span id="onclick-count">0</span> :onclick تعداد رویداد
|
ondblclick | این رویداد زمانی اتفاق می افتد که بر روی عنصر هدف در صفحه وب طی بازه زمانی خیلی کوتاه (در حد میلی ثانیه) دو بار کلیک کنیم. |
0 :ondblclick تعداد رویداد <script>
var ondblclick_count = 0;
function countOndblclickEvent(id){
var ondblclick_elm = document.getElementById(id);
ondblclick_count++;
ondblclick_elm.innerHTML = ondblclick_count;
}
</script>
<input type="button" name="button" value="دابل کلیک کنید" ondblclick="countOndblclickEvent('ondblclick-count');">
<br>
<span id="ondblclick-count">0</span> :ondblclick تعداد رویداد
|
onhashchange | این رویداد زمانی اتفاق می افتد که مقادیر hash در نوار آدرس مرورگر تغییر کند، منظور از hash مقادیر بعد از علامت # در آدرس های URL وب است. |
<style>
.input-1 {
width: 90%;
}
.rtl {
direction: rtl;
}
</style>
<script>
function setURLHash(id){
var hash = document.getElementById(id).value;
if(hash == ''){
alert('فیلد نباید خالی باشد');
} else {
if(history.pushState) {
history.pushState(null, null, '#' + hash);
}
else {
location.hash = '#' + hash;
}
alert('در ادامه، مقدار ' + hash + ' را بعد از علامت # در آدرس URL صفحه به مقادیر دیگری تغییر داده و دکمه Enter را بزنید.');
}
}
window.onhashchange = function(){
alert('رویداد onhashchange اجرا شد');
}
</script>
<input type="text" name="button" id="hashchange" class="input-1 rtl" placeholder="یک مقدار فرضی در این فیلد وارد کنید">
<br>
<input type="button" name="button" value="Hash تغییر" onclick="setURLHash('hashchange');">
|
onfocus | این رویداد زمانی اتفاق می افتد که عنصر هدف در صفحات وب به حالت focus شده (کانون توجه) در می آید، به طور مثال هنگامی که در یک فیلد input یا بر روی button کلیک می کنیم. - رویداد onblur نقطه مقابل onfocus است. - همه عناصر وب قابلیت focus ندارند. |
<style>
.input-1 {
width: 90%;
}
.rtl {
direction: rtl;
}
</style>
<script>
function toggleFocusBlur(id, check){
var elm = document.getElementById(id);
if(check == 1){
elm.value = 'رویداد onfocus اجرا شد، در خارج از این فیلد کلیک کنید';
elm.style.background = '#CC99EE';
} else {
elm.value = 'رویداد onblur اجرا شد، در این فیلد کلیک کنید';
elm.style.background = '#FFFFFF';
}
elm.style.color = '#666666';
}
</script>
<input type="text" name="button" id="focus-blur" class="input-1 rtl" placeholder="در این فیلد کلیک کنید" onfocus="toggleFocusBlur('focus-blur', 1)" onblur="toggleFocusBlur('focus-blur', 0)">
|
onblur | این رویداد زمانی اتفاق می افتد که عنصری در صفحه وب از حالت focus و انتخاب خارج شود، به فرض هنگامی که در خارج از فیلد input کلیک می کنیم. | |
onfocusin | این رویداد مشابه onfocus است، با این تفاوت که در اینجا اگر به جای خود عنصر هدف به تگ والد آن هم رویداد را نسبت دهیم (به فرض تگ div والد تگ input) توابع متناظر اجرا می شوند. |
<style>
.input-1 {
width: 90%;
}
.rtl {
direction: rtl;
}
.focusin-focusout {
border: 1px solid #F00;
padding: 8px;
}
</style>
<script>
function toggleFocusinFocusout(id, check){
var elm = document.getElementById(id);
if(check == 1){
elm.value = 'رویداد onfocusin اجرا شد، در خارج از این فیلد کلیک کنید';
elm.style.background = '#CC99EE';
} else {
elm.value = 'رویداد onfocusout اجرا شد، در این فیلد کلیک کنید';
elm.style.background = '#FFFFFF';
}
elm.style.color = '#666666';
}
</script>
<div class="focusin-focusout" onfocusin="toggleFocusinFocusout('focusin-focusout', 1)" onfocusout="toggleFocusinFocusout('focusin-focusout', 0)">
<input type="text" name="button" id="focusin-focusout" class="input-1 rtl" placeholder="در این فیلد کلیک کنید">
</div>
|
onfocusout | این رویداد مشابه onblur است، با این تفاوت که در اینجا اگر به جای خود عنصر هدف به تگ والد آن هم رویداد را نسبت دهیم (به فرض تگ div والد تگ input) توابع متناظر اجرا می شوند. | |
onkeypress | این رویداد زمانی اتفاق می افتد که کاربر دکمه ای از صفحه کلید که ورودی ایجاد می کند (به فرض دکمه های حروف و اعداد، کاراکترهای خاص یا Space) را فشرده یا در این حالت نگه دارد، رویداد onkeypress برای دکمه هایی مانند Shift، Ctrl، Backspace و... اجرا نمی شود. |
0 :onkeypress تعداد رویداد 0 :onkeydown تعداد رویداد 0 :onkeyup تعداد رویداد <style>
.input-1 {
width: 90%;
}
.rtl {
direction: rtl;
}
</style>
<script>
keypress_count = 0;
keydown_count = 0;
keyup_count = 0;
function toggleKeyPressDownUp(id, check){
var elm = document.getElementById(id);
switch(check){
case 1:
keypress_count++;
elm.innerHTML = keypress_count;
break;
case 2:
keydown_count++;
elm.innerHTML = keydown_count;
break;
case 3:
keyup_count++;
elm.innerHTML = keyup_count;
break;
}
}
</script>
<input type="text" name="button" class="input-1 rtl" placeholder="در این فیلد دکمه ای را فشرده، نگه دارید و رها کنید" onkeypress="toggleKeyPressDownUp('key-press', 1)" onkeydown="toggleKeyPressDownUp('key-down', 2)" onkeyup="toggleKeyPressDownUp('key-up', 3)">
<br>
<span id="key-press">0</span> :onkeypress تعداد رویداد<br>
<span id="key-down">0</span> :onkeydown تعداد رویداد<br>
<span id="key-up">0</span> :onkeyup تعداد رویداد<br>
|
onkeydown | این رویداد زمانی اتفاقی می افتد که کاربر دکمه ای از صفحه کلید (هر دکمه ای) را فشرده یا نگه دارد. | |
onkeyup | این رویداد زمانی اتفاق می افتد که کاربر دکمه فشرده شده صفحه کلید (هر دکمه ای) را رها کند. | |
onmouseover | این رویداد زمانی اتفاق می افتد که نشانه گر ماوس وارد محدوده عنصر مورد نظر شود (توصیه شده). |
نشانه گر ماوس را در محدوده این بلاک وارد کرده و با وقفه کلیک کنید.
نشانه گر ماوس را در محدوده این بلاک حرکت داده و از بلاک خارج کنید.
- :رویداد اجرا شده
<style>
.mouse-event-1, .mouse-event-2 {
direction: rtl;
border: 1px solid #FC0;
height: 50px;
padding: 4px;
}
.mouse-event-2 {
border: 1px solid #F00;
margin-top: 4px;
}
</style>
<script>
function mouseEventExample(id, check){
var elm = document.getElementById(id);
switch(check){
case 1:
elm.innerHTML = 'onmouseover - onmouseenter';
break;
case 2:
elm.innerHTML = 'onmousemove';
break;
case 3:
elm.innerHTML = 'onmousedown';
break;
case 4:
elm.innerHTML = 'onmouseup';
break;
case 5:
elm.innerHTML = 'onmouseout - onmouseleave';
break;
case 6:
elm.innerHTML = 'onmousewheel - onwheel';
break;
}
}
window.onmousewheel = function(){
mouseEventExample('mouse-event', 6);
}
window.onwheel = function(){
mouseEventExample('mouse-event', 6);
}
</script>
<div class="mouse-event-1" onmouseover="mouseEventExample('mouse-event', 1)" onmouseenter="mouseEventExample('mouse-event', 1)" onmousedown="mouseEventExample('mouse-event', 3)" onmouseup="mouseEventExample('mouse-event', 4)">
نشانه گر ماوس را در محدوده این بلاک وارد کرده و با وقفه کلیک کنید.
</div>
<div class="mouse-event-2" onmousemove="mouseEventExample('mouse-event', 2)" onmouseout="mouseEventExample('mouse-event', 5)" onmouseleave="mouseEventExample('mouse-event', 5)">
نشانه گر ماوس را در محدوده این بلاک حرکت داده و از بلاک خارج کنید.
</div>
<span id="mouse-event"> - </span> :رویداد اجرا شده
|
onmouseenter | این رویداد در حالتی اتفاق می افتد که نشانه گر ماوس وارد محدوده عنصر مورد نظر شود، مشابه رویداد onmouseover با این تفاوت که این رویداد در محدوده بلاک فرزند (در صورت وجود) مجددا اجرا نمی شود. | |
onmousemove | این رویداد زمانی اتفاق می افتد که کاربر نشانه گر ماوس را در محدوده عنصر مورد نظر حرکت دهد. | |
onmousedown | این رویداد زمانی اتفاق می افتد که کاربر در محدوده عنصر مورد نظر کلیک کرده و نشانه گر ماوس را همچنان نگه دارد. | |
onmouseup | این رویداد زمانی اتفاق می افتد که نشانه گر ماوس از حالت کلیک خارج شود. | |
onmouseout | این رویداد زمانی اتفاق می افتد که نشانه گر ماوس از محدوده عنصر مورد نظر خارج شود (توصیه شده). | |
onmouseleave | این رویداد در حالتی اتفاق می افتد که نشانه گر ماوس از محدوده عنصر مورد نظر خارج شود، مشابه رویداد onmouseout با این تفاوت که این رویداد در محدوده بلاک فرزند (در صورت وجود) مجددا اجرا نمی شود. | |
onmousewheel | این رویداد در حالتی اتفاق می افتد که کاربر دکمه چرخان روی ماوس را حرکت دهد، حتی اگر اسکرول صفحه تغییر نکند (این رویداد جدیدتر است). | |
onwheel | این رویداد در حالتی اتفاق می افتد که کاربر دکمه چرخان روی ماوس را حرکت دهد، مشابه رویداد onmousewheel (این رویداد قدیمی تر است). | |
onselect | این رویداد در حالتی اتفاق می افتد که قسمتی از متن داخل فیلد input یا textarea را انتخاب (Highlight) کنیم. |
<style>
.select-area {
direction: rtl;
border: 1px solid #FC0;
height: 50px;
padding: 4px;
}
</style>
<script>
function setOnSelectAlert(event, id){
var elm = document.getElementById(id);
var selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
alert('متن انتخاب شده: ' + selection);
}
</script>
<textarea id="select-area" class="select-area" onselect="setOnSelectAlert(event, 'select-area')">
متن این کادر را انتخاب (Highlight) کنید.
</textarea>
|
onerror | این رویداد در حالتی کاربرد دارد که صفحه دچار خطای جاوا اسکریپتی بوده یا دسترسی به یک فایل ضروری ممکن نباشد، برای رویداد onerror سه آرگیومنت از پیش تعریف شده error, url, line قابل استفاده است. |
<script>
function setError(){
var elm = document.getElementById();
}
window.onerror = function(error, url, line) {
//controller.sendLog({acc: 'error', data: 'ERR:' + error + ' URL:' + url + ' L:' + line});
alert('خطایی رخ داده است:\n' + error + ' URL: ' + url + ' Line: ' + line);
};
</script>
<input type="button" name="button" value="ایجاد خطا" onclick="setError();">
|
onload | این رویداد در حالتی اتفاق می افتد که منبع مورد نظر (به طور مثال صفحه HTML، فایل، آبجکت XMLHttpRequest و...) به طور کامل بارگذاری می شود. |
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | بررسی رویداد onload و onbeforeunload در جاوا اسکریپت</title>
<!-- Webgoo.ir -->
<style>
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
direction: rtl;
line-height: 22px;
}
</style>
<script>
function setOnloadAlert(){
alert('صفحه وب به طور کامل بارگذاری شده است');
}
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = null;
});
</script>
</head>
<body onload="setOnloadAlert()">
<noscript>جاوا اسکریپت در مرورگر شما غیر فعال است!</noscript>
با بارگذاری کامل این صفحه رویداد onload که به تگ body نسبت داده شده اجرا و تابع متناظر فراخوانی می شود، برای تست رویداد onbeforeunload ابتدا متنی را در این صفحه انتخاب و سپس صفحه را ببندید یا رفرش کنید، پیامی مبنی بر تایید ماندن یا ترک پنجره نمایش داده می شود.
</body>
</html>
|
onbeforeunload | این رویداد در حالتی اتفاق می افتد که در حال بستن صفحه فعلی باشیم (به شرط ایجاد تغییرات یا فعل و انفعالاتی در صفحه). | |
oncontextmenu | این رویداد در حالتی اتفاق می افتد که در محدوده عنصر مورد نظر کلیک راست کنیم. |
|
oncopy | این رویداد در حالتی اتفاق می افتد که سعی داریم محتوایی را copy کنیم (رویداد آزمایشی و ممکن است دارای اشکالاتی باشد، بیشتر در مواردی مانند غیرفعال کردن امکان کپی متداول محتوا کاربرد دارد). |
- :رویداد اجرا شده <style>
.ccp-area {
direction: rtl;
border: 1px solid #FCC;
height: 50px;
padding: 4px;
}
</style>
<script>
function setOnCCPAlert(id, check){
var elm = document.getElementById(id);
switch(check){
case 1:
elm.innerHTML = 'oncopy';
break;
case 2:
elm.innerHTML = 'oncut';
break;
case 3:
elm.innerHTML = 'onpaste';
break;
}
}
</script>
<textarea class="ccp-area" oncopy="setOnCCPAlert('ccp-event', 1);" oncut="setOnCCPAlert('ccp-event', 2);" onpaste="setOnCCPAlert('ccp-event', 3);">
در اين کادر copy، cut و paste کنيد.
</textarea>
<br>
<span id="ccp-event"> - </span> :رويداد اجرا شده
|
oncut | این رویداد در حالتی اتفاق می افتد که محتوایی را در عنصر مورد نظر cut کنیم. | |
onpaste | این رویداد در حالتی اتفاق می افتد که محتوایی را در عنصر مورد نظر paste کنیم. | |
onreset | این رویداد در حالتی اتفاق می افتد که فرمی را reset کنیم. |
<form action="#" id="form">
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
<script>
var form = document.getElementById('form');
form.onreset = function(){
alert('فرم ريست شد');
}
form.onsubmit = function(){
alert('فرم در حال ارسال');
}
</script>
|
onsubmit | این رویداد در حالتی اتفاق می افتد که فرمی را ارسال کنیم. | |
onscroll | این رویداد در حالتی اتفاق می افتد که صفحه یا عنصری اسکرول شود. |
<style>
.scroll-area {
direction: rtl;
border: 1px solid #FCC;
height: 50px;
width: 250px;
padding: 4px;
}
</style>
<script>
function getOnScroll(id){
var elm = document.getElementById(id);
var colors = new Array('khaki', 'lightgreen', 'lightpink', 'lightsalmon', 'cornflowerblue');
var rand = getRandomInt(5);
elm.style.background = colors[rand];
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
</script>
<textarea id="scroll-area" class="scroll-area" onscroll="getOnScroll('scroll-area');">
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
در اين کادر اسکرول کنيد
</textarea>
|
© Webgoo.ir |