事件

1. 事件绑定(2种)：

  * eventName(function(){})

    绑定对应事件名的监听, 例如：$('#div').click(function(){});

  * on(eventName, funcion(){})

    通用的绑定事件监听, 例如：$('#div').on('click', function(){})

  * 优缺点:

    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持

    on: 编码不方便, 可以添加多个监听, 且更通用

2. 事件解绑：

  * off(eventName)

3. 事件的坐标

  * event.clientX, event.clientY  相对于视口的左上角

  * event.pageX, event.pageY  相对于页面的左上角

  * event.offsetX, event.offsetY 相对于事件元素左上角

4. 事件相关处理

  * 停止事件冒泡 : event.stopPropagation()

  * 阻止事件默认行为 : event.preventDefault()

//    1. 给.out绑定点击监听(用两种方法绑定)
        $('.out').click(function(){
            console.log('click out')
        })
        $('.out').on('click',function(){
            console.log('on click out1')
        })
//    2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
        $('.inner').mouseenter(function(){
            
        }).mouseleave(function(){

        })
        
        $('.inner').on('mouseenter',function(){

        }).on('mouseleave',function(){

        })
        $('.inner').hover(function(){

        },function(){

        })
//    3. 点击btn1解除.inner上的所有事件监听
        $('#btn1').click(function(){
            $('.inner').off()
        })
//    4. 点击btn2解除.inner上的mouseover事件
        $('#btn2').click(function(){
            $('.inner').off('mouseover')
        })
//    5. 点击btn3得到事件坐标
        $('#btn3').click(function(){
            console.log(event.offsetX,event.offsetY)//原点为事件元素左上角
            console.log(event.clientX,event.clientY)//原点为窗口的左上角
            console.log(event.pageX,event.pageY)    //原点为页面的左上角
        })

//    6. 点击.inner区域, 外部点击监听不响应
        $('.inner').click(function(event){//声明event
            //停止事件冒泡
            event.stopPropagation()
        })    
//    7. 点击链接, 如果当前时间是偶数不跳转
        $('#test4').click(function(event){
            if(Date.now()%2==0){
                event.preventDefault//组织事件的默认行为
                
                
            }
        })

事件委托：

将多个子元素的事件叫给父元素代为处理，

监听会调用是加在父元素上

当操作任何一个子元素的时候，事件会冒泡到父元素上

父元素不会直接处理，根据event.target得到发生事件的子元素，通过这个子元素调用事件回调函数

（事件委托给父元素，需要找的时候先冒泡到父元素上，然后再通过这个子元素调用事件的回调函数）

好处：

新增的元素自动有事件相应处理

减少事件监听的数量