js問題

Call 和 Apply 的區(qū)別

語法：
function.call(thisObj [, arg1[, arg2[, [, ...argN]]]]);
function.apply(thisObj [, argArray] )；
定義： call 和 apply 可以讓我們手動設置 this 指向
兩個參數(shù)：第一個參數(shù)是綁定 this 指向；第二個參數(shù)是向將要執(zhí)行的函數(shù)傳遞的參數(shù)
區(qū)別：第二個參數(shù)痕貌， call 以一個一個的形式傳遞參數(shù)闲询；apply 以數(shù)組的形式傳遞參數(shù)
使用示例

var a = 10;
function sum(num1, num2) {
console.log(this.a + num1 + num2);
}
var obj = {
a: 20
}

sum(10, 10); //30
sum.call(obj, 10, 10); // 40
sum.apply(obj, [10, 10]); // 40

鍵盤事件屬性

event.keyCode; // 獲取按下的鍵盤按鍵的鍵碼值(Unicode值)
event.ctrlKey; // 獲取是否按下了ctrl鍵
event.shiftKey; // 獲取是否按下了shift鍵
event.altKey; // 獲取是否按下了alt鍵
event.metaKey; // 獲取是否按下了meta鍵

鼠標事件屬性

event.screenX/event.screenY // 獲取鼠標基于屏幕的X軸/Y軸坐標
event.clientX/event.clientY // 獲取鼠標基于瀏覽器窗口的X軸/Y軸坐標
event.pageX/event.pageY // 獲取鼠標基于文檔的X軸/Y軸坐標

event.button // 獲取鼠標按下的鍵粪小。非IE瀏覽器中0為鼠標左鍵湿镀，1為鼠標中鍵，2為鼠標右鍵
event.which // 獲取指定事件上哪個鍵盤鍵或鼠標按鈕被按下

addEventListener 和 attachEvent 區(qū)別

attachEvent方法適用于IE
attachEvent中的事件帶on，而addEventListener中的事件不帶on
attachEvent 方法有兩個參數(shù)：第一個參數(shù)為事件名稱眯漩，第二個參數(shù)為接收事件處理的函數(shù)； addEventListener 方法有三個參數(shù)：第一個參數(shù)為事件名稱（不含 on溪窒，如 "click"）坤塞，第二個參數(shù)為要接收事件處理的函數(shù)，第三個參數(shù)為一個bool值澈蚌，默認為false

添加多個事件處理程序執(zhí)行的順序不同

js代碼(addEventListener)：
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
alert(1);
},false);

btn.addEventListener("click",function(){
alert(2);
},false);

//執(zhí)行結果 1 摹芙，2
js代碼(attachEvent)：
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert(1);
});
btn.attachEvent("onclick",function(){
alert(2);
});

//執(zhí)行結果 2 ，1

事件處理程序的作用域不同

DOM2級事件添加的事件處理程序宛瞄，它的作用域是所屬的元素浮禾，而IE的事件處理程序會在全局作用域中運行。
js代碼(addEventListener)：
var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
console.log(this.id); // myBtn
},false);
js代碼(attachEvent)：
var btn=document.getElementById("myBtn");
btn.attachEvent("onclick",function(){
alert(this===window); // true
});

移除綁定事件 removeEventListener() 和 detachEvent()

移除 addEventListener 事件：
element.removeEventListene(event, function, useCapture)
event: 事件名份汗，注意不使用“on”前綴盈电，如 click
function: 指定事件觸發(fā)時執(zhí)行的函數(shù)
useCapture: 指定事件是否在捕獲或冒泡階段執(zhí)行
true: 在捕獲階段執(zhí)行
false: 在冒泡階段進行，默認值為false
如果添加時用的捕獲階段杯活，那么在移除時也要用捕獲階段匆帚，否則無法移除它們
如果是同一個元素同一個調(diào)用函數(shù)同一個useCapture值綁定多次，在移除時只需要執(zhí)行一次移除
移除 attachEvent 事件：
element.detachEvent(event, function)
event: 事件名旁钧，注意要使用“on”前綴吸重，如 onclick
function: 指定事件觸發(fā)時執(zhí)行的函數(shù)

addEventListener 和 on 區(qū)別

html代碼：
<div id="box">addEventListener 和 on 區(qū)別</div>
js代碼：
window.onload = function(){
var box = document.getElementById("box");
box.onclick = function(){
console.log("我是box1");
}
box.onclick = function(){
console.log("我是box2");
}
}

//運行結果：“我是box2”
js代碼：
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click", function(){
console.log("我是box1");
})
box.addEventListener("click", function(){
console.log("我是box2");
})
}
運行結果：我是box1
　　　　　我是box2
第二個onclick會把第一個onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結果歪今，但是有時我們又需要執(zhí)行多個相同的事件嚎幸，很明顯如果用on完成不了我們想要的，而addEventListener可以多次綁定同一個事件并且不會覆蓋上一個事件寄猩。

HTML5 新增的事件

contextmenu事件
這個事件是當鼠標右擊的時候觸發(fā)的嫉晶，但是觸發(fā)這個屬性的時候默認的行為也會被觸發(fā)，所以需要通過preventDefault()方法來阻止。
beforeunload事件
beforeunload在頁面卸載之前觸發(fā)替废，該事件會彈出一個對話框箍铭，詢問是否確定離開。
hashchange事件
該事件當URL中的hash值改變時觸發(fā)椎镣，通常用于Ajax應用中利用URL參數(shù)保存導航信息坡疼；這個在前端路由的制作中是非常有用得。

阻止事件默認行為和阻止事件冒泡

html代碼：
<div id="wrap" style="width: 200px; height: 200px; background: gray;">
<div id="btn" style="width: 100px; height: 100px; background: orangered;"></div>
<a id="prevent" target="_blank" >preventDefault</a>
</div>
標準瀏覽器的使用方法

preventDefault(): 用于阻止事件的默認行為;
比如： a 鏈接的跳轉行為和表單自動提交行為
js代碼：
var prevent = document.getElementById("prevent");
prevent.addEventListener("click", function(event){
event.preventDefault();
}, false);

//使用preventDefault()方法就阻止了a標簽打開新窗口的默認行為
stopPropagation(): 用于阻止事件的進一步獲取和傳播;
比如：阻止事件繼續(xù)向上層冒泡
js代碼：
var btn = document.getElementById("btn"),
wrap= document.getElementById("wrap");
btn.addEventListener("click",function(event){
alert("btn");
event.stopPropagation();
},false);
wrap.addEventListener("click",function(){
alert("wrap");
},false);

//點擊btn時衣陶，這樣就阻止了id="btn"向上級id="wrap"冒泡，打印出來的結果是：彈窗僅彈出btn闸氮。否則剪况，將會先彈出btn，然后彈出wrap蒲跨。
低版本IE瀏覽器的使用方法

event.returnValue = false; //阻止事件的默認行為;
event.cancelBubble = true; //阻止事件的進一步獲取或者冒泡;
使用示例

js代碼：
function prevent(event) {
event = event || window.event;
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
//使用 if else 去判斷

事件捕獲和事件冒泡

事件冒泡執(zhí)行過程：從最具體的的元素（你單擊的那個元素）開始向上開始冒泡译断，下面的案例的順序是：content > wrap
事件捕獲執(zhí)行過程：從最不具體的元素（最外面的那個盒子）開始向里面冒泡，下面的案例的順序是：wrap > content
html代碼：
<div id="wrap">
<div id="content"></div>
</div>
js代碼： (addEventListener第三個參數(shù)寫的是false或悲，默認為false)
window.onload = function(){
var wrap= document.getElementById("wrap");
var content= document.getElementById("content");
wrap.addEventListener("click", function(){
console.log("我是wrap");
}, false)
content.addEventListener("click", function(){
console.log("我是content");
})
}
運行結果：我是content
　　　　　我是wrap
js代碼： (addEventListener第三個參數(shù)寫的是true孙咪，默認為false)
window.onload = function(){
var wrap= document.getElementById("wrap");
var content= document.getElementById("content");
wrap.addEventListener("click", function(){
console.log("我是wrap");
}, true)
content.addEventListener("click", function(){
console.log("我是content");
})
}
運行結果：我是wrap
　　　　　我是content
第三個參數(shù)寫的是true，則按照事件捕獲的執(zhí)行順序進行巡语。

給 select 標簽 option 內(nèi)容加鏈接

<select onchange="window.open(options[selectedIndex].value, '_self')">
<option value="http://www.bj-hmk.com/">中文</option>
<option value="http://en.bj-hmk.com/">English</option>
</select>

Null 和 Undefined

undefined 表示根本不存在定義
null 表示一個值被定義了翎蹈，定義為“空值”

（1）變量被聲明了，但沒有賦值時男公，就等于undefined荤堪。
（2）調(diào)用函數(shù)時，應該提供的參數(shù)沒有提供枢赔，該參數(shù)等于undefined澄阳。
（3）對象沒有賦值的屬性，該屬性的值為undefined踏拜。
（4）函數(shù)沒有返回值時碎赢，默認返回undefined。
所以設置一個值為 null 是合理的速梗，如
objA.valueA = null;
但設置一個值為 undefined 是不合理的肮塞，如
objA.valueA = undefined; // 應該直接使用 delete objA.valueA; 任何一個存在引用的變量值為undefined都是一件錯誤的事情。
這樣判斷一個值是否存在镀琉，就可以用
objA.valueA === undefined // 不應使用 null 因為 undefined == null峦嗤，而 null 表示該值定義為空值。

解決slideDown()和slideUp()鼠標快速移入移出屋摔，出現(xiàn)反復執(zhí)行的問題

方法一：
$(".orderDivMain").hover(function () {
if (!$(".orderDivId").is(":animated")) {
$(this).find('.orderDivId').slideDown(500);
}
}, function () {
if (!$(".orderDivId").is(":animated")) {
$(this).find('.orderDivId').slideUp(500);
}
});

方法二：
$(".orderDivMain").hover(function () {
$(".orderDivId").slideDown(500);
});
$(".orderDivId").mouseleave(function () {
$(".orderDivId").slideUp(500);
});

web應用整體性能的考慮

8 9兩點參考于《JavaScript DOM編程藝術(第2版)》
盡量少訪問DOM和盡量減少標記

if(document.getElementsByTagName("a").length > 0){
var links = document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
something...
}
}
上面這段代碼使用了兩次getElementsByTagName方法去執(zhí)行相同的操作烁设，浪費了一次搜索。更好的辦法是把第一次搜索的結果保存在一個變量中，然后重用該結果：

var links = document.getElementsByTagName("a");
if(links.length > 0){
for(var i = 0; i < links.length; i++){
something...
}
}
合并和放置腳本

位于<head>塊中的腳本會導致瀏覽器無法并行加載其他文件疚颊，把<script>標簽放在</body>標記之前狈孔，就可以讓頁面變的更快。

使你所寫的頁面能夠向后兼容材义、平穩(wěn)退化

針對這一問題的最簡單的解決方案是均抽，檢測瀏覽器對javascript的支持程度，即對象檢測其掂。幾乎所有的東西（包括各種方法在內(nèi)）都可以被當作對象來對待油挥，這意味著我們可以很容易的把不支持某個特定的DOM方法的瀏覽器檢測出來：

if(method){
statements
}
例如，檢測瀏覽器是否支持getElementById方法：

if(document.getElementById){
statements using getElementById
}
但是如果需要檢測多個DOM方法或者屬性是否存在款熬，那么最重要的語句可能會被深埋在一層又一層的花括號里深寥，使得代碼將會很難閱讀和理解。

那么就可以把測試的條件改為“如果你不理解這個方法贤牛，請離開”則會變得簡單明了惋鹅。

if(!document.getElementById){
return false;
}
若需要測試多個方法或屬性是否支持，可以使用“邏輯或”操作符將其合并：

if(!document.getElementById || !document.getElementsByTagName){
return false;
}

jQuery中attr和prop的區(qū)別

處理HTML元素本身就帶有的固有屬性時使用prop方法
處理HTML元素我們自己定義的Dom屬性時使用attr方法
<input class='check1' type='checkbox'>選擇1
<input class='check2' type='checkbox' checked>選擇2
checked屬于checkbox元素的固有屬性殉簸，讓我們來看看prop和attr的結果有什么不同：

prop方法：
$('.check1').prop('checked') -- false
$('.check2').prop('checked') -- true
attr方法：
$('.check1').attr('checked') -- undefined
$('.check2').attr('checked') -- 'checked'

在選中的元素上綁定事件和通過代理綁定事件的區(qū)別

在選中的元素上綁定click事件：
$('a').on('click', function(){});
通過代理綁定click事件：
$(document).on('click', 'a', function(){});
在選中的元素上綁定事件只能為頁面現(xiàn)有的a元素綁定點擊事件负饲，如果是動態(tài)生成的新的a元素是沒有事件的。

通過代理綁定事件是將指定的事件綁定在document上喂链，新添加的a元素也能觸發(fā)此事件返十。

reload 方法，強迫瀏覽器刷新當前頁面椭微。

語法：location.reload([falseOrTrue]) ;
參數(shù)： falseOrTrue洞坑，可選參數(shù)。默認為 false蝇率，從客戶端緩存里取當前頁迟杂。true，則以 GET 方式本慕，從服務端取最新的頁面排拷，相當于客戶端點擊 F5(“刷新”)。
html代碼：
<a href="javascript:location.reload();">點擊刷新頁面</a>
<span onclick="location.reload(true);">點擊刷新頁面</span>

禁止頁面選取內(nèi)容

適用于IE锅尘、Chrome瀏覽器监氢，在 head 的 <script> 標簽里面添加 js 代碼
js代碼：
document.onselectstart = function (e) { return false; }
或者
document.onselectstart = new Function('event.returnValue = false;');
在firefox火狐瀏覽器中，禁止元素被選取可以采用 CSS 樣式在來控制
CSS代碼：
body{
-moz-user-focus: ignore;
-moz-user-input: disabled;
-moz-user-select: none;
}
禁止鼠標右鍵
js代碼：
document.oncontextmenu = function(e){return false;}

正則表達式驗證

// 驗證是否為手機號
function phone(num) {
return /^1[34578]\d{9}$/.test(num);
}

// 驗證是否為郵箱
function email(e) {
return /^(\w)+(.\w+)*@(\w)+((.\w+)+)$/.test(e);
}

js代碼：
window.onscroll = function () {
if (document.body.scrollTop || document.documentElement.scrollTop > 0) {
document.getElementById('back_top').style.display = "block";
} else {
document.getElementById('back_top').style.display = "none";
}
}
$('.back_top').click(function () {
$("html,body").animate({ scrollTop: 0 }, 500);
return false;
});

js 中 Error 錯誤

ReferenceError：作用域判別錯誤，通過作用域鏈的搜尋找不到相應的變量浪腐。

TypeError：可以通過作用域搜索到變量纵揍，但是對變量的操作不合法。

SyntaxError：語法錯誤议街。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末泽谨，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子特漩，更是在濱河造成了極大的恐慌吧雹，老刑警劉巖，帶你破解...
沈念sama閱讀 217,734評論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件涂身，死亡現(xiàn)場離奇詭異吮炕，居然都是意外死亡，警方通過查閱死者的電腦和手機访得，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,931評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來陕凹，“玉大人悍抑，你說我怎么就攤上這事《虐遥” “怎么了搜骡？”我有些...
開封第一講書人閱讀 164,133評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長佑女。經(jīng)常有香客問我记靡，道長，這世上最難降的妖魔是什么团驱？我笑而不...
開封第一講書人閱讀 58,532評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任摸吠，我火速辦了婚禮，結果婚禮上嚎花，老公的妹妹穿的比我還像新娘寸痢。我一直安慰自己，他們只是感情好紊选，可當我...
茶點故事閱讀 67,585評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布啼止。她就那樣靜靜地躺著，像睡著了一般兵罢。火紅的嫁衣襯著肌膚如雪献烦。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,462評論 1贊 302
城市分裂傳說
那天卖词，我揣著相機與錄音巩那，去河邊找鬼。笑死，一個胖子當著我的面吹牛拢操，可吹牛的內(nèi)容都是我干的锦亦。我是一名探鬼主播，決...
沈念sama閱讀 40,262評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼令境，長吁一口氣：“原來是場噩夢啊……” “哼杠园！你這毒婦竟也來了？” 一聲冷哼從身側響起舔庶，我...
開封第一講書人閱讀 39,153評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤抛蚁，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后惕橙，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體瞧甩，經(jīng)...
沈念sama閱讀 45,587評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,792評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年弥鹦，在試婚紗的時候發(fā)現(xiàn)自己被綠了肚逸。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,919評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡彬坏，死狀恐怖朦促，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情栓始，我是刑警寧澤务冕，帶...
沈念sama閱讀 35,635評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站幻赚，受9級特大地震影響禀忆，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜落恼，卻給世界環(huán)境...
茶點故事閱讀 41,237評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一箩退、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧佳谦，春花似錦乏德、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,855評論 0贊 22
一樁弒父案喊括，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至矢棚，卻和暖如春郑什，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蒲肋。一陣腳步聲響...
開封第一講書人閱讀 32,983評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工蘑拯，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钝满，地道東北人。一個月前我還...
沈念sama閱讀 48,048評論 3贊 370
代替公主和親
正文我出身青樓申窘，卻偏偏與公主長得像弯蚜，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子剃法，可洞房花燭夜當晚...
茶點故事閱讀 44,864評論 2贊 354

js問題

推薦閱讀更多精彩內(nèi)容