English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. موقع
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

الحدث اليومي في JavaScript

في الواقع، تم كتابة هذا المقال منذ فترة طويلة، ولكن بسبب مشكلة حفظ sf، لم أتمكن من حفظ الكثير من النصوص، وأنا أعتقد أن عدم إكمال هذا النص هو عيب كبير، اليوم لدي بعض الوقت، لذا سأكمل هذا، وهو أيضًا جزء من مراجعة تعلمي لـ javascript.　

في هذا السياق، نناقش فقط الحدث المتعلق بـ js -　

معالج الحدث　

في DOM تم تعريف بعض الحدث، وأي وظيفة تستجيب للحدث تسمى معالج الحدث (أو مستمع الحدث). اسم معالج الحدث عادة يبدأ بـ "on"، مثل: onclick إلخ　

تسرب الحدث والوقيف　

نسيج الحدث يشير إلى ترتيب استقبال الحدث في الصفحة، IE، Firefox و Chrome متصفحات جميعها تسرب الحدث، مما يعني أن الحدث يبدأ بقبوله عنصر أكثر تفصيلاً، ثم ينتشر تدريجياً إلى العقد الأقل تفصيلاً. بينما يكون التوقيف عكس ذلك، تم اقتراح التوقيف من قبل Netscape، ويمكن رؤية تسرب الحدث والوقيف في الشكل التالي:

　

على الرغم من أن التوقيف هو نموذج نسيج الحدث الوحيد المدعوم من Netscape، إلا أن IE9، Firefox و Google يدعمون هذا نموذج نسيج الحدث أيضًا.　

فوائد تسرب الحدث　

لأن الحدث يمتلك ميكانيكية التسرب، لذا يمكننا استخدام مبدأ التسرب، لإضافة الحدث إلى المستوى الأعلى، وتحفيز التنفيذ. الفوائد الطبيعية لذلك بالطبع هي تحسين الأداء،

 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var aUl = document.getElementsById("bubble");
  var aLi = aUl.getElementsByTagName("li");
  for(var i = 0;i<aLi.length;i++){
  aLi[i].onmouseover = function () {
   this.style.backgroundColor = "blue";
  ;
  ali[i].onmouseout = function () {
   this.style.backgroundColor = "";
  }
  }
 ;
 </script>
</head>
<body>
<div>
 <ul id = "bubble">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>
</body>

بهذه الطريقة يمكننا إضافة أحداث فأرة إلى عناصر li. ولكن إذا كان لدينا العديد من عناصر li، فإن استخدام حلقة for قد يؤثر على الأداء.　

يمكننا الآن استخدام تقنية تفويض الحدث لتحقيق هذا التأثير. لا يتغير html:

 <script type="text/javascript">
 window.onload = function () {
 var aUl = document.getElementsById("bubble");
 var aLi = aUl.getElementsByTagName("li");
 // في أي حدث، إذا كان العنصر الذي تعمل عليه هو مصدر الحدث.
 // إنترنت إكسبلورر: window.event.srcElement
 // استاندارد: event.target
 aUl.onmouseover = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() == "li"){
  target.style.background = "blue";
  }
 ;
 aUl.onmouseout = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;
  if(target.nodeName.toLowerCase() = "li"){
  target.style.background = "";
  }
 }
 ;
</script>

كيف يمكن إيقاف تسرع الحدث؟ انظر إلى مثال أدناه:

 <div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//بعد منع تمرير الحدث، إذا قمت بالنقر على الصندوق الرمادي، سيتم عرض نافذة الحوار مرة واحدة فقط في العملية بأكملها (انظر إلى الحالة الافتراضية)
function showMsg(obj,e)
{
 alert(obj.id);
 stopBubble(e)
}
//وظيفة منع تمرير الحدث
function stopBubble(e)
{
 if (e && e.stopPropagation)
 e.stopPropagation()
 else
 window.event.cancelBubble=true
}
</script>

انقر على الرسومات التوضيحية الخارجية السوداء:

　

معالج الحدث في DOM 0　

يتم تحديد معالج الحدث باستخدام js عادةً بتعيين دالة استدعاء الحدث لهذه الخاصية المعالج. لكل عنصر خاصية معالج خاصة به (بأحرف صغيرة، مثل onclick)

 btn.onclick = function(){
 console.log('hello');
;

معالج الحدث المحدد باستخدام DOM 0 يعتبر جزءًا من طريقة العنصر. لذا، يشير this إلى العنصر الحالي:

 var btn = document.getElementById('myDiv');
//سيكون لدى الحدث الذي يتم تفعيله على DOM نقطة إحداث
btn.onclick = function (event) {
 alert(this.id); //myDiv 
;

DOM level 1

تمركز DOM level 1 على نموذج مستندات HTML و XML. يحتوي على وظائف التصفح ومعالجة المستند.　

صار DOM level 1 معيارًا مقترحًا من W3C في 1 أكتوبر 1998.　

النسخة الثانية من المسودة العملية كانت في 29 سبتمبر 2000.　

من المميز ذكر أن DOM level 0 ليس بروتوكول W3C. بل هو تعريف للوظائف المماثلة في Netscape Navigator 3.0 و IE 3.0 فقط.　

معالج الحدث في DOM 2　

تم تعريف طريقتين في DOM 2 لتحديد وإزالة معالجي الحدث: addEventListener() و removeEventListener()، كلاهما يأخذ ثلاثة معلمات:

1. اسم الحدث. مثل click في المثال السابق
2. الدالة كمعالج الحدث.
3. القيم الحقيقية (true تعني استدعاء مبرمج معالجة الحدث في مرحلة الاستقبال، false تعني مرحلة التدفق)

من خلال استخدام طريقة addEventListener لـ Element، يمكنك أيضًا تعريف دالة استدعاء الحدث.

 //element.addEventListener(event, function, useCapture)
var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
 console.log(this.id);
},false);

IE中的事件处理程序　

IE9之前的IE浏览器不支持addEventListener()和removeEventListener()()　

与其他浏览器不同，IE使用的是attachEvent()和detachEvent()方法来为DOM添加事件处理程序，由于IE8及更早版本只支持事件冒泡，所以他们只接受两个参数：
1、事件处理程序名称（前面要加on）
2、事件处理程序函数
使用attachEvent()添加的事件处理程序如下：

 var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
 console.log(this.id);
});

值得注意的是，在使用attachEvent()方法的情况下，事件处理程序将在全局作用域中运行，因此此时this等于window　

事件对象
　
在触发DOM上的某个事件时，会产生一个事件对象event，此对象包含所有与事件相关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。event对象会被作为第一个参数传递给事件监听的回调函数。我们可以通过此event对象来获取大量当前事件相关的信息：
　type (String) —事件的名称
target (node) —事件起源的DOM节点
currentTarget?(node) —当前回调函数被触发的DOM节点（稍后将会做比较详细的介绍）
bubbles (boolean) —指明此事件是否是一个冒泡事件（稍后将会解释）
preventDefault(function) —此方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。例如阻止<a>元素的click事件加载一个新的页面
cancelable (boolean) —此变量指明此事件的默认行为是否可以通过调用event.preventDefault来阻止。
stopPropagation (function) —取消了事件的进一步捕获或冒泡，当bubbles为true时使用此方法
eventPhase: يعود رقمًا يمثل المرحلة الحالية للحادث، 0 للبدء في إيصال الحادث من السطح الخارجي إلى العنصر الهدف، 1 للمرحلة القبض، 2 عند وصول الحادث إلى العنصر الهدف، 3 أثناء تمرير الحادث.

إضافة إلى ذلك، قد يكون لدى كائن الحدث العديد من الخصائص الأخرى، ولكنها موجهة نحو هذا الحدث المحدد. على سبيل المثال، تحدث الحوادث الماوس وتحتوي على خصائص clientX وclientY لتحديد موقع الماوس في الشاشة الحالية.　

إضافة إلى ذلك، يمكن استخدام stopPropagation() لوقف تمرير الحدث عبر DOM فورًا، مما يلغي التدفق المستقبلي للحبسة أو الاستقبال.

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 alert("clicked");
 event.stopPropagation();
;
// لتجنب إطلاق معالج الحدث على document.body
document.body.onclick = function (event) {
 alert("Body clicked"); 
;

يكون كائن الحدث موجودًا فقط أثناء تنفيذ معالج الحدث، ويتم تدميره تلقائيًا بعد انتهاء تنفيذ معالج الحدث.　

كائن الحدث في IE　

عند إضافة معالج الحدث في مستوى DOM 0، يكون كائن الحدث موجودًا كخصيصة لـ window object:

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 var event = window.event;
 alert(event.type); //click
;

كائن الحدث event في IE يحتوي أيضًا على الخصائص والأدوات المتعلقة بالحدث الذي تم إنشاؤه.
cancleBubble: الحق والخطأ - القيمة الافتراضية هي false، ولكن يمكن تعيينها إلى true لتلغية تفاعل الحدث، متطابق مع stopPropagation() في dom.
returnValue: الحق والخطأ - القيمة الافتراضية هي true، ولكن يمكن تعيينها إلى false لتلغية سلوك الحدث الافتراضي، متطابق مع defaultdict() في dom.
srcElement: العنصر - الهدف للحادث، متطابق مع خاصية target في dom.
type: النوع الكسري - نوع الحدث المطلق.

حدث click　

بعد أن يتم الضغط، سيحتوي كائن الحدث على الخصائص التالية.
　pageX،pageY: النقطة التي يتم الضغط عليها بالنسبة للاصبع في العنصر html بالأرقام البكسلية.
clientX،clientY: النقطة التي يتم الضغط عليها بالنسبة للمنظور (viewport) بالأرقام البكسلية.
screenX،screenY: تكمن في تكامل النقطة عند الضغط مقارنة بشاشة الجهاز، وحدة القياس هي بكسل معتمد على معالج الجهاز

clientX،clientY　

الشكل: clientX وclientY، قيمتهما تمثلان التكامل الأفقي والعمودي لمؤشر الماوس عند حدوث الحدث في النافذة (لا تشمل منطقة الشريط التدول)

مسافة العنصر

يمكن الحصول على مسافة العنصر باستخدام هذه الخاصيات الأربعة:

　　 （1）offsetHeight: حجم العنصر في الاتجاه العمودي، في البكسلات. يشمل الارتفاع، ارتفاع الشريط التدول الظاهر، الارتفاع الحواف العلوية والسفلية.

　　 （2）offsetWidth: حجم العنصر في الاتجاه الأفقي، في البكسلات. يشمل العرض، عرض الشريط التدول الظاهر، عرض الحواف اليسرى واليمنى.

　　 （3）offsetLeft: المسافة البكسلية بين الظل الخارجي للعنصر والظل الداخلي للعنصر الذي يحتوي عليه.

　　 （4）offsetTop: المسافة البكسلية بين الظل الخارجي للعنصر والظل الداخلي للعنصر الذي يحتوي عليه.

pageX،pageY　

هاتان الخاصيتان تعبران عن موقع مؤشر الماوس في الصفحة، عند عدم وجود تدول في الصفحة، تكون قيم pageX و pageY متساوية مع قيم clientX و clientY　

حجم التدول　

حجم التدول، هو حجم العنصر الذي يحتوي على محتوى يمكن تدوله.

　　　 هذه الخاصيات الأربعة تُعرف كخصائص حجم التدول:

　　 （1）scrollHeight: طول المحتوى الإجمالي للعنصر بدون شريط التدول.

　　 （2）scrollWidth: عرض المحتوى الإجمالي للعنصر بدون شريط التدول.

　　 （3）scrollLeft: عدد البكسلات المخفية في منطقة المحتوى اليسرى. يمكن تغيير موقع العنصر باستخدام هذه الخاصية.

　　 （4）scrollTop: عدد البكسلات المخفية في منطقة المحتوى العلوية. يمكن تغيير موقع العنصر باستخدام هذه الخاصية.

أحداث التركيز　

تتم تفعيل أحداث التركيز عند الحصول أو فقدان العنصر للتركيز، ويوجد 4 أحداث تركيز هي:
　1.blur: يتم تفعيل هذا الحدث عند فقدان العنصر للتركيز، ولا يتم انتشاره.
　2.focus: يتم تفعيل هذا الحدث عند الحصول على العنصر للتركيز، ولا يتم انتشاره.
　3.focusin: يتم تفعيل هذا الحدث عند الحصول على العنصر للتركيز، ويتم انتشاره.
　4.focusout: يتم تفعيل هذا الحدث عند فقدان العنصر للتركيز، ويتم انتشاره.　

أحداث الماوس　

أحداث الماوس المحددة في مستوى DOM 3 تتكون من 9 أحداث:
　click: يتم تفعيل هذا الحدث عند ضغط زر الماوس الرئيسي عادة ما يكون الماوس الأيسر أو ضغط زر Enter.

dbclick: يتم تفعيل هذا الحدث عند ضرب الماوس مرتين.

mousedown: يتم تفعيل هذا الحدث عند ضغط أي مفتاح على الماوس، ولا يمكن تفعيل هذا الحدث من خلال لوحة المفاتيح.

mousemove: عندما يتحرك الماوس حول عنصر ما يتم إعادة تفعيل هذا الحدث، ولا يمكن تفعيل هذا الحدث من خلال أحداث لوحة المفاتيح.

mouseout: يتم إطلاق هذا الحدث عند مغادرة الماوس العنصر، ولا يمكن إطلاقه عن طريق لوحة المفاتيح.

mouseover: يتم إطلاق هذا الحدث عند دخول الماوس إلى العنصر، ولا يمكن إطلاقه عن طريق لوحة المفاتيح.

　mouseenter: يشبه "mouseover"، لكنه لا يتم تبادله، ولا يتم إطلاقه عند تحريك المؤشر إلى العناصر الفرعية.

mouseleave: يشبه "mouseout"، لكنه لا يتم تبادله. لا يتم إطلاقه عند العنصر.

mouseup: يتم إطلاق هذا الحدث عند تحرير مفتاح الماوس، ولا يمكن إطلاقه عن طريق لوحة المفاتيح.

يتم تمرير معرفات الأحداث إلى معالج أحداث الماوس، وتحتوي على خصائص clientX وclientY، وتحدد موقف المؤشر بشكل مطلق بالنسبة للنافذة التي تحتوي على العنصر. بإضافة تحريك النافذة، يمكن تحويل موقف المؤشر إلى موقف في المستند.
يتم تمرير معرفات الأحداث إلى معالج أحداث الماوس، وتحتوي على خصائص clientX وclientY، وتحدد موقف المؤشر بشكل مطلق بالنسبة للنافذة التي تحتوي على العنصر. بإضافة تحريك النافذة، يمكن تحويل موقف المؤشر إلى موقف في المستند.

أحداث السحب　

حدث drag (1)
　حدث drag يتم إطلاقه أثناء سحب العنصر.
حدث dragstart، dragend (2)
　حدث dragstart يتم إطلاقه عند بدء سحب العنصر باستخدام الماوس، ويتم إطلاق حدث dragend عند إنهاء السحب.
حدث dragenter، dragleave (3)
　حدث dragenter يتم إطلاقه عند سحب العنصر المصدر إلى العنصر الهدف، ويتم إطلاق أحداث dragleave عند مغادرة العنصر المصدر العنصر الهدف.
حدث dragover (4)
　حدث dragover يتم إطلاقه عند سحب العنصر المصدر فوق العنصر الآخر، في العنصر الآخر.
الحدث drop (5)

　عندما يتم سحب العنصر المصدر إلى أعلى العنصر الهدف، ويتم تحرير الماوس عند هذا العنصر، يتم إطلاق أحداث drop في العنصر الهدف.

هذا هو نهاية محتوى المقالة، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أيضًا أن تشجعوا موقع呐喊 التعليمي.

تعليميات الأساس
توصيات لك