jQuery--事件處理

大魚海棠

一、事件模型

1.瀏覽器事件模型
①DOM0級事件模型：只支持一個DOM事件處理函數(shù)
? <input type="button" onclick="doSomething()"/>
? input.onclick = function() { ... }
? event = event || window.event;
? var target = event.target || event.srcElement;
? …

代碼示例：

<body>
    <p id="example" onclick="console.log('Click');console.log('Click2');">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur.
    </p>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
    document.getElementById('example').onmouseover = function(event) {
        event = event || window.event;
        console.log('MouseOver: %o', event); //后面的事件會覆蓋前面的
    };
    document.getElementById('example').onmouseover = function(event) {
        console.log('MouseOver2: %o', event);
    };

    document.getElementById('p1').onclick = function() {
        console.log('p1');
    };
    document.getElementById('p1-1').onclick = function() {
        console.log('p1-1');
    };
    document.getElementById('p1-1-1').onclick = function() {
        console.log('p1-1-1');
    };
    document.getElementById('p1-1-1-1').onclick = function(e) {
        console.log('p1-1-1-1');
        //        e.cancelBubble = true;//阻止事件冒泡
        e.stopPropagation();//阻止事件冒泡
    };
    </script>
</body>

②DOM2級事件模型：事件不會覆蓋

addEventListener(eventType, listener, useCapture)
useCapture為false時跟DOM0級事件類似啊研，只冒泡不捕獲
為true時：只捕獲扫腺，不冒泡
attachEvent(eventName, handler)

DOM事件模型.jpg

代碼示例：

<body>
    <p id="example">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur.
    </p>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script>
    var element = document.getElementById('example');
    element.addEventListener('click', function(event) {
        console.log('Click1: %o', event);
    }, false);
    element.addEventListener('click', function(event) {
        console.log('Click2: %o', event);
    }, false);
    element.addEventListener('click', function(event) {
        console.log('Click3: %o', event);
    }, false);

    var useCapture = true;

    document.getElementById('p1').addEventListener('click', function() {
        console.log('p1');
    }, useCapture);

    document.getElementById('p1-1').addEventListener('click', function() {
        console.log('p1-1');
    }, useCapture);

    document.getElementById('p1-1-1').addEventListener('click', function() {
        console.log('p1-1-1');
    }, useCapture);

    document.getElementById('p1-1-1-1').addEventListener('click', function() {
        console.log('p1-1-1-1');
    }, useCapture);
    </script>
</body>

2.jQuery事件模型
? 提供了統(tǒng)一的事件處理方法
? 允許添加多個事件處理函數(shù)
? 使用標準的事件名稱（不帶on）
? 事件實例做為事件處理函數(shù)的第一個參數(shù)
? 標準化事件實例最常用的屬性
? 提供了統(tǒng)一的事件取消和阻止默認行為的方法

①添加事件處理

on(eventType[, selector][, data], handler)：在選擇的元素上綁定一個或多個事件
eventType：事件的名稱（多個名稱用空格分隔）
[, selector]：選擇器（事件委托時用到）
[, data]：數(shù)據(jù)（傳遞一些數(shù)據(jù)給事件處理函數(shù)疼燥，從事件event的data屬性中獲燃唷）
handler：事件處理函數(shù)
bind()、delegate() 肠虽、live()：過時

②統(tǒng)一方法和屬性
? 阻止冒泡： stopPropagation()
? 阻止默認行為： preventDefault()
? 阻止冒泡和默認行為：return false

③所有支持的事件
? blur
? change
? click
? dblclick
? error
? focus
? focusin
? focusout
? keydown
? keypress
? keyup
? load
? unload
? mousedown
? mouseenter
? mouseleave
? mousemove
? mouseout
? mouseover
? mouseup
? ready
? resize
? scroll
? select
? submit

④一次性的事件處理：只執(zhí)行一次
? one(eventType[, selector][, data], handler)

代碼示例：

<body>
    <h2>title</h2>
    <div class="item">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        //        $('p')
        //            .on('click', null, null, function (e) {
        //                console.log('p clicked'); //所有的p都綁定了
        //            })
        //            .on('click', function (e) {
        //                console.log('p clicked2');
        //            })
        //            .on('click', { foo: 'bar' }, function (e) {
        //                console.log('p clicked3 %o', e.data);//%o 在控制臺把對象顯示出來
        //            })
        //            .on('mouseover', function (e) {
        //                console.log('p mouseover');
        //            })
        //            .on('mouseover', function (e) {
        //                console.log('p mouseover2');
        //            })
        //            .on('click mouseover', function (e) {
        //                console.log('p click or mouseover');
        //            })

        //        $('ul').on('click', 'li.item2', function () {
        //            console.log('li clicked');
        //        })

        //        $('li').on('click', function (e) {
        //            console.log('Clicked: %o', $(this));
        //        })

        //        $('ul').on('click', 'li', function (e) {
        //            console.log('Clicked: %o', $(e.target));
        //        })

        //        $('div').on('click', function () {
        //            console.log(this.id);
        //        })
        //        $('p').on('click', function (e) {
        //            e.stopPropagation()
        //            console.log('clicked p');
        //        })

        //        $('p').on({
        //            click: function () {
        //                console.log('click');
        //            },
        //            mouseover: function () {
        //                console.log('mouseover');
        //            }
        //        })

        $('p').one('click', function(e) {
            console.log('clicked p');
        });
    });
    </script>
</body>

⑤移除事件處理
? off(eventType[, selector][, handler])
? off()

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur assumenda debitis fugiat laboriosam magni modi sequi, sint ullam! Ad consequatur cum excepturi modi nam quos. Dolor est laudantium minima ratione.</p>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        var clicked2 = function(e) {
            console.log('clicked2');
        };

        $('p').on('click', function(e) {
            console.log('clicked');
        }).on('click', clicked2).on('mouseover', function(e) {
            console.log('mouseover');
        });

        //        $('p').off('click') //不帶參數(shù) 移除所有事件處理
        //        $('p').off('mouseover')
        //        $('p').off('click mouseover')//移除多個
        //        $('p').off('click', clicked2)//移除特定的clicked2
    });
    </script>
</body>

二幔戏、事件實例對象

1.事件實例對象的屬性
altKey
bubbles
button
cancelable
charCode
clientX
clientY
ctrlKey
currentTarget
data
detail
delegateTarget
eventPhase
metaKey
namespace
offsetX
offsetY
originalTarget
originalEvent
pageX
pageY
prevValue
relatedTarget
result
screenX
screenY
shiftKey
target
timeStamp
type
view
which

2.事件實例對象的方法
? preventDefault()：阻止瀏覽器默認事件
? stopPropagation()：阻止冒泡
? stopImmediatePropagation()：立刻阻止事件處理函數(shù)并防止事件冒泡（阻止冒泡還阻止后續(xù)綁定的）
? isDefaultPrevented():對以上三個方法是否調(diào)用的一個檢測，調(diào)用了就返回true
? isPropagationStopped()
? isImmediatePropagationStopped()

代碼示例：

<body>
    <div id="p1">
        <div id="p1-1">
            <div id="p1-1-1">
                <div id="p1-1-1-1">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('div').on('click', function(e) {
            console.log('clicked: %o', $(this));
        });
        $('p').on('click', function(e) {
            e.stopPropagation();
            console.log('clicked1: p');
            console.log(e.isPropagationStopped());
        });
        $('p').on('click', function(e) {
            console.log('clicked2: p');
        });
    });
    </script>
</body>

3.觸發(fā)事件
? trigger(eventType[, data])：主動觸發(fā)事件
? triggerHandler(eventType[, data])

區(qū)別
triggerHandler 相比 trigger：
? 不會觸發(fā)瀏覽器默認事件税课；
? 不會產(chǎn)生事件冒泡闲延；
? 只觸發(fā)jQuery對象集合中第一個元素的事件處理函數(shù)；
? 返回的是事件處理函數(shù)的返回值韩玩，而不是jQuery對象垒玲。（所以不能使用鏈式語法）

代碼示例：

<body>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
    <button id="all">全部標記為已讀</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('li').on('click', function(e, arg1, arg2) {
            console.log('%o 已讀', $(this));
            console.log(arg1);
            console.log(arg2);
            return $(this);
        });

        $('#all').on('click', function() {
            console.log($('li').trigger('click', [1, 2]));
            console.log($('li').triggerHandler('click'));
        });
    });
    </script>
</body>

4.快捷方法
blur
change
click
dblclick
focus
focusin
focusout
keydown
keypress
keyup
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
ready
resize
scroll
select
submit

快捷方法的使用
? eventName([data,] handler)
? eventName()

代碼示例：

<body>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
    <button id="all">全部標記為已讀</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        $('li').click(function(e) {
            console.log('%o 已讀', $(this));
        });
        //        $('li').dblclick(function (e) {
        //            console.log('%o 又讀', $(this));
        //        })


        $('#all').on('click', function() {
            console.log($('li').click());
        });
    });
    </script>
</body>

5.hover方法
? hover(enterHandler, leaveHandler)
? hover(handler)

代碼示例：

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    .outer {
        width: 200px;
        height: 200px;
        padding: 20px;
        color: #fff;
        background-color: green;
    }
    
    .inner {
        width: 100px;
        height: 100px;
        margin: 30px auto;
        padding: 20px;
        color: #fff;
        background-color: orange;
    }
    
    #outer2 {
        margin-top: 50px;
    }
    </style>
</head>

<body>
    <div class="outer" id="outer1">
        Outer 1
        <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
        Outer 2
        <div class="inner" id="inner2">Inner 2</div>
    </div>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {
        function report(event) {
            event.stopPropagation();
            console.log(event.type + ' on ' + event.target.id);
        }

        $('#outer1').on('mouseover mouseout', report);
        $('#inner1').on('mouseover mouseout', report);
        $('#outer2').hover(report);
        $('#inner2').hover(report);
    });
    </script>
</body>

6.自定義事件
? on(customEvent)
? trigger(customEvent)

<body>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
    <button id="all">全部標記為已讀</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        $('li').on('markAsRead', function(e) {
            console.log('%o 已讀', $(this));
        });

        $('li').on('click', function(e) {
            $(this).trigger('markAsRead');
        });

        $('#all').on('click', function() {
            $('li').trigger('markAsRead');
        });
    });
    </script>
</body>

7.事件命名空間
? eventName.namespace

<body>
    <ul>
        <li class="item1">新聞標題-1</li>
        <li class="item2">新聞標題-2</li>
        <li class="item3">新聞標題-3</li>
        <li class="item4">新聞標題-4</li>
        <li class="item5">新聞標題-5</li>
        <li class="item6">新聞標題-6</li>
        <li class="item7">新聞標題-7</li>
        <li class="item8">新聞標題-8</li>
        <li class="item9">新聞標題-9</li>
    </ul>
    <button id="even">點擊偶數(shù)</button>
    <button id="odd">點擊奇數(shù)</button>
    <button id="all">全部點擊</button>
    <script src="../../../vendor/jquery-1.12.4.js"></script>
    <script>
    $(function() {

        $('li:odd').on('click.even', function(e) {
            console.log('%o 偶數(shù)', $(this));
        });

        $('li').eq(0).on('click.even.0', function(e) {
            console.log('%o 0', $(this));
        });

        $('li:even').on('click.odd', function(e) {
            console.log('%o 奇數(shù)', $(this));
        });

        $('#even').on('click', function() {
            $('li').trigger('click.even');
        });

        $('#odd').on('click', function() {
            $('li').trigger('click.odd');
        });

        $('#all').on('click', function() {
            //            $('li').trigger('click');
            $('li').trigger('click.even.0');
        });

        //        $('li').off('.even') 
    });
    </script>
</body>

最后編輯于：2018.08.30 15:07:12

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

人面猴
序言：七十年代末僻族，一起剝皮案震驚了整個濱河市顾翼，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌颅湘，老刑警劉巖击狮，帶你破解...
沈念sama閱讀 218,386評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件佛析，死亡現(xiàn)場離奇詭異，居然都是意外死亡帘不，警方通過查閱死者的電腦和手機说莫，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,142評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來寞焙，“玉大人储狭，你說我怎么就攤上這事〉方迹” “怎么了辽狈？”我有些...
開封第一講書人閱讀 164,704評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長呛牲。經(jīng)常有香客問我刮萌，道長，這世上最難降的妖魔是什么娘扩？我笑而不...
開封第一講書人閱讀 58,702評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任着茸，我火速辦了婚禮，結(jié)果婚禮上琐旁，老公的妹妹穿的比我還像新娘涮阔。我一直安慰自己，他們只是感情好灰殴，可當我...
茶點故事閱讀 67,716評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布敬特。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪伟阔。梳的紋絲不亂的頭發(fā)上辣之，一...
開封第一講書人閱讀 51,573評論 1贊 305
城市分裂傳說
那天，我揣著相機與錄音皱炉，去河邊找鬼怀估。笑死，一個胖子當著我的面吹牛娃承，可吹牛的內(nèi)容都是我干的奏夫。我是一名探鬼主播怕篷，決...
沈念sama閱讀 40,314評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼历筝，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了廊谓？” 一聲冷哼從身側(cè)響起梳猪，我...
開封第一講書人閱讀 39,230評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蒸痹，沒想到半個月后春弥，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,680評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡叠荠，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,873評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年匿沛，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片榛鼎。...
茶點故事閱讀 39,991評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡逃呼，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出者娱，到底是詐尸還是另有隱情抡笼，我是刑警寧澤，帶...
沈念sama閱讀 35,706評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布黄鳍，位于F島的核電站推姻，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏框沟。R本人自食惡果不足惜藏古，卻給世界環(huán)境...
茶點故事閱讀 41,329評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望忍燥。院中可真熱鬧拧晕，春花似錦、人聲如沸灾前。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,910評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至蔫敲，卻和暖如春饲嗽，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背奈嘿。一陣腳步聲響...
開封第一講書人閱讀 33,038評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工貌虾，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人裙犹。一個月前我還...
沈念sama閱讀 48,158評論 3贊 370
代替公主和親
正文我出身青樓尽狠，卻偏偏與公主長得像，于是被迫代替她去往敵國和親叶圃。傳聞我的和親對象是個殘疾皇子袄膏，可洞房花燭夜當晚...
茶點故事閱讀 44,941評論 2贊 355

jQuery--事件處理

一、事件模型

二幔戏、事件實例對象

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