왜 오디오 이벤트가 BackboneJS로 실행되지 않고 다른 이벤트가 발생합니까?

Question

click 이벤트가 실행되는 이유는 알 수 있지만 timeupdate 이벤트는 발생하지 않습니다.

, 이벤트가 <audio>에서 발사하지, 내가 템플릿의 컨트롤을 표시하는 경우 그래도 난 플레이어를 클릭하면 ... click .audio 이벤트가 발생합니다 canplay, 재생, 일시 정지, timeupdate로했습니다.

var PlayerView = Backbone.View.extend({ 
    tagName : 'div', 

    template: _.template($('#player-template').html()), 

    initialize: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
    } 

    events: { 
     'timeupdate .audio': 'onTimeUpdate', 
     'click .btn_play': 'onClickPlay', 
     'click .btn_pause': 'onClickPause' 
    }, 

    onTimeUpdate: function() { 
     console.log('player ' + this.model.get('id') + ' : event = onTimeUpdate'); 
    }, 

    onClickPlay: function() { 
     console.log('player ' + this.model.get('id') + ' : event = onClickPlay'); 
    }, 

    onClickPause: function() { 
     console.log('player ' + this.model.get('id') + ' : event = onClickPause'); 
    }, 

}); 


$(function(){ 
    var model = new PlayerModel({'id' : 1}); 
    var view = new PlayerView({'model' : model}); 
    $("#players").append(view.el); 
}) 

템플릿 :

<script type="text/template" id="player-template"> 
    <div id="player<%= id %>" class="player"> 
     <audio class="audio"> 
      <source src="<%= track_url %>" type="audio/mp3" /> 
     </audio> 
     <div class="control"> 
      <button class="btn_play">Play</button> 
      <button class="btn_pause">Pause</button> 
     </div> 
    </div> 
</script> 

Answer 1

백본은 내부적으로 이벤트 객체와 binds the events by delegation 변환합니다. 이

events: { 
     'timeupdate .audio': 'onTimeUpdate', 
     'click .btn_play': 'onClickPlay' 
} 

이

this.$el.delegate('.audio','timeupdate', this.onTimeUpdate); 
this.$el.delegate('.btn_play','click', this.onClickPlay); 

로 끝나는 것을 의미하지만 함정이있다 :

효율성에 대한 이벤트 위임을 사용합니다. [...]이 옵션은 대리인 허용 이벤트 인 경우에만 작동하며 포커스가 없거나 흐리게 표시되지 않으며 변경되지 않고 제출되고 Internet Explorer에서 가 재설정됩니다.

그리고 오디오 이벤트가 대리인이 될 수없는 것으로 보입니다.

그러나, 직접 콜백을 설정하면 솔루션과 명확한 설명을위한

initialize: function() { 
    this.$el.html(this.template(this.model.toJSON())); 
    _.bindAll(this,'onTimeUpdate'); 
    this.$('.audio').on('timeupdate', this.onTimeUpdate); 
}