target and currentTarget

by Simon Boddy

HTML

<div id="ctr">
  <div v-for="(option,index) in options" 
    style="margin:10px;padding:10px;border:solid;border-radius:4px"
    @click="parent"
  >
    <input type="checkbox" :name="'invidiousChoice' + index" @click='child'> {{option.label}}
  </div>
  <input type="text" id="myInput" />
</div>

JavaScript

var vm = new Vue({
	el:"#ctr",
  data : {
  options:[{label:'terrible option'},{label:'disastorous option'}]
  },
  methods: {
    parent: function(event) {
    	//alert(document);
      let myEvent = new Event('change', { 'bubbles': true, 'cancelable': false });
      document.getElementById('myInput').dispatchEvent(myEvent);
      if(event.target == event.currentTarget)
      	alert( 'parent clicked');
    },
    child: function(){}
  }  
})
document.getElementById('ctr').addEventListener('change', function(event){alert(event)})