How to return variable value from jQuery event function?

jQuery Web Development Front End Technology

You cannot return variable value from jQuery event function. To understand the reason, let us see how data is passed, which was created in the event handler of a button click.

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var a=document.getElementById('demo');
    a.addEventListener('click', function(){
       var s='Hello World!';
       var event = new CustomEvent('build', { 'detail': s });
       this.dispatchEvent(event);
     })

    document.getElementById('parent').addEventListener('build', getData, true);

    function getData(e){
       alert(e.detail);
    }
});
</script>
</head>
<body>

<div id='parent'>
<button id='demo'>Click me</button>
</div>

</body>
</html>