dc.js - How to handle mouseout event on DC range graph -

i using dc chart range filter. want handle mouse out event on range filter, can handle filter on mouse-out. had used filter , post-redraw when use there multiple time event fire on single drag on range chart. need last change event , think mouse out or mouse event helpful. can 1 me how use mouse up/mouse out event on range chart?

chart.on('postrender', function() {   chart.select('.brush').on("mouseover", function() {     console.log('mouseover');           });   chart.select('.brush').on("mouseout", function() {     console.log('mouseout');   });   chart.select('.brush').on("mouseup", function() {     console.log('mouseup')   });   chart.select('.brush').on("click", function() {     console.log('click')   }); }); 

working snippet below:

var data = [{    date: "2011-11-21",    total: 90  }, {    date: "2011-11-22",    total: 90  }, {    date: "2011-11-23",    total: 90  }, {    date: "2011-11-24",    total: 200  }, {    date: "2011-11-25",    total: 200  }];  var cf = crossfilter(data);    var timedimension = cf.dimension(function(d) {    return new date(d.date);  });  var totalgroup = timedimension.group().reducesum(function(d) {    return d.total;  });    var chart = dc.linechart("#chart")    .width(400)    .height(200)    .x(d3.time.scale().domain(d3.extent(data, function(d) {      return new date(d.date);    })))    .dimension(timedimension)    .group(totalgroup)    .renderarea(true)    .brushon(true);  chart.xaxis().ticks(4);    function caught(eventname) {    document.getelementbyid(eventname).classname = 'bold';    settimeout(function() {      document.getelementbyid(eventname).classname = '';    }, 750);  }    chart.on('postrender', function() {    chart.select('.brush').on("mouseover", function() {      console.log('mouseover');      caught('mouseover');    });    chart.select('.brush').on("mouseout", function() {      console.log('mouseout');      caught('mouseout');    });    chart.select('.brush').on("mouseup", function() {      console.log('mouseup')      caught('mouseup');;    });    chart.select('.brush').on("click", function() {      console.log('click')      caught('click');;    });  });    chart.render();

<link href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.css" rel="stylesheet" />  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>  <style>    .bold {      font-weight: bold;    }  </style>  <div id="chart"></div>  <div id="mouseout">mouseout</div>  <div id="mouseover">mouseover</div>  <div id="mouseup">mouseup</div>  <div id="click">click</div>