تحديد موقع العقدة مع eventListener في طريقة كائن JavaScript

Question

في البرنامج الذي أكتب ، أحتاج إلى أن أكون قادرًا على الوصول إلى العقدة التي ترسل حدثًا في JavaScript.

لقد لم تنجح في استخدام this, ، كما يشير إلى الكائن في الكود الخاص بي. لذا فإن ما يلي لا يعمل.

var node = new node();

// Node Object
function node() {

// Create Sibling Node
this.createSibling = function() {
 var node = createNode();
 this.parentNode.appendChild(node); } }

عندما أسمي الوظيفة createNode() يقوم بتجميع رابط يحتوي على حدث onclcick متصل بها تسمى node.createSibling() و node.createChild() على رابط مختلف.

أنا أستخدم حاليًا var NODETREE بصفتي الوالد لأنني لا أعرف كيفية الحصول على العقدة التي يتم النقر عليها. هذا يمنعني من أن أكون قادرًا على إنشاء عقدة مع أطفالهم وإخوتهم ؛ فقط العقدة الرئيسية يمكنها الحصول عليها.

    var node = new node();

   // Node Object
   function node() {

   // Instance Veriables    
   var NODETREE = document.getElementById('node-tree');

   // Create Sibling Node
   this.createSibling = function() {
   var node = createNode();
   NODETREE.appendChild(node); } }

كيف يمكنني الوصول إلى العقدة التي تحتوي على onclcick تم إرفاق الحدث الذي يتم النقر عليه ، دون الحاجة إلى إنشاء حمولة من التعليمات البرمجية ، حتى أتمكن من إنشاء أطفال وأشقاء للعقد التي قمت بإنشائها وليس فقط الجذع؟

ملاحظة:

ولست بحاجة للقيام بذلك بدون jQuery أو إطار آخر.

Answer 1

عندما يكون عنصر الحدث ، يتم تمرير كائن الحدث إلى معالج الأحداث. يحتوي كائن الحدث هذا على أشياء أخرى إشارة إلى العقدة التي أثارت الحدث.

لذا...

var createSibling = function(_event){
  var e = this; // the element this function is actually attached to
  var event_e = _event.target; //another way to get at the element clicked

  // do stuff
};

document.getElementById('myElement').onClick = createSibling;
document.getElementById('myElement').captureEvents(Event.CLICK);

المشكلة هي أن أسماء الممتلكات لأشياء مختلفة تختلف متصفحًا متقاطعًا - هذا هو الرنين الآخر لاستخدام إطار لأنها ستنفذ تطبيقات محددة لاكتشاف المستعرض والتي ستحتاج إلى القيام بها إذا لم تستخدم واحدة.

راجع Quirksmode.org للحصول على بعض التفاصيل المتقدمة: http://www.quirksmode.org/js/introevents.html