title: addEventListener on refs in react showing strange behaviour
body: <p>I have created 2 components in a parent child relation.
  The first component is using refs and in componentDidMount I added a click event listener on the DOM node,
  in the child component also I added a onclick listener but this time using the props on the DOM element.</p>
  <p>But now when I click the child component the event listener of the parent component is getting invoked, and if I add the onClick on parent component using the props instead of refs everything works fine.</p>
  <p>So, can anybody tell me why this behaviour is shown when we add event listener using the refs.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class SecondDiv extends React.Component {
    
    divClicked = (event) =&gt; {
      event.stopPropagation();
      console.log('Second Div clicked');
    }
    
    render() {
      return &lt;div className="Div2" onClick={this.divClicked} &gt;
        This is second div
      &lt;/div&gt;
    }
  }
  
  class MovieItem extends React.Component {
  
     constructor(props) {
       super(props);
       this.node = React.createRef();
     }
    
    componentDidMount() {
      this.node.current.addEventListener('click', this.divClicked);
    }
  
    componentWillUnmount() {
      this.node.current.removeEventListener('click', this.divClicked);
    }
    
    divClicked = (event) =&gt; {
      event.stopPropagation();
      console.log('First div clicked');
    }
  
    render() {
      // 1st approach
      return &lt;div ref={this.node} className="Div1" &gt;
        &lt;p&gt;This is Div 1&lt;/p&gt;
        &lt;SecondDiv /&gt;
      &lt;/div&gt;
      
      // 2nd approach
      // return &lt;div ref={this.node} className="Div1" onClick={this.divClicked} &gt;
      //   &lt;p&gt;This is Div 1&lt;/p&gt;
      //   &lt;SecondDiv /&gt;
      // &lt;/div&gt;
    }
  
  }
  
  ReactDOM.render(&lt;MovieItem /&gt;, document.getElementById("app"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://codepen.io/nikunjAg/pen/QWdjZgv" rel="nofollow noreferrer">Also on CodePen</a></p>