day5 - jquery事件處理

主要內容
1. jQuery事件處理的必要性
2. on(events,[selector],[data],fn)
3. bind(type, [data], fn)
4. one(type, [data], fn)
5. hover([over,]out)
6. blur([[data],fn])
7. change([[data],fn])
8. click([[data],fn])
9. dblclick([[data],fn])
10. focus([[data],fn])
11. keydown([[data],fn])
12. keypress([[data],fn])

1. jQuery事件處理的必要性

在使用JS進行客戶端編程中，由于在某種情況下會對文檔組件或JS對象進行事件處理。諸如對按鈕進行點擊事件發生時綁定的一個或多個業務處理執行函數；下拉列表選項發生事件發生時綁定函數；文本框值改變時綁定處理函數等等。
這些綁定可能是有條件或者無條件，綁定的函數可能是一個或多個。這就需要為事件源（被綁定的文檔元素或JS對象）提供綁定機制，在jQueryJS框架中，提供了為事件源綁定的實現。

2. on(events,[selector],[data],fn)

函數定義
在選擇元素上綁定一個或多個事件處理函數

參數
events: 一個或多個空格分隔的事件類型名稱
fn: 事件觸發時執行的函數，false值可做為函數的簡寫，表示返回false
selector: 選擇器字符串用于過濾器的觸發事件的選擇器元素的后代
data: 當一個事件被觸發時要傳遞給事件處理函數event.data的數據，event是自定義在處理函數的數據訪問名稱，用此名稱.data(引用關鍵字)對參數data目標數據進行引用; 通常data可以是Map名稱值對的形式，如果設置為key，則以值名稱進行訪問，如果傳入常量則必須設置其名稱.

示例

            var itBooks = [{"bookid":"BK100", "title":"Java核心基礎", "price":69},
            {"bookid":"BK110", "title":"Oracle應用", "price":90},
            {"bookid":"BK120", "title":"C#語言入門", "price":60},
            {"bookid":"BK130", "title":"Ajax異步處理", "price":59}
            ];

            $(function(){
                $('p button:first').on('click',{itBooks}, function(e){
                    var bookArr = e.data.itBooks;
                    $(bookArr).each(function(i){
                        if (this.price <= 60) 
                            alert(this.title + " will be bought");
                        else
                            alert(this.title + " is too expensive");
                    });
                });
            });

            //函數也可以是一個變量名稱，用另一個變量接收
            var f1 = function sum(e){
                alert('the sum is'+ (e.data.n+e.data.m));
            }

            var f2 = function multiply(e){
                alert('the multiply result is'+ (e.data.n * e.data.m));
            }

            $(function(){
                $('p button:eq(1)').on({'click':f1, 'keydown':f2},{'n':45, 'm':55});
                /*$('p button:eq(1)').on({'click':function(e){
                    alert('the sum is'+ (e.data.n+e.data.m));
                }, 'keydown':function(E){
                    alert('the multiply result is'+ (E.data.n * E.data.m));
                }},{'n':45, 'm':55});*/
            });

3. bind(type,[data], fn|false)

函數定義
為匹配的元素提供事件綁定事件處理函數，可以使用on函數代替此函數。

參數
type: 一個或多個由空格分隔多個事件字符串
data: 作為event.data屬性值傳遞給事件對象的額外數據對象
fn: 事件發生時調用執行的js函數
false: 將第三個參數設置為false會默認的動作失效，多用于表單提交

示例

            var click2 = function(){
                alert('點擊事件被執行');
            }
            
            $(function(){
                $('.b_1').bind('click',function(){
                    $(this).text('mouse click');
                    $(this).css('backgroundColor','red');
                }).bind('mouseover',function(){
                    $(this).text('mouseover');
                    $(this).css('backgroundColor','lime');
                }).bind('mouseout',function(){
                    $(this).text('mouseout');
                    $(this).css('backgroundColor','skyblue');
                }).bind('click',click2);
            });

            /*解綁按鈕3事件*/
            $(function(){
                $('label').on('click', function(){
                    $('.b_1').unbind('click', click2); //解綁所有按鈕3上的曾經使用bind注冊的事件
                });
            });

            /*當提交表單時，如果用戶名文本框為空則禁止提交表單*/
            $(function(){
                $('form').bind('submit', function(){
                    if ($('#a').val() === '') {
                        alert('用戶名稱不能為空');
                        return false;
                    }
                    return true;
                });
            });

            /*為按鈕1注冊一個一次性鼠標點擊事件，改變按鈕的文本*/
            var content = "one time click event";
            $(function(){
                $('p button:first').one('click',{content},function(e){
                    alert("one click event happen");
                    this.innerText = e.data.content;
                });
            })

3.1 unbind解綁事件

調用事件源的unbind函數可以將對象使用bind函數綁定的事件解綁。

4. one(type,[data], fn)

函數定義
為每一個匹配元素的特定事件綁定一個一次性的事件處理函數，其他和bind函數相同。

5. hover([overFn],outFn)

函數定義
模擬懸停事件。 當鼠標移動到一個匹配的元素上面時， 會觸發指定的第一個函數，當鼠標移出這個元素時，會觸發指定的第二個元素。

參數
overFn:鼠標移到元素上要觸發的函數
outFn: 鼠標移出元素要被觸發的函數

示例

            //為h2注冊一個鼠標進入和移除事件改變div圖片的url
            $(function(){
                $('h2').hover(function(){
                    this.innerText = "img1";
                    $('div img').attr('src', img1);
                }, function(){
                    this.innerText = "img2";
                    $('div img').attr('src', img2);
                });
            });

6. focus([[data],fn]); blur([[data],fn])

函數定義
focus控件獲取焦點事件綁定函數
blur控件失去焦點事件綁定函數

參數
data: 傳遞到函數的數據
fn: 執行函數

示例

             $(function(){
                $('#username').focus(function(){ //獲取焦點
                    this.value = "";
                }).blur(function(){ //失去焦點
                    if ($.trim(this.value) === '') {
                        $('#usertip').text('用戶名必須填寫');
                        $('#usertip').css('color','red');
                    }else if($.trim(this.value).length <3 || $.trim(this.value).length > 16){
                        $('#usertip').text('長度不符');
                        $('#usertip').css('color','red');
                    }else{
                        $('#usertip').text('輸入正確');
                        $('#usertip').css('color','green');
                    }
                });
             });

7. change([[data],fn])

函數定義
觸發每個匹配元素的change事件。此函數會調用綁定到change事件的所有函數，包括瀏覽器的默認行為。可以通過在某個綁定的函數中返回false來防止觸發瀏覽器的默認行為。change事件會在元素失去焦點時觸發，也會當其值在獲得焦點后改變時觸發。

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的change事件中綁定的處理函數。

示例

            var bookData = [{"bookType":"java","desc":"Java技術",
                            "bookList":[{"id":"hxjc","title":"核心基礎"},
                                        {"id":"advance","title":"Java高級"},
                                        {"id":"framework","title":"框架應用"},
                                        {"id":"ormys","title":"ORM映射"}]},
                            {"bookType":"dataBase","desc":"數據庫技術",
                            "bookList":[{"id":"mysql","title":"mysql應用"},
                                        {"id":"db2","title":"db2應用"},
                                        {"id":"oracle","title":"oracle基礎"},
                                        {"id":"sqlserver","title":"sqlServer基礎"}]}
                            ];
            /*根據用戶選擇的不同書籍類別，動態填充書籍下拉列表選項*/
            $(function(){
                //填充書籍列表框
                $(bookData).each(function(i){

                    var option = $("<option></option>");
                    option.val(this.bookType);
                    option.text(this.desc);
                    $('#selBookType').append(option);


                });


                //為書籍列表注冊change事件
                $('#selBookType').change(function(){
                    //獲取以選擇列表項的value值
                    var selectedVal = $('#selBookType').val(); 
                    //清空列表項，只保留一項
                    $('#selBookList')[0].options.length = 1;
                    $(bookData).each(function(i){
                        //alert('OK');

                        //拿到相同值
                        if (this.bookType === selectedVal) {
                            //拿到當前的bookList
                            var bookArr = this.bookList; //獲取當前類別下所有書籍
                            $(bookArr).each(function(i){ //遍歷書籍填充列表框

                                var option = $("<option></option>");
                                option.val(this.id);
                                option.text(this.title);
                                $('#selBookList').append(option);

                            });
                            return false;
                        }
                        

                    });

                });

            });

8. click([[data],fn]); dblclick([[data],fn])

函數定義
click: 綁定元素的鼠標單擊動作
dblclick: 綁定元素的雙擊動作

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的click事件中綁定的處理函數。

示例

            /*雙擊圖片顯示下一張*/
            $(function(){
                //加載完成后設置img的src顯示第一張圖片
                $('#img_obj').attr('src',imgsURL[0]);

                //為img添加dbclick雙擊綁定事件
                $('#img_obj').dblclick(function(){
                    var currentURL = $('#img_obj').attr('src'); //獲取當前img的src

                    $(imgsURL).each(function(i){

                        if (currentURL === imgsURL[i]) {
                            /*判斷是否是最后一個圖片*/
                            if (i === imgsURL.length-1) {
                                $('#img_obj').attr('src',imgsURL[0]);
                                return false;
                            }
                            $('#img_obj').attr('src',imgsURL[i+1]);
                            return false;
                        }

                    });
                });
            });

9. 鍵盤事件

函數定義
keydown 按下鍵盤上某個鍵時觸發事件函數（支持所有鍵，包括組合鍵，小鍵盤數字無法顯示在輸出源）
keypress 按下鍵盤上某個鍵時觸發事件函數（不支持功能鍵，支持shift組合鍵，不能獲取所有鍵keyCode）
keyup 按下某個鍵并在釋放此鍵后觸發事件函數（支持所有鍵，包括組合鍵，小鍵盤數字無法顯示在輸出源）

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的響應事件中綁定的處理函數。

示例

            $(function(){
                /*//測試keydown函數
                $('#keytest').keydown(function(e){
                    $('#keyCode').text(e.keyCode);
                });

                //測試keypress函數
                $('#keytest').keypress(function(e){
                    $('#keyCode').text(e.keyCode);
                });*/

                //測試keyup函數
                $('#keytest').keyup(function(e){
                    $('#keyCode').text(e.keyCode);
                });

                /*按鍵結束，驗證用戶名長度是否符合要求(3-16)*/
                $('#username').keyup(function(e){
                    if ($('#username').val().trim().length <3 ||
                        $('#username').val().trim().length >16) {
                        $('#tip').text('用戶名長度不符合要求，長度必須位于3-16之間');
                    }else
                        $('#tip').text('用戶名長度符合要求');
                });
                
            });

10. 鼠標事件

函數定義
mousedown 綁定在元素上鼠標按下時事件處理函數
mouseenter 綁定鼠標從元素上滑過事件處理函數 通常和mouseleave一同使用，適用于子元素
mouseleave 綁定鼠標從元素上離開事件處理函數 通常和mouseenter一同使用，適用于子元素
mousemove mousemove事件通過鼠標在元素上移動來觸發。事件處理函數會被傳遞一個變量 -- 事件對象，其.clientX或pageX 和 .clientY或pageY屬性代表鼠標的坐標
mouseout mouseout事件在鼠標從元素上離開會觸發
mouseover mouseover會在鼠標移入對象時觸發
mouseup mouseup事件會在鼠標點擊對象釋放時觸發

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的響應事件中綁定的處理函數。

示例

            $(function(){
                /*為表格中的數據行添加鼠標進入和移除事件，改變當前選擇行的背景色
                鼠標進入顯示淺藍色背景色，鼠標移除恢復原來顏色*/
                $('table tr:gt(0)').mouseover(function(e){
                    $(this).css('background-color','#0088dd');
                }).mouseout(function(e){
                    $(this).css('background-color','#fff');
                }).mousedown(function(e){
                    alert("按鍵編號: "+e.button);
                    alert("當前坐標: "+e.clientX+"=="+e.pageY);
                });
            });

11. select([[data],fn])

函數定義
select用來為元素綁定被選擇事件的函數，通常在選中后鼠標釋放時激發此事件，通常只適用于可編輯的文本組件，如文本組，文本區，密碼框等。

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的響應事件中綁定的處理函數。

示例

        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
        <script type="text/javascript">

            /*
            實現文本被選中后復制到剪貼板
            */
            $(function(){
                $('textarea').select(function(){
                    /*獲取已經選擇的內容*/
                    //var selected = window.getSelection().toString();
                    //alert(typeof selected);
                    /*使用命令方式復制到剪切板, 部分瀏覽器支持*/
                    //document.execCommand("Copy");

                });

                var clip = new ClipboardJS("#copy",{

                    text:function(but){
                        alert(but.innerText);
                        alert("成功復制到剪切板");
                        return window.getSelection().toString();
                    }

                });

            });
            
        </script>

12. submit([[data],fn])

函數定義
通常只適用于form元素，此元素通常發生在表單提交動作時或任何點擊表單中提交按鈕或form對象調用submit函數將觸發此事件.

參數
data: 傳遞到函數的數據。
fn: 在每一個匹配元素的響應事件中綁定的處理函數。

示例

        <script type="text/javascript">

            $(function(){
                /*為表單注冊submit事件，在提交表單時實現表單數據檢驗*/
                $('#f0').submit(function(){
                    /*實現對姓名的驗證*/
                    if ($('#name').val().trim() === "") {
                        alert('姓名必須填寫'); //驗證不符合要求
                        return false;
                    }
                        return true;
                })

            });
            
            function validForm(){ //對住址進行驗證
                if ($('#address').val().trim() === "") {
                    alert('住址是必須填寫的');
                    return false;
                }
                    return true;
            }
        </script>
    </head>
    
    <body id="body_">

        <form id="f0" action="select函數.html" onsubmit="return validForm()">
            <label>姓名: </label><input id="name" type="text" name="name"><br>
            <label>地址: </label><input id="address" type="text" name="address"><br>
            <input type="submit" value="submit">
        </form>

    </body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 230,048評論 6贊 542
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 99,414評論 3贊 429
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 178,169評論 0贊 383
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,722評論 1贊 317
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 72,465評論 6贊 412
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,823評論 1贊 328
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,813評論 3贊 446
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 43,000評論 0贊 290
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 49,554評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,295評論 3贊 358
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,513評論 1贊 374
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 39,035評論 5贊 363
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,722評論 3贊 348
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,125評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,430評論 1贊 295
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 52,237評論 3贊 398
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 48,482評論 2贊 379