瀏覽器事件、鍵盤事件、表單事件、滑鼠事件 (jQuery 14)

這篇都是上一篇的快速寫法，例如$('xxx').on('click', function(){});
快速寫法變成$('xxx').click(function(){});

※瀏覽器事件

官網連結

目前有三個：
.error()：載入錯誤時
.resize()：將視窗大小改變時
.scroll()：右邊或下面有捲軸時，去按或用滑鼠的滾輪時

※.error()

$("img").error(function(){
    alert('我錯了！');
    $(this).hide();
}).attr("src", "Koala.bmp");
----------
<img src="xx.jpg" />

※img裡的src故意寫抓不到的名稱，這時會到attr抓圖，再沒有就會觸發

※.resize()

$(window).resize(function() {
    $('body').prepend('<div>' + $(window).height() + ':' + $(window).width() + '</div>');
});

※.scroll()

$(window).scroll(function () {
    $("div").css('color', 'red');
});
----------
<div>divdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdivdiv</div>

※移動視窗大小，使右邊或下面出現捲軸，去按或滾動滑鼠滾輪會觸發(沒出現捲軸沒用)

※鍵盤事件

官網連結

目前有三個：
.keydown()：按下按鍵時觸發
.keypress()：按下按鍵，按鍵到最底部時觸發
.keyup()：按下按鍵，並彈回來時觸發

$("input").keypress(function(){
    alert('keypress');
});
    
$("input").keydown(function(){
    alert('keydown');
});
    
$("input").keyup(function(){
    alert('keyup');
});
    
$("input").keyup(function(){
    alert('keyup');
}).keydown(function(){
    alert('keydown');
}).keypress(function(){
    alert('keypress');
});
----------
<input />

※在IE 11和Chrome測試的結果一樣，keyup和其他兩個一起執行都不會觸發
只有寫一個keyup才會觸發

※最下面的寫法是將三個合起來寫，效果也是一樣，當然keyup也還是不會觸發

※表單事件

官網連結

目前有7個：
以下三個是一組的，都是聚焦時觸發，如進入input時，滑鼠游標會在裡面
.focus()：最基本的
.focusin()：最先執行
.focusout()：最後執行

.blur()：離開焦點時觸發，如離開input時，游標也不會在裡面
.change()：很像.blur()，但只有內容改變時才會觸發

.select()：就文字選起來時，如用滑鼠拖曳使背景變色就是選取，按兩下是選一個單字，也會觸發
.submit()：表單提交時觸發

※.focus()相關

$(function(){
    $('input').focusin(function(){
        alert('1');
    });
    
    $('input').focus(function(){
        alert('2');
    });
    
    $('input').focusout(function(){
        alert('3');
    }); 
    
    $('input').blur(function(){
        alert('4');
    });
});
----------
<input />

※我將這四個順序弄亂，還是會按照1234的順序執行

※.select()

$(function(){
    $('form').submit(function(){
        alert('1');
    });
});
----------
<form>
    <input type="submit" />
</form>

※$('input').submit()是不會觸發的

※滑鼠事件

因為和其他事件差不多用法，就不貼範例了(hover例外)
.toggle()：1.8過時；1.9移除了

.click()：滑鼠按一下時觸發
.dblclick()：滑鼠按二下時觸發
.contextmenu()：按滑鼠右鍵時觸發

以下兩個比click還快
.mousedown()：滑鼠按下時觸發
.mouseup()：滑鼠按下並彈回時觸發

.mousemove()：滑鼠移動時觸發
.hover()：滑鼠進入離開時都會觸發

.mouseenter()：滑鼠進入時觸發
.mouseover()：滑鼠進入時觸發

.mouseleave()：滑鼠離開時觸發
.mouseout()：滑鼠離開時觸發

※滑鼠進入快到慢：mousemove-->hover-->mouseenter-->mouseover

※滑鼠離開快到慢：mousemove-->hover-->mouseleave-->mouseout

※.hover()

$(function() {
    $("p").hover(function () {
        $(this).css({'background-color' : 'green', 'color' : 'red'});
    }, function () {
        $(this).css({'background-color' : 'red', 'color' : 'green'});
    });
});
----------
<p>
    p
    <span>span</span>
    <span>span</span>
    <span>span</span>
</p>

※第一個function是進入時觸發，第二個是離開時觸發
如果只寫一個，則進入離開都觸發同一個