مثال
تنفيذ جافا سكريبت عندما يتم النقر على زر:
<button onclick="myFunction()">Click me</button>
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
يحدث الحدث onClick عندما ينقر المستخدم على عنصر.
دعم المتصفح
| هدف | |||||
|---|---|---|---|---|---|
| onclick | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
بناء الجملة
في HTML:
في جافا سكريبت:
object .onclick=function(){ انها محاولة لنفسك » في جافا سكريبت، وذلك باستخدام addEventListener() الأسلوب:
object .addEventListener("click", myScript );
انها محاولة لنفسك » ملاحظة: addEventListener() لا يتم اعتماد طريقة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
| فقاعات: | نعم فعلا |
|---|---|
| للإلغاء: | نعم فعلا |
| نوع الحدث: | MouseEvent |
| علامات HTML المعتمدة: | جميع عناصر HTML، باستثناء: <قاعدة>، <BDO> و <br>، <head>، <HTML>، <IFRAME>، <meta>، <المعلمة>، <script>، <نمط>، و <title> |
| صفحة DOM: | مستوى 2 الفعاليات |
مزيد من الأمثلة
مثال
انقر على <button> عنصر لعرض اليوم الحالي والتاريخ والوقت:
<button onclick="getElementById('demo').innerHTML=Date()">What
is the time?</button>
انها محاولة لنفسك » مثال
انقر على <p> عنصر لتغيير لون النص لالحمراء:
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
<script>
function myFunction() {
document.getElementById("demo").style.color = "red";
}
</script>
انها محاولة لنفسك » مثال
مثال آخر على كيفية تغيير لون <p> عنصر عن طريق النقر عليه:
<p id="demo" onclick="myFunction(this, 'red')">Click me to change my text
color.</p>
<script>
function myFunction(elmnt,clr) {
elmnt.style.color = clr;
}
</script>
انها محاولة لنفسك » مثال
انقر على زر لنسخ بعض النصوص من حقل الإدخال إلى حقل الإدخال آخر:
<button onclick="myFunction()">Copy Text</button>
<script>
function myFunction() {
document.getElementById("field2").value =
document.getElementById("field1").value;
}
</script>
انها محاولة لنفسك » مثال
تعيين "onclick" الحدث لكائن الإطار:
window.onclick = myFunction;
// If the user clicks in the window, set
the background color of <body> to yellow
function myFunction() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
انها محاولة لنفسك » مثال
استخدام عند _ النقر لإنشاء زر القائمة المنسدلة:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
انها محاولة لنفسك » صفحات ذات صلة
HTML DOM المرجع الحدث ondblclick
HTML DOM المرجع الحدث عند_ضغط_الماوس
HTML DOM المرجع الحدث onmouseup
<كائن الحدث