How to bind onClick or onMouseEnter event to three.js?

Question

Like their`s official example, we can use Raycaster to get current matched objects https://threejs.org/docs/?q=Raycaster#api/en/core/Raycaster.

The official example is:

const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();

function onPointerMove( event ) {

    // calculate pointer position in normalized device coordinates
    // (-1 to +1) for both components

    pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

    // update the picking ray with the camera and pointer position
    raycaster.setFromCamera( pointer, camera );

    // calculate objects intersecting the picking ray
    const intersects = raycaster.intersectObjects( scene.children );

    for ( let i = 0; i < intersects.length; i ++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 );

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'pointermove', onPointerMove );

window.requestAnimationFrame(render);

Accrodding to this example, in my understanding, I can just get intersects[i].object, which is a threejs Mesh class`s instance.

I want to bind onClick function to object3d like this way:

function createObject(id, position) {
  // ...
  const mesh = new Mesh()
  // ...
  mesh.onClick = () => handleClickFn(id, position);

  scene.add(mesh);
}

Then I can call intersects[i].object.onClick(); to trigger it.

Every examples I found seems like they do some operation to intersects[i].object directly. Just like intersects[ i ].object.material.color.set( 0xff0000 );.

So, is there any way I can bind functions to each intersects[i].object like this?