Observables form Events

Learning Observables

by Suman Kumar

HTML

<div class="container">
  <button id="btnOne">
    Click
  </button>
  <br><br>
  <input type="text" id="inputOne">
  <br><br>
  <div id="outputOne"></div>
  <br><br>
  <div id="outputTWo"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.min.js"></script>

JavaScript

const btnOne = $('#btnOne');
const inputOne = $('#inputOne');
const outputOne = $('#outputOne');
const outputTWo = $('#outputTWo');

const btnOneStream$ = Rx.Observable.fromEvent(btnOne, 'click');

btnOneStream$.subscribe(
	(e) => console.log(e),
  (err) => console.log(err),
  () => console.log('Completed')
);

const inputOneStream$ = Rx.Observable.fromEvent(inputOne, 'keyup');

inputOneStream$.subscribe(
	(e) => {
    console.log(e.target.value);
    outputOne.html(e.target.value);
  }
);

const mouseMoveStream$ = Rx.Observable.fromEvent(document, 'mousemove');

mouseMoveStream$.subscribe(
	(e) => {
    outputTWo.html('X: '+ e.clientX + ' & Y: ' + e.clientY);
  }
);