b.pde

var i = 0;
String str = "hello";

void setStr(String s) {
  str = s;
}

void setup() {
  size(500, 200);
  background(0);
  
  // event has to registered prior attach and raise
  registerEventType("click"); 
}

void draw() {
  background(0);
  text(str, 200, 100);
}

void mouseClicked() {
  raiseEvent("click");
}

external.html

<script type="text/javascript" src="../processing.js"></script>
<script type="text/javascript">
  function pjsClicked(id) {
    document.getElementById("clicks").value += id + " click! ";
  }
  
  function initTestPjs(id) {
    var p = Processing.getFacade(id);
    p.setStr("world..? HELLO! click " + id);
    
    p.addEventListener("click", function() { pjsClicked(id); }, false);
  }
</script>

<textarea id="clicks" cols="80"></textarea>
<br />
<canvas id="canvas1" width="100" height="100" data-src="b.pde" data-processing-onload="initTestPjs('canvas1')"></canvas>
<canvas id="canvas2" width="100" height="100" data-src="b.pde" data-processing-onload="initTestPjs('canvas2')"></canvas>

See https://processing-js.lighthouseapp.com/projects/41284/tickets/341-create-a-domweb-helper-library-for-pjs#ticket-341-13
for details