DOM

この例では、onclick と onauxclick という 2 つのイベント ハンドラーの関数を定義しています。前者はボタンの背景色を変更し、後者はボタンの前景（テキスト）の色を変更します。また、このデモを多ボタンマウスで試すことで、2 つの関数が動作する様子を見ることができます（GitHub でライブで見ることができ、ソースコードを見ることもできます）。

let button = document.querySelector('button');
let html = document.querySelector('html');

function random(number) {
  return Math.floor(Math.random() * number);
}

function randomColor() {
    return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
}

button.onclick = function() {
  button.style.backgroundColor = randomColor();
};

button.onauxclick = function(e) {
  e.preventDefault();
  button.style.color = randomColor();
}

button.oncontextmenu = function(e) {
  e.preventDefault();
}

HTML：

<SPAN id=IdTest>[SPAN要素。ここでマウスを操作してください…<B>[B要素]</B>テキスト<INPUT value="INPUT要素">]</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>
<SPAN id=IdLog2></SPAN><BR>

JavaScript：

function Job(eve){ //clickイベントの処理：
  D=eve; //＝[object]：[object PointerEvent]
詳細
	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：false
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：431
	//screenY＝[number]：272
	//clientX＝[number]：224
	//clientY＝[number]：197
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：224
	//pageY＝[number]：2064
	//x＝[number]：224
	//y＝[number]：197
	//offsetX＝[number]：206
	//offsetY＝[number]：31
	//movementX＝[number]：0
	//movementY＝[number]：0
	//…

  let E=eve.target;
  IdLog.innerHTML=E.tagName +"：pageX："+ eve.pageX +"、pageY："+ eve.pageY;
}
function Job2(eve){ //auxclickイベントの処理：
  DA=eve; //＝[object]：[object PointerEvent]。右ボタンを押したらでてきました。
詳細
	//isTrusted＝[boolean]：true
	//pointerId＝[number]：1
	//width＝[number]：1
	//height＝[number]：1
	//pressure＝[number]：0
	//tiltX＝[number]：0
	//tiltY＝[number]：0
	//azimuthAngle＝[number]：0
	//altitudeAngle＝[number]：1.5707963267948966
	//tangentialPressure＝[number]：0
	//twist＝[number]：0
	//pointerType＝[string]：mouse
	//isPrimary＝[boolean]：false
	//getCoalescedEvents＝[function]：function getCoalescedEvents() { [native code] }
	//getPredictedEvents＝[function]：function getPredictedEvents() { [native code] }
	//screenX＝[number]：560
	//screenY＝[number]：188
	//clientX＝[number]：353
	//clientY＝[number]：113
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：2
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：353
	//pageY＝[number]：2133
	//x＝[number]：353
	//y＝[number]：113
	//offsetX＝[number]：335
	//offsetY＝[number]：28
	//movementX＝[number]：0
	//movementY＝[number]：0
	//…

  let E=eve.target;
  IdLog2.innerHTML=E.tagName +"：pageX："+ eve.pageX +"、pageY："+ eve.pageY;
}
IdTest.onclick=Job;
IdTest.onauxclick=Job2;