無法將事件偵聽器附加到在froala富文本編輯器中呈現的元素

Question

我正嘗試向使用froala編輯器反應組件呈現的元素註冊一些事件偵聽器。按照文檔中的建議，我正在將froala config中的'潛在'事件監聽器傳遞給它。

這裏是我想實現

events : { 
     'froalaEditor.initialized': function(e, editor) { 
      var elements = document.getElementsByClassName('some-class-id-that-i-know-exists'); 
      for (var i=0; i< elements.length ; i++) { 
       elements[i].addEventListener('mouseover', eventListnerSubscriber(elements[i]), true); 
      } 
     } 
    } 

// outside config 
function eventListnerSubscriber(element) { 
     console.log(element); 
} 

這裏事件發生時鼠標懸停回調方法「eventListnerSubscriber」是沒有得到調用。

我做錯了什麼？

Answer 1

很可能你做錯了什麼。這是我如何測試它和正常工作：

// Render Froala Editor component. 
class EditorComponent extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     content: '<div class="foo">asdasdasd</div>' 
    }; 

    this.config = { 
     events : { 
     'froalaEditor.initialized': function(e, editor) { 
      var elements = document.getElementsByClassName('foo'); 
      for (var i=0; i< elements.length ; i++) { 
      elements[i].addEventListener('mouseover', function() { 
       console.log ('foo') 
      }, true); 
      } 
     } 
     } 
    } 

    this.handleModelChange = this.handleModelChange.bind(this); 
    } 

    handleModelChange (model) { 
    this.setState({ 
     content: model 
    }); 
    } 

    render() { 
    return(
     <div className="sample"> 
     <h2>Full Featured</h2> 
     <FroalaEditor 
      model={this.state.content} 
      onModelChange={this.handleModelChange} 
      config={this.config} 
     /> 
     <h4>Rendered Content:</h4> 
     <FroalaEditorView 
      model={this.state.content} 
     /> 
     </div> 
    ); 
    } 

} 

ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));