jQuery事件模型

• 提供了统一的事件处理方法
• 允许添加多个事件处理函数
• 使用标准的事件名称(不带on)
• 事件实例做为事件处理函数的第一个参数
• 标准化事件实例最常用的属性
• 提供了统一的事件取消和阻止默认行为的方法

添加事件处理

• on(eventType[,selector][,data],handler)   eventType事件名称，多个用空格隔开。handler事件处理函数。

<h2>title</h2>
<div class="item">Lorem ipsum dolor sit amet</div>
<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>

<div id="p1">
    <div id="p1-1">
        <div id="p1-1-1">
            <div id="p1-1-1-1">
                <p>
                    DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    //.on('click',function(event)一样
    $(function(){
        $('p').on('click',null,null,function(event){
            console.log('p clicked');
        }).on('click',null,null,function(event){
            console.log('p clicked2');
        }).on('click',null,null,function(event){
            console.log('p clicked3');
        })
    })

</script>

<script>
    //只是id为p1-1的元素点击触发
    $(function(){
        $('div').on('click','#p1-1',function(event){
            console.log('p clicked');
        })
    })

</script>

 点击一次，p clicked出现了4次。

script>
    $(function(){
        $('div').on('click',function(event){
            console.log('p clicked');
        })
    })

</script>

<script>
    $(function(){
        $('div').on('click','#p1-1',{foo:'bar'},function(event){
            console.log('p clicked %o',event.data);
        })
    })

</script>

<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>

<script>
    $(function(){
       /* $('li').on('click',function(event){
            console.log('%o li clicked',$(this));
        })*/

        //事件委托：委托他的父元素ul去执行，当执行的时候，他会看目标是什么决定执行什么样的事件.十分便捷，提高程序的性能，降低复杂度。
        //事件冒泡机制，当我们在底下点击的时候，会往上发生冒泡的。ul元素时，我们会获取到target。
        //可以对event.target判断。
        $('ul').on('click',function(event){
            console.log('%o clicked',$(event.target));
        })
    })

</script>

 上面的两种方法的执行结果如下所示：

同一方法和属性：

• 阻止冒泡：stopPropagation()
• 阻止默认行为：preventDefault()
• 阻止冒泡和默认行为：return false

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

所有支持的事件：

• blur
• change
• click
• dblclick
• error
• focus
• focusin
• focusout
• keydown
• keypress
• keyup
• load
• unload
• mousedown
• mouseenter
• mousemove
• mouseleave
• mouseout
• mouseover
• mouseup
• ready
• resize
• scroll
• select
• submit

一次性的事件处理：执行完一次就被销毁。

• one(eventType[,selector][,data],handler)和on一样

移除事件处理：

• off(eventType[,selector][,handler])和on一样

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

$('p').on('click',function(){
            console.log('p clicked');
        }).on('click',function(){
            console.log('p clicked2');
        })
        $('p').off('click');// 只要事件是click，两个事件都off了

//只停止clicked2
        var clicked2=function(){
            console.log('p clicked2');
        }
        $('p').on('click',function(){
            console.log('p clicked');
        }).on('click',clicked2)
        $('p').off('click',clicked2);

 var clicked2=function(){
            console.log('p clicked2');
        }
        $('p').on('click',function(){
            console.log('p clicked');
        }).on('click',clicked2).on('mouseover',function(){
            console.log('mouseover');
        })
        $('p').off('click mouseover');//或者是$('p').off();

事件实例对象：

事件实例对象的属性：

altKey                data

bubbles              detail

button                 delegateTarget

cancelable          eventPhase

charCode            metaKey

clientX                namespace

clientY                offsetX

ctrlKey                offsetY

currentTarget

originalTarget       screenY

originalEvent        shiftKey

pageX                  target

pageY                  timeStamp

prevValue            type

relatedTarget       view

result                   which

screenX

红色字体是有浏览器兼容问题的。而且jQuery对浏览器的兼容性问题做了处理。

事件实例对象的方法：

• preventDefault()    阻止浏览器的默认事件
• stopPropagation()  阻止冒泡行为
• stopImmediatePropagation()  立刻阻止事件处理函数并防止事件冒泡

 $(function(){
        $('div').on('click',function(event){
            event.stopPropagation();
          /*  event.stopImmediatePropagation();*/
            console.log('clicked %o',$(this));
        }).on('click',function(event){
            console.log('clicked2 %o',$(this));
        })

event.stopImmediatePropagation();

一个阻止了冒泡，另一个不光阻止了冒泡还阻止了本身的后续绑定的事件处理函数。

• isDefaultPrevented()
• isPropagationStopped()
• isImmediatePropagationStopped()

这三种方法对上面那三种方法是否执行做了检测。一旦调用了，这三个方法则返回true。

触发事件：

• trigger(eventType[,data])
• triggerHandler(eventType[,data])

区别：triggerHandler相比trigger

• 不会触发浏览器默认事件
• 不会产生事件冒泡
• 只触发jQuery对象集合中第一个元素的事件处理函数。不会触发集合中每一个元素的事件处理函数
• 返回的是事件处理函数的返回值，而不是jQuery对象

triggerHandler主要触发事件处理函数。一般用trigger.

<body>
<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>
<button id="all">全部标记为已读</button>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function(){
        $('li').on('click',function(event){
            console.log('已读 %o',$(this))
            return '123'
        })
        $('#all').on('click',function(){
            $('li').trigger('click');
        })
    })
</script>

</body>

点击button，

ipt>
    $(function(){
        $('li').on('click',function(event){
            console.log('已读 %o',$(this))
            return '123'
        })
        $('#all').on('click',function(){
            $('li').triggerHandler('click');
        })
    })

<script>
    $(function(){
        $('li').on('click',function(event){
            console.log('已读 %o',$(this))
            return '123'
        })
        $('#all').on('click',function(){
            console.log($('li').triggerHandler('click'));
        })
    })
</script>

<script>
    $(function(){
        $('li').on('click',function(event){
            console.log('已读 %o',$(this))
            return '123'
        })
        $('#all').on('click',function(){
            console.log($('li').trigger('click'));
        })
    })
</script>

返回值是jQuery元素集合。

<script>
    $(function(){
        $('li').on('click',function(event){
            console.log('已读 %o',$(this))
            return '123'
        })
        $('#all').on('click',function(){
            console.log($('li').trigger('click').trigger('click'));
        })
    })
</script>

<body>
<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>
<button id="all">全部标记为已读</button>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function(){
        $('li').on('click',function(event,arg1,arg2){
            console.log('已读 %o',$(this))
            console.log(arg1)
            console.log(arg2)
            return '123'
        })
        $('#all').on('click',function(){
            console.log($('li').trigger('click',[1,2]));
        })
    })
</script>

</body>

$('li').on('click',function(event,arg1,arg2){
            console.log('已读 %o',$(this))
            console.log(arg1)
            console.log(arg2)
            return '123'
        })
        $('#all').on('click',function(){
            console.log($('li').trigger('click',[1,2]));
        })

也可以使用click方法。但是click方法不能传参数，要传参数还是用on方法。

$('li').on('click',function(event,arg1,arg2){
            console.log('已读 %o',$(this))
            console.log(arg1)
            console.log(arg2)
            return '123'
        })
$('#all').on('click',function(){
            console.log($('li').trigger('click',[1,2]));
})

 上面的click就是一个快捷方法

快捷方法：快速地定义和触发事件。

blur                                         keydown

change                                   keypress

click                                        keyup

dbclick

focus

focusin

focusout

mousedown                         ready

mouseenter                         resize

mouseleave                         scroll

mousemove                        select

mouseout                            submit

mouseover

mouseup

hover方法：弥补onmouseover和onmouseout的不足。

• hover(enterHandler,leaveHandler)
• hover(handler)

<style>
    .outer{
        width: 200px;
        height: 200px;
        padding: 20px;
        color: #fff;
        background-color: green;
    }
    .inner{
        width: 100px;
        height: 100px;
        margin: 30px auto;
        padding: 20px;
        color: #ffffff;
        background-color: orange;
    }
    #outer{
        margin-top: 50px;
    }
</style>
<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 type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.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);
    })

</script>

</body>

把鼠标放在outer1中，出现mouseover on outer1。把鼠标放在inner1中，出现mouseout on outer1      mouseover on inner1。

这不是我们的本意，我们的本意是不出现mouseout on outer1。所以用到mouseenter mouseleave

$('#outer2').hover(report);
$('#inner2').hover(report);

mouseenter on outer2
mouseenter on inner2
mouseleave on inner2
mouseleave on outer2

自定义事件：

• on(customEvent)
• trigger(customEvent)

<body>
<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>
<button id="all">全部标记为已读</button>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    $(function(){

        $('li').on('markAsRead',function(event){
            console.log('已读 %o',$(this))
        }).on('click',function(){
            $(this).trigger('markAsRead');
        })

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

</body>

点击li出现已读 m.fn.init [li.item1, context: li.item1]

点击按钮：

事件命名空间：

eventName.namespace,组织和区分代码的。

<body>

<ul>
    <li class="item1">item1</li>
    <li class="item2">item2</li>
    <li class="item3">item3</li>
    <li class="item4">item4</li>
    <li class="item5">item5</li>
    <li class="item6">item6</li>
    <li class="item7">item7</li>
    <li class="item8">item8</li>
    <li class="item9">item9</li>
</ul>

<button id="even">点击偶数</button>
<button id="odd">点击奇数</button>
<button id="all">全部点击</button>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>

    $(function(){
        $('li:odd').on('click.even',function(e){
            console.log('%o 偶数',$(this))
        })
        $('li:even').on('click.odd',function(e){
            console.log('%o 奇数',$(this))
        })
        $('li').on('click.all',function(e){
            console.log('%o 您点击了全部',$(this))
        })
        $('li').eq(0).on('click.even.0',function(e){
            console.log('%o 0',$(this))
        })
        $('li').eq(0).on('click.all.0',function(e){
            console.log('%o 0',$(this))
        })

        //点击even会把even.0也触发也就是会把它和它子元素触发，这就是命名空间的好处。
        $('#even').click(function(){
            $('li').trigger('click.even');
        })
        $('#odd').click(function(){
            $('li').trigger('click.odd');
        })

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

</body>

点击item1：

点击item2 item3：

点击button，点击偶数：

点击button，点击奇数：

点击button，点击全部：

但是任意点击了item1或item2....,都会出现您点击了全部。

删除命名空间：

//  $('li').off();//怎么点击都没有
        //删除命名空间
        $('li').off('.even');

总结：

• 浏览器的事件模型
• jQuery的事件处理机制和方式
• 事件处理+元素操作和元素选择