The purpose of the event should be tied, but instead

Question

I am working on a script dialog in Vanilla JS. I am having a problem with a click event on a video image. Even a coarse image is surrounded by a binding label that displays the image as event.target in the trigger-dialog-open event.

Here is the HMTL:

<a class="trigger-dialog--open thumbnail" data-dialog-id="dialog-video" href="javascript:;">
    <figure>
        <img src="http://i.ytimg.com/vi/id/sddefault.jpg" alt="" />
    </figure>
</a>

And this event in JS:

var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < openTriggers.length; i++) {
    openTriggers[i].addEventListener("click", function (event) {
        this.openDialog(event.target.getAttribute('data-dialog-id'));
    }.bind(this), false);
}

The event handler wants to know the dialog identifier from the data attribute of the bindings. It cannot be found, because it considers the image to be event.target, not the actual anchor. How can i fix this? Thanks!

Answer 1

event.currentTarget. , event.target img, , . . event.currentTarget , .

( this , this , .)

Answer 2

: var openTriggers, ? , , , , . :

var aThing = {
   openTriggers: document.getElementsByClassName('trigger-dialog--open'),
   openModal: null,
   openDialog: function(clickedThingAttr){  
     if(this.openModal !== null){ 
        this.openModal.style.display = 'none';
     }else{ 
        this.openModal = document.getElementById(clickedThingAttr);
     }
     this.openModal = document.getElementById(clickedThingAttr);
     this.openModal.style.display = 'block';
   },
   setEventListenersNStuff: function(){
     for (var i = 0, n = this.openTriggers.length;i < n; i++) {
         this.openTriggers[i].addEventListener("click", function (event) {
            this.openDialog(event.target.getAttribute('data-dialog-id'));
         });
       };
    }

   };//end of aThing hash object
   aThing.setEventListenersNStuff();

:  1. .bind. , jQuery, , . 2. , - , , . 3. , , .trigger-dialog - open , , ? , , , , 10 .

: var = 0, n = openTriggers.length; < ; ++, , , , , , , < openTriggers.length N . ( ).

, , , var openTriggers , . querySelectorAll , jQuery $('. Thing').

anyhoo,

var openTriggers = document.querySelectorAll('.trigger-dialog--open');
var n = openTriggers.length;
function openDialog(ddId){ 
  for (var i = 0;i < n; i++) {
    openTriggers[i].style.display = 'none';

  };
  document.getElementById(ddId).style.display = 'block';
};
for (var i = 0;i < n; i++) {
    openTriggers[i].addEventListener("click", function (event) {
       openDialog(event.target.getAttribute('data-dialog-id'));
   });
}

}

, , , , DOM. , if if.openModal.id === clickedThingAttr, , , .

, , JS, jQuery: http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

.

Answer 3

var openTriggers = document.getElementsByClassName('trigger-dialog--open');
for (var i = 0; i < this.openTriggers.length; i++) {
    (function(element) {
        element.addEventListener("click", function (event) {
            element.openDialog(event.target.getAttribute('data-dialog-id'));
        }, false)
    })(openTriggers[i]);
}