JavaScript 之預設行為 DOM2級，事件委託機制
阿新 • • 發佈：2018-12-20
1. 事件預設行為及阻止方式
1.1 瀏覽器的預設行為
JavaScript事件本身所具有的屬性，例如a標籤的跳轉，Submit按鈕的提交，右鍵選單，文字框的輸入等。
1.2 阻止預設行為的方式
event.preventDefault(); event.returnValue = false; return false;
//IE低版本和其他版本都支援return false，而其他兩種IE低版本不支援。
<a href="">click here.</a> <script type="text/javascript"> var aLink = document.getElementsByTagName("a")[0]; aLink.onclick = function(e){ var evt = e || event; console.log("aaa"); //return false; //1 //evt.preventDefault(); //2 evt.returnValue = false; //3 } </script>
自定義右鍵選單 oncontextmenu
ul{ /*選單的css樣式*/
display: none;
position: absolute;
top: 0;
left: 0;
}var oUl = document.getElementsByTagName("ul")[0]; document.oncontextmenu = function(e){ //右鍵點哪裡，在哪裡出現選單 var evt = e || event; oUl.style.display = "block"; oUl.style.left = evt.clientX + "px"; oUl.style.top = evt.clientY + "px"; }
小例子來練手：
// 文字框只能輸入數字
var aInput = document.getElementsByTagName("input")[0];
aInput.onkeydown = function(e){
var evt = e || event;
//console.log(evt.keyCode);//48-57
if(evt.keyCode < 48 || evt.keyCode > 57){
return false;
}
}2. DOM2級事件處理程式
DOM2級事件處理程式可以為一個元素新增多個事件處理程式。其定義了兩個方法用於新增和刪除事件處理程式：addEventListener()和removeEventListener()。
新增事件監聽器：addEventListener(事件名，處理函式，布林值)
移除事件監聽器：removeEventListener(事件名，處理函式，布林值)
注意：事件名不帶on，處理函式為函式指標，布林值代表冒泡或捕獲。現在的版本可以省略第三個引數，預設值為false
這個布林值為true,在捕獲階段處理事件，為false，在冒泡階段處理事件，預設為false。
var outer = document.getElementById("outer");
outer.addEventListener("click",foo,true); //新增事件監聽器
outer.removeEventListener("click",foo,true); //移除
function foo(){
console.log("aaa");
}
//通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除；移除時傳入的引數與新增處理程式時使用的引數相同。這也意味著通過addEventListener()新增的匿名函式無法移除,需另外定義一個函式*普通時間不存在相容問題，而DOM2級事件存在相容性問題，IE低版本物件不支援“addEventListener”屬性或方法，
IE下的事件監聽器：attachEvent(事件名，處理函式)，detachEvent(事件名，處理函式) 注意：事件名帶on。
道高一尺，魔高一丈，我們可以自己封裝一個函式解決相容問題。
function foo(){
console.log("aaa");
}
function addEvent(obj){
if(obj.addEventListener){
return obj.addEventListener("click",foo);
}else{
return obj.attachEvent("onclick",foo);
}
}
addEvent(outer);3. 事件委託機制
利用事件冒泡的原理，把本應新增給某元素上的事件委託給他的父級（外層）。
實現拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: aquamarine;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onmousedown = function(e){
var evt = e || event;
_left = evt.offsetX;
_top = evt.offsetY;
document.onmousemove = function(e){
var evt = e || event;
x = evt.clientX - _left;
y = evt.clientY - _top;
if(x<=0){x=0;}
if(x >= document.documentElement.clientWidth - oDiv.offsetWidth){
x = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(y >= document.documentElement.clientHeight - oDiv.offsetHeight){
y = document.documentElement.clientHeight - oDiv.offsetHeight;
}
if(y<=0){y=0;}
oDiv.style.left = x + "px";
oDiv.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>