Is it possible to retrieve the html field that triggers an event within its corresponding event handler in JavaScript using event.target?
In my scenario, I have a form with:
- an input element linked to a function on the change event
- a function responsible for handling the change event
The code snippet looks like this:
var Main = {
methods: {
change(par) {
console.log("The value is: " + par);
//HERE I can't get "event.target"
}
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d0d9d0d8d0dbc198c0dcf5849b819b8598d7d0c1d49b84">[email protected]</a>/lib/index.js"></script>
<div id="app">
<template>
<el-input @change="change" placeholder="Input something here"/>
</template>
</div>While I am aware that I could call different functions and determine the relative input, I prefer to use a common function.
Upon inspecting the stacktrace, I noticed the following code in element-ui.common.js where the event is triggered:
handleChange: function handleChange(event) {
this.$emit('change', event.target.value);
},
In this snippet, the element only passes the value to the event handler. Is there any way to access the event.target? Any suggestions are greatly appreciated!
Thank you