事件的处理与事件的委托

1. 事件绑定(2种)：

  * eventName(function(){})

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

  * on(eventName, funcion(){})

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

  * 优缺点:

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

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

2. 事件解绑：

  * off(eventName)

3. 事件的坐标

扫描二维码关注公众号，回复： 9416182 查看本文章

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

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

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

4. 事件相关处理

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

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

<script type="text/javascript">
  
//    需求：
//    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//组织事件的默认行为
                
                
            }
        })



</script>

1. 事件委托:

  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理

  * 监听回调是加在了父辈元素上

  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)

  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2. 事件委托的2方:

  * 委托方: 业主  li

  * 被委托方: 中介  ul

3. 使用事件委托的好处

  * 添加新的子元素, 自动有事件响应处理

  * 减少事件监听的数量: n==>1

4. jQuery的事件委托API

  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

  * 移除事件委托: $(parentSelector).undelegate(eventName)

<script>
    $('ul').delegate('li','click',function(){
        //console.log(this)//这里的this指的是发生事件的对象
        this.style.background = 'red'
    })
    $('#btn1').click(function(){
        $('ul').append('<li>new li</li>')
    })
    //移除事件委托
    $('#btn2').click(function(){
       // $('ul').delegate(')

    })
</script>