ES6: Bind Click or OnChange Event in string literal

es6 template strings html
convert string to template literal javascript
es6 string concatenation
string es6
javascript template example
javascript literal
typescript template strings
jquery template literals

Is there any way to bind click/onchange/event in es6 string literals.

Lets say I have on string literal:

function myTemplate() {
  let onClickHandler = function() { alert('Yes it works') }; 
  return `<button onclick="(onClickHandler)">Click Me</button>`;

I tried above and when check HTML is show me as:

<button onclick="(function () { [native code] })">Click Me</button>

On click is throws error as :

Uncaught SyntaxError: Unexpected identifier

Can somebody help how can we achieve this?

I think that's the better way for creating a DOM element:

(function myTemplate() {
  let onClickHandler = function() { alert('Yes it works') };  
  var button = document.createElement("BUTTON");
  button.onclick = onClickHandler;
  button.innerHTML = 'Click Me';
<div id="button"></div>

Literal Objects with onclick event handlers JavaScript, Literal Objects with onclick event handlers JavaScript refer to the originating context }.bind(this) // bind your object UserInterface or use es6 arrow function. Getting Literal With ES6 Template Strings. Strings in JavaScript have been historically limited, lacking the capabilities one might expect coming from languages like Python or Ruby. ES6 Template Strings (available in Chrome 41+), fundamentally change that.

you cant bind an event to a string. what you can do is add a function call to the string and then when you attach the element to the dom it will work.


the function will need to be on the global scope(window),

and you don`t need es6 syntax for that

function myTemplate() {
  window.onClickHandler = function() { alert('Yes it works') }; 
  return `<button onclick="onClickHandler()">Click Me</button>`;
document.body.innerHTML = myTemplate()

Getting Literal With ES6 Template Strings | Web, Let's change that. String Substitution. One of their first real benefits is string substitution. Substitution allows us to take any valid JavaScript expression (​including  ASP.NET Core Blazor event handling. 03/16/2020; 5 minutes to read; In this article. By Luke Latham and Daniel Roth. Razor components provide event handling features. For an HTML element attribute named @on{EVENT} (for example, @onclick) with a delegate-typed value, a Razor component treats the attribute's value as an event handler.

If you are completely stuck on needing an html string returned you could give it a timestamp based or UUID ID and add event listener to window that looks for that ID target

function myTemplate() {
  let id = `myButton_${}`;
  window.addEventListener('click', (evt)=> === id && console.log(;
  return `<button id="${id}">Click Me</button>`;

document.body.innerHTML = myTemplate();

Binding: Basics, The basics of data-binding with Aurelia. You'll learn how to bind to HTML attributes, DOM Events and element content. You'll properties are updated, and the those properties will also be updated whenever the inputs change. Unsupported string literals include '\x61' (2-point hex escape), '\u{61}' or '\u{​000061}' (n-point  Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification. Template literals are enclosed by the back-tick (` `) ( grave accent) character instead of double or single quotes.

HTMLElement: change event, The change event is fired for input, select, and textarea elements when by selecting a value from a <select> 's dropdown with a mouse click,  Handling Events. Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

this, ES5 introduced the bind() method to set the value of a function's this object as if by new Number(7) and the string 'foo' to an object as if by new String('foo') , e.g. getElementsByTagName('*'); // Add bluify as a click listener so when the // element is clicked on, it turns blue for <button onclick="alert(this. Here’s the list of the top 10 best ES6 features for a busy software engineer (in no particular order): Default Parameters in ES6. Template Literals in ES6. Multi-line Strings in ES6. Destructuring Assignment in ES6. Enhanced Object Literals in ES6. Arrow Functions in ES6. Promises in ES6. Block-Scoped Constructs Let and Const.

Problem with event subscription when not using fat arrow syntax (lit , Version: lit-html@0.6.0-pre.3 - lit-extended If I subscribe to an event like this React had auto bind when using createClass but removed it due to the preferred ES6 format. doStuff(); } render() { return html`<button on-click=${this. And then instead of using the html tagged template literal function, you  The problem comes once the component in unmounted. Because bind always returns a new function, simply calling MyFluxStore.removeListener will not work because this.onChange.bind(this) != this.onChange.bind(this). The event handler will remain on the store, leaking the listener and memory.

  • Its probably better to return a new Element instead of a string.
  • Short answer is ... No
  • Returning element looks good idea but i am looking for string literal should get bind to some event
  • @PankajBadukale but onclick gets called in different context. Can't bind anything to a string which is what template literal returns
  • @charlietfl Ok. So can we able to bind it right context or somehow it should get fire. Like we use call, apply, bind for context passing we think of it later If we able to fire atleast click and function get invoke in any context that also OK
  • I don't think this is ES6 string literals
  • @PankajBadukale Why do you think you need a string literal?
  • But he needs jQuery for that.
  • @amitWangner this will work of course but does really we expose our every javascript function to global scope(window) And we dont need jquery for this. I dont understand why you have added it.
  • @PankajBadukale that's your only choice using string html and onclick. Stop using onclick and use more modern unobtrusive event listeners and you don't have that problem
  • @alexP Not really... the button onclick has nothing to do with jQuery
  • @PankajBadukale because you build the element from the body and not with JavaScript then you cant put the function reference . so the object reference will be the window