onmouseover to change Function Name?

Question

Is there a way to change the function name in JavaScript when using onmouseover?

In the HTML DOM we have something like this:

<img class="..." src="..." alt="..." onclick="click1()"> onmouseover="changeFunction()">

In JavaScript:

function changeFunction() {....}

function onclick1() {...}

The event that I want to trigger is something like this:

When the mouse is hovered over an Image, this would trigger the 'onmouseover' function which changes the "onclick function name" that would change the name from "function click1() {...}" to " function click2(){...}.

*hovers over image* and triggers the Name change

function click1() is changed to function click2()

This would still retain the other codes inside of it. All it does is change the name of the function.

Answer 1

This should do what you want:

<script>
  function click1() {
    console.log('click 1');
  }
  function click2() {
    console.log('click 2');
  }
  function changeFunction(element) {
    element.onclick = click2;
  }
</script>

<img src="https://via.placeholder.com/350x65" onclick="click1()" onmouseover="changeFunction(this)">

When you mouse over the image, it will change the onclick function from click1 to click2.