設定事件操作的方法

今天來整理設定事件操作的方法
網頁的運作，除了元件內容，基本上都是由事件串連起來的，不過在事件的操作上，事件的呼叫的名稱，常常會因為不同的瀏覽器(Chrome, Safari, Opera, Native DOM)，不同的作業系統(Windows, MacOS, iOS, Android, Linux)，不同的裝置(桌機，平板，手機)，而有不同的事件名稱，甚至會有事件有些支援，有些不支援，有些事件有預設的事件動作，有時又需要停止預設的事件動作，因此，事件的操作，算是一個很重要龐大的部份，需要好好來釐清一些概念與迷思。

在p5.js中，基本的程式架構如下

function preload() {
}

let can;
function setup() {
	can = createCanvas(windowWidth, windowHeight); //-- windowWidth -> window.innerWidth
	can.id("can1");
	background("lightyellow");
}

function draw() {

}

function mousePressed(e) {
	console.log(e);
	return false;
}

function keyPressed(e) {
	console.log(e);
	return false;
}

function windowResized(e) {
	console.log(e);
	resizeCanvas(windowWidth, windowHeight);
	return false;
}

查看事件資訊
keyPressed: MouseEvent
target: canvas#can1.p5Canvas
type: "mousedown"

keyPressed: KeyboardEvent
target: body
type: "keydown"

windowResized: Event
target: Window
type: "resize"

在p5.js中，設定事件的方式有以下幾種(以 mouseClick 為例)

第1種是p5.js本身的 mouseClicked() 事件，只是影響範圍是整個網頁的body範圍

function mouseClicked(e) { //-- 使用p5.js的方式設定，要在獨立的function 區段設定
	console.log(e);
	return false;
}

第2種是利用p5.Element的方法，影響範圍是元件tag本身，要在建立can物件後設定

function setup(){
    can.mouseClicked((e) => { //-- 使用p5.Element的方式設定
        console.log(e);
    });
}

第3種是先將can利用can.elt轉換成DOM，再用DOM Event的語法新增事件的話，要在建立can物件後設定

function setup(){
    can.elt.onclick = (e) => { //-- 使用DOM Event的方式設定 
        console.log(e);
    };
}

onclick: PointerEvent
target: canvas#can1.p5Canvas
type: "click"

第4種是利用 JS addEventListener的方式設定，要在建立can物件後設定

function setup(){
    can.elt.addEventListener("click", (e) => { //-- 使用JS addEventListener的方式設定 
        console.log(e);
    });
}

第5種是直接在 canvas tag 上設定事件

<canvas id="can2" onclick="can2_Click(event)"></canvas>
<script>
function can2_Click(e) {  //-- 使用HTML Tag的方式設定
	console.log(e);
	return false;
}
</script>

以下是 p5.Element 有提供的事件項目
mousePressed()
doubleClicked()
mouseWheel()
mouseReleased()
mouseClicked()
mouseMoved()
mouseOver()
mouseOut()
touchStarted()
touchMoved()
touchEnded()
dragOver()
dragLeave()

p5.Element事件的語法是，事件對象是元件本身

let dv1 = createDiv('Click Me!');
dv1.id("dv1");
dv1.position(10, 0);
dv1.mouseClicked((e) => { //-- 使用p5.Element的方式設定, 並且要在setup()區段中設定
    console.log(e);
    e.stopPropagation();
    return false;
});

以下是 p5.js 有提供的事件項目，事件對象是整個網頁
//-- 鍵盤 --
keyPressed()
keyReleased()
keyTyped()

//-- 滑鼠 --
mouseMoved()
mouseDragged()
mousePressed()
mouseReleased()
mouseClicked()
doubleClicked()
mouseWheel()

//-- 手機裝置 --
deviceMoved()
deviceTurned()
deviceShaken()

//-- 觸控螢幕裝置 --
touchStarted()
touchMoved()
touchEnded()

//-- 改變視窗大小時 或是 改變視窗顯示方向 --
windowResized()

以下是完整的程式碼

<div id="dv0"></div>
<div id="dv1"></div>
<div id="dv2">
    <h3>canvas2</h3>
    <canvas id="can2" onclick="can2_Click(event)" ></canvas>
</div>

function preload() {
}

let can;;
function setup() {
	can = createCanvas(windowWidth, windowHeight); //-- windowWidth -> window.innerWidth
	can.id("can1");
	can.parent("dv1");
	resizeCanvas(100, 100);
	background("lightyellow");

	//--- click event for canvas tag area
	can.mouseClicked((e) => {  //-- 使用p5.Element的方式設定
		console.log("--canvas.mouseClicked");
		console.log(e);
	});

	can.elt.onclick = (e) => {  //-- 使用DOM Event的方式設定 
		console.log("--canvas.onclick");
		console.log(e);
	};

	can.elt.addEventListener("click", (e) => {  //-- 使用JS addEventListener的方式設定
		console.log("--canvas.addEventListener_click");
		console.log(e);
	});

	let dv = createDiv('Click Me!');
	dv.id("dv");
	dv.parent("dv0");
	dv.style("margin", "10px");
	dv.mouseClicked((e) => { //-- 使用p5.Element的方式設定, 並且要在setup()區段中設定
		console.log("--div_mouseClicked");
		console.log(e);
		e.stopPropagation();
		return false;
	});

}

//--- click event for canvas tag area
function can2_Click(e) {  //-- 使用HTML Tag的方式設定
	console.log("--can2_Click");
	console.log(e);
	return false;
}

//--- mouse, keyboard event for full body area
function mouseClicked(e) {  //-- 使用p5.js的方式設定，要在獨立的function 區段設定
	console.log("--mouseClicked");
	console.log(e);
	return false;
}

function keyPressed(e) {
	console.log("--keyPressed");
	console.log(e);
	return false;
}

//---- window event for full window area -------
window.onresize = (e) => {  //-- 改變視窗大小或改變視窗顯示方向時觸發
	console.log("--onresize");
	console.log(e);
};

window.addEventListener("resize", (e) => {
	console.log("--addEventListener_resize");
	console.log(e);
});

function windowResized(e) {
	console.log("--windowResized");
	console.log(e);
	resizeCanvas(windowWidth, windowHeight);
	return false;
}

//---- window event for full window area -------
window.onload = (e) => {  //-- 網頁文件載入完成時觸發
	console.log("--onload");
	console.log(e);
};

window.addEventListener("load", (e) => {
	console.log("--addEventListener_load");
	console.log(e);
});

function draw() {

}

參考資料
p5.Element
https://p5js.org/reference/#/p5.Element
HTML DOM Events
https://www.w3schools.com/jsref/dom_obj_event.asp
JavaScript HTML DOM EventListener
https://www.w3schools.com/js/js_htmldom_eventlistener.asp