Author：Mr.柳上原
- 付出不亞於任何的努力
- 願我們所有的努力，都不會被生活辜負
- 不忘初心，方得始終
想要進入前端圈子裏工作
原來需要懂得太多太多
剛開始學習前端
好高騖遠
以爲html+css很牛逼了
然後學了js以爲自己已經是前端了
到處投簡歷
說自己精通原生js
不會任何框架
現在想來
還是太年輕
學了node+mongodb+pug+layui
學了vue
卻發現要成爲一個真正的前端工程師，這些遠遠不夠
還需要git
還需要less，sass
還需要小程序
還需要Bootstrap
還需要React + Redux
......
博大精深的前端啊...
<!DOCTYPE html> <!-- 文檔類型：標準html文檔 -->
<html lang='en'> <!-- html根標籤 翻譯文字：英文 -->
<head> <!-- 網頁頭部 -->
<meat charset='UTF-8'/> <!-- 網頁字符編碼 -->
<meat name='Keywords' content='關鍵詞1,關鍵詞2'/>
<meat name='Description' content='網站說明'/>
<meat name='Author' content='作者'/>
<title>前端59期學員作業</title> <!-- 網頁標題 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外鏈樣式表 -->
<style type='text/css'> /*內部樣式表*/
</style>
</head>
<body> <!-- 網頁主幹：可視化區域 -->
<script>
/*
默認行爲：
瀏覽器自帶的默認事件
當需要自定義這些行爲的時候，就需要幹掉默認行爲
*/
// 阻止默認行爲
event.preventDefault();
event.returnValue = false; // 低版本ie兼容寫法
document.oncontextmenu = function (e){
e = e || window.event;
return false; // 只能阻止DOM0級事件
}
/*
滾輪事件：onmousewheel
注意：onmousewheel不支持火狐
火狐滾輪事件：DOMMouseScroll
*/
// 大衆瀏覽器寫法
document.onmousewheel = function (e){
e = e || window.event;
e.preventDefault();
// 大衆瀏覽器滾輪滾動方向
e.wheelDelta; // 方向的值（+120向前滾，-120向後滾）
}
// 火狐寫法（只支持滾輪DOM2級事件）
document.addEventListener("DOMMouseScroll", (e) => {
e = e || window.event;
e.preventDefault();
// 火狐滾輪滾動方向
e.detail; // 方向的值（-3向前滾，+3向後滾）
})
// 滾輪事件兼容
mousewheel(document, function (e){
e = e || window.event;
console.log("滾輪事件");
if (e.wheelDetail > 0){
console.log("向前滾動");
} else {
console.log("向後滾動");
}
}, true); // 第三個參數，true（阻止默認行爲），默認爲false（不阻止默認行爲）
function mousewheel(dom, cb, bool){
/*
滾輪方向：
e.wheelDetail
正值向前
負值向後
*/
var type = "mousewheel";
if (dom.onmousewheel === undefined){
type = "DOMMouseScroll";
}
}
// 真正的事件函數
function typeFn(e){
e = e || window.event;
// 統一滾輪事件的方向
e.wheelDetail = e.wheelDelta / 120 || e.detail / -3;
// 判斷默認行爲
if (!!bool){
// 阻止默認行爲
if (e.preventDefault){
e.preventDefault();
} else {
event.returnValue = false;
}
}
cb.call(this, e);
}
if (dom.addEventListener){
dom.addEventListener(type, typeFn);
} else {
dom.attachEvent("on" + type, typeFn);
}
</script>
</body>
</html>