What is the difference between HTML and React event handling?

FOLASAYO SAMUEL OLAYEMI - Nov 28 '22 - - Dev Community

HTML

In HTML, the attribute name is in all lowercase and is given a string invoking a function defined somewhere:

<button onclick="handleClick()"></button>
Enter fullscreen mode Exit fullscreen mode

ReactJs

In React, the attribute name is camelCase and are passed the function reference inside curly braces:

<button onClick={handleClick} />
Enter fullscreen mode Exit fullscreen mode

Note: In HTML, false can be returned to prevent default behavior, whereas in React preventDefault has to be called explicitly.

Code Sample

HTML

<a href="#" onclick="console.log('The link was clicked.'); return false" />
Enter fullscreen mode Exit fullscreen mode

ReactJs

function handleClick(e) {
  e.preventDefault()
  console.log("The link was clicked.")
}

Enter fullscreen mode Exit fullscreen mode

Also note that, HTML uses lowercase, React uses camelCase.

Thanks for reading...

Happy Coding!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .