JavaScript事件處理

       Js以事件驅動來實作界面互動，事件驅動的核心：以訊息為基礎，以事件來驅動，通俗地說，事件就是檔案或瀏覽器視窗中發生的一些特定

互動行為，如加載、單擊、輸入、選擇等，

1.1事件基礎

       Js與HTML之間互動就是通過事件實作的，事件就是檔案或瀏覽器視窗中發生的一些特定的互動瞬間，事件在瀏覽器中是以物件的形式存在的，即event，觸發一個事件，就會產生一個事件物件event，該物件包含著所有與事件有關的資訊，包括導致事件的元素、事件的型別以及其他與特定事件相關的資訊，

1.1.1事件模型

在瀏覽器的發展歷史中，先后出現了以下4種事件處理模型：

1. 基本事件模型：也稱為DOM0級事件模型，是瀏覽器發展初期出現的一種比較簡單的事件模型，主要通過事件屬性；為指定標簽系結事件處理函式，

 優點：

      由于這種模型應用比較廣泛，獲得了所有瀏覽器的支持，目前依然比較流行，

 缺點：

      但是這種模型對HTML檔案標簽的依賴較為嚴重，不利于Js獨立開發，

    2. DOM事件模型：有W3C制定，是目前標準的事件處理模型，所有符合標準的瀏覽器都支持該事件模型，DOM事件模型包括DOM2事件模型和DOM3事件模型，

DOM3事件模型為DOM2事件模型的升級版，略有完善，主要是新增了一些事情型別，以適應移動設備的開發需要，但大部分規范和用法保持一致，

    3. IE事件模型：IE4.0及其以上版本瀏覽器支持，與DOM事件模型相似，但用法不同，

    4. Netscape事件模型：由Netscape4瀏覽器實作，在Netscape6中停止支持，

1.1.2事件流

事件流就是多個節點物件對同一種事件進行回應的先后順序，主要包括3種型別，

1.冒泡型

從最特定的目標向最不特定的目標依次觸發事件，也就是事件從下向上進行回應，這個傳遞程序被形象地稱為冒泡，

下面用法：

function bubble() {
var div = document.getElementsByTagName('div');
var show = document.getElementById('show');
for (var i = 0; i < div.length; i++) {

div[i].onclick = (function (i) {

return function () {

div[i].style.border = '1px dashed orange';

show.innerHTML += div[i].className + '>';

}

})(i);

}

}

window.onload = bubble;

2.捕獲型

事件從最不特定的目標開始被觸發，最后到最特定的目標，也就是事件從上向下進行回應，

下面用法：

for (var i = 0; i < div.length; i++) {
div[i]. /*onclick*/ addEventListener('click', (function (i) {
return function () {
div[i].style.border = '1px dashed orange';
show.innerHTML += div[i].className + '>';
}
})(i), true);
}

3.混合型

       W3C的DOM事件模型支持捕獲型和冒泡型兩種事件流，但是捕獲型事件流先發生，然后才發生冒泡型事件流，兩種事件流會觸及DOM中的所

有層級物件，從document物件開始，最后回傳document物件結束，

根據事件流型別，

以下可以把事件傳播的整個程序分為3個階段：

1.1.3事件型別

根據觸發物件不同，可以將瀏覽器中發生的事件分成不同的型別，

DOM0級事件定義了以下事件型別：

①　滑鼠事件：與滑鼠操作相關的各種行為，可以細分為兩類：

②　鍵盤事件：與鍵盤操作相關的各種行為，包括追蹤鍵盤敲擊及其背景關系，

追蹤鍵盤包括3種型別：

1. keyup

2. keydown

3. keypress

③　頁面事件：關于頁面本身的行為，例如，當首次載入頁面時觸發load事件和離開頁面時觸發unload和beforeunload事件，

④　UI事件：追蹤用戶在頁面中的各種行為，例如，監聽用戶在表單中的輸入，可以通過focus和blur兩個事件來實作，

DOM2事件模型中，事件模型包含4個子模塊，每個子模塊提供對某類事件的支持，

‘默認動作’列定義了事件型別是否支持preventDefault()方法，取消事件的默認動作，

DOM3事件模型新增了一些新事件，

DOM3事件型別簡單說明如下：

1.1.4系結事件

在基本事件模型中，Js支持兩種系結方式，

1. 靜態系結

把Js腳本作為屬性值，直接賦予事件屬性，

下面用法：

 <button onclick="document.write('我是程式員！');">按鈕</button> 

2. 動態系結

使用DOM物件的事件屬性進行賦值，

下面用法：

var button = document.getElementById('btn');
button.onclick = function () {
document.write('我是程式員！');
}

這種方法可以在腳本中直接為頁面元素附加事件，不用破壞HTML結構，比上一種靈活，

1.1.5事件處理函式

事件處理函式是一類特殊的函式，其結構與函式直接量相同，主要任務是實作事件處理，使用方法是異步呼叫，由事件觸發進行回應，

事件處理函式一般沒有明確的回傳值，不過在特定事件中，用戶可以利用事件處理函式的回傳值影響程式的執行，

下面用法：

function btn1(event) {
event = event || window.event;
var btn11 = event.srcElement ? event.srcElement : Event.target;
btn11.style.background = 'green';
}

function btn2(event) {
event = event || window.event;
var src = https://www.cnblogs.com/hjy0806/archive/2021/02/16/event.srcElement ? event.srcElement : Event.target;
src.style.background ='skyblue';
}

1.1.6注冊事件

在DOM事件模型中，通過呼叫物件的addEventListener()方法注冊事件，

語法：

 element.addEventListener(type, listener, useCapture); 

引數：

• type（表示監聽事件型別的字串，）

• listener（當所監聽的事件型別觸發時，會接收到一個事件通知（實作了 Event 介面的物件）物件，

• listener 必須是一個實作了 EventListener 介面的物件，或者是一個函式，）

• useCapture（Boolean，在DOM樹中，注冊了listener的元素，是否要先于它下面的EventTarget，呼叫該listener，

• 當useCapture(設為true) 時，沿著DOM樹向上冒泡的事件，不會觸發listener，

• 當一個元素嵌套了另一個元素，并且兩個元素都對同一事件注冊了一個處理函式時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式，

• 事件傳播模式決定了元素以哪個順序接收事件，如果沒有指定，useCapture默認為 false ，）

下面用法：

var p1 = document.getElementById('p1');
p1.addEventListener('mouseover', function () {
p1.style.background = 'green';
}, true);
p1.addEventListener('mouseout', function () {
p1.style.background = 'red';
}, true);

1.1.7銷毀事件

在DOM事件模型中，使用removeEventListener()方法可以從指定物件中洗掉已經注冊的事件處理函式，

用法：

element.removeEventListener(event, function, useCapture)

引數：

可能值：

 true - 在捕獲階段移除事件句柄，

 false- 默認，在冒泡階段移除事件句柄，

 注意: 如果添加兩次事件句柄，一次在捕獲階段，一次在冒泡階段，你必須單獨移除該事件，

下面用法：

var span1 = document.getElementById('span1');
var f1 = function () {
span1.style.background = 'pink';
};
var f2 = function () {
span1.style.background = 'skyblue';
span1.removeEventListener('mouseover', f1);
span1.removeEventListener('mouseout', f2);
};
span1.addEventListener('mouseover', f1);
span1.addEventListener('mouseout', f2);

1.1.8事件委托

 Js事件委托就是利用冒泡的原理，把本應該添加到某個元素上的事件委托給他的父級，從而減少DOM互動達到網頁優化，

這樣做的好處：

真正把HTML和Js分離，也能防止在動態添加或洗掉節點的程序中注冊的事件丟失，

下面用法：

var ul = document.getElementById('list');
ul.addEventListener('click', function (e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if (e.target && e.target.nodeName.toUpperCase() == 'LI') {
document.write(e.target.innerHTML);
}
}, true);

var i = 4;
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
var li = document.createElement('li');
li.innerHTML = '我是程式員' + i++;
ul.appendChild(li);
});

1.2使用滑鼠事件

滑鼠事件是Web開發中最常用的事件型別，

1.2.1滑鼠點擊

滑鼠點擊事件包括4個：

        其中click事件型別最為常用，而mousedown和mouseup事件型別多用于在滑鼠拖放、拉伸操作中，當這些事件處理函式的回傳值為false時，

則會禁止系結物件的默認行為，

下面用法：

var a = document.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
if ((new RegExp(window.location.href)).test(a[i].href)) {
a[i].onclick = function () {
return false;
}
}
}

1.2.2滑鼠移動

        mousemove事件型別是一個實時回應的事件，當滑鼠指標的位置發生變化時（至少移動一個像素），就會觸發mousemove事件，

該事件回應的靈敏度主要參考滑鼠的指標的移動速度的快慢，以及瀏覽器跟新的速度，

下面用法：

var box = document.getElementById('box');
box.style.position = 'absolute';
box.style.width = '200px';
box.style.height = '200px';
box.style.background = 'green';
var mx, my, ox, oy;

function e(event) {
if (!event) {
event = window.event;
event.target = event.srcElement;
event.layerX = event.offsetX;
event.layerY = event.offsetY;
}

event.mx = event.pageX || event.clientX + document.body.scrollLeft;
event.my = event.pageY || event.clientY + document.body.scrollTop;
return event;
}

document.onmousedown = function (event) {
event = e(event);
o = event.target;
ox = parseInt(o.offsetLeft);
oy = parseInt(o.offsetTop);
mx = event.mx;
my = event.my;
document.onmousemove = move;
document.onmouseup = stop;
}

function move(event) {
event = e(event);
o.style.left = ox + event.mx - mx + 'px';
o.style.Top = oy + event.my - my + 'px';
}

function stop(event) {
event = e(event);
ox = parseInt(o.offsetLeft);
oy = parseInt(o.offsetTop);
mx = event.mx;
my = event.my;
o = document.onmousemove = document.onmouseup = null;
}

1.2.3滑鼠經過

滑鼠經過包括下面兩種事件型別：

如果從父元素中移到子元素中時，也會觸發父元素的mouseover事件型別，

下面用法：

var div = document.getElementsByTagName('div');
for (var i = 0; i < div.length; i++) {
div[i].onmousemove = function (e) {
this.style.color = 'orange';
this.style.fontSize = '24px';
this.style.fontWeight = '600';
}
div[i].onmouseout = function () {
this.style.color = 'red';
}
}

1.3使用鍵盤事件

當用戶操作鍵盤時會觸發鍵盤事件，

鍵盤事件主要包括下面3種型別：

1.3.1鍵盤事件屬性

鍵盤事件定義了很多屬性，利用這些屬性可以精確控制鍵盤操作，鍵盤事件屬性一般只在鍵盤相關事件發生時才會存在于事件物件中，

下面用法：

var box = document.getElementById('box');
box.style.position = 'absolute';
box.style.width = '100px';
box.style.height = '100px';
box.style.background = 'green';
document.keyDown = keyDown;
function keyDown(event) {
var event = event || window.event;
switch (event.keyCode) {
case 37:
box.style.left = box.offsetLeft - 5 + 'px';
break;
case 38:
box.style.left = box.offsetLeft + 5 + 'px';
break;
case 39:
box.style.top = box.offsetTop - 5 + 'px';
break;
case 40:
box.style.top = box.offsetTop + 5 + 'px';
break;
}
return false;
}

1.4使用頁面事件

所有頁面事件都明確地處理整個頁面的函式和狀態，

1.4.1視窗重置

        resize事件型別是在瀏覽器視窗被重置時觸發的，當用戶調整視窗大小，或者最大化，最小化、恢復視窗大小顯示時均可觸發resize事件，

利用該時間可以根據視窗大小的變化以便動態調整頁面元素的顯示大小，

下面用法：

var box = document.getElementById("box");
box.style.position = "absolute";
box.style.backgroundColor = "red";
box.style.width = w() * 0.8 + "px";
box.style.height = h() * 0.8 + "px";
window.onresize = function () {
box.style.width = w() * 0.8 + "px";
box.style.height = h() * 0.8 + "px";
}

function w() {
if (window.innerWidth) { //兼容DOM
return window.innerWidth;
} else if (document.body) {
return document.body.clientWidth; //兼容IE
}
}

function h() {
if (window.innerHeight) {
return window.innerHeight;
} else if (document.body) {
return document.body.clientHeight;
}
}

1.4.2頁面滾動

scroll事件型別是在元素滾動條在滾動時觸發，

下面用法：

    var box = document.getElementById("box");
        box.style.position = 'absolute';
        box.style.width = '100px';
        box.style.height = '100px';
        box.style.background = 'green';
        window.onload = f;
        window.onscroll = f;
        function f() {
            box.style.left = 100 + parseInt(document.body.scrollLeft) + 'px';
            box.style.top = 100 + parseInt(document.body.scrollTop) + 'px';
        }

1.5使用UI事件

UI事件負責回應用戶與頁面元素的互動，

1.5.1焦點處理

焦點處理主要包括以下兩種事件型別：

所謂獲得焦點；就是激活表單欄位，使其可以回應鍵盤事件，

所謂失去焦點：就是指定元素當失去焦點就會觸發此事件，（通常應用于表單元素，）

下面用法：

var form = document.getElementById('myform');
var field = form.elements['name'];
window.onload = function () {
field.focus();
field.blur();
}

1.5.2選擇文本

當在文本框或文本區域內選擇文本時，將觸發select事件，

下面用法：

var a = document.getElementsByTagName('input')[0];
var b = document.getElementsByTagName('input')[1];
a.onselect = function () {
if (document.selection) {
o = document.selection.createRange();
if (o.text.length > 0)
b.value = https://www.cnblogs.com/hjy0806/archive/2021/02/16/o.text;
} else {
p1 = a.selectionStart;
p2 = a.selectionEnd;
b.value = a.value.substring(p1, p2);
}
}

1.5.3字串變化檢測

change事件型別是在表單元素的值發生變化時觸發，它主要用于input、select、和textarea元素，

下面用法：

  var a = document.getElementsByTagName('select')[0];
        a.onchange = function () {
            window.open(this.value, '');
        }

1.5.4提交表單

使用<input>或<button>標簽都可以定義提交按鈕，

下面用法：

var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];
f.onsubmit = function (e) {
document.write(t.value);
}

1.5.5重置表單

當單擊重置按鈕時，表單被重置，所有表單欄位恢復初始值，這時會觸發resct事件，

下面用法：

var t = document.getElementsByTagName('input')[0];
var f = document.getElementsByTagName('form')[0];
f.onreset = function (e) {
document.write(t.value);
}

1.5.6剪貼板資料

HTML5規范了剪貼板資料操作，

主要包括6個剪貼板事件：

至于copy、cut和paste事件，只要是在背景關系選單中選擇了相應選項等，所有瀏覽器都會觸發它們，

下面用法：

var form = document.getElementById('myform');
var field1 = form.elements[0];
var getClipboardText = function (event) {
var clipboardData = https://www.cnblogs.com/hjy0806/archive/2021/02/16/(event.clipboardData || window.clipboardData);
return clipboardData.getData('text');
};

var setClipboardText = function (event, value) {
if (event.clipboardData) {
event.clipboardData.setData('text/plain', value);
} else if (window.clipboardData) {
window.clipboardData.setData('text', value);
}
};

var addHandler = function (element, type, handler) {
if (document.addEventListener) {
document.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, handler);
} else {
element['on' + type] = handler;
}
};

addHandler(field1, 'paste', function (event) {
event = event || window.event;
var text = getClipboardText(event);
if (!/^\d*$/.text(text)) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = https://www.cnblogs.com/hjy0806/archive/2021/02/16/false;
}
}
})

1.6 實戰案例

1.6.1 設計彈出對話框

無論從事Web前端開發，還是從事Vue前端開發，事件都是經常用到的，

下面用法：

function Dialog(id) {
this.id = id;
var that = this;
document.getElementById(id).children[0].onclick = function () {
that.close();
}
}

Dialog.prototype.show = function () {
var dlg = document.getElementById(this.id);
dlg.style.display = 'block';
dlg = null;
}

Dialog.prototype.close = function () {
var dlg = document.getElementById(this.id);
dlg.style.display = 'none';
dlg = null;
}

function openDialog() {
var dlg = new Dialog('dlgText');
dlg.show();
}

標籤：其他

上一篇：單例模式

下一篇：vue中怎么動態生成form表單