Day04 (jQuery 이벤트, 이벤트 바인딩, demo 슬라이딩 잠금 해제)

jQuery 이벤트

원생 JS가 온을 가진 사건, 온을 빼면 jQ 사건.

1. 이벤트 클릭()을 클릭합니다.

 JS ， ；

        btn[0].onclick=function(){
            alert('a')
        }       
        btn[0].onclick=function(){
            alert('b')
        }

//jq dom 
//jq dom 
// ：$('#btn')[0];
// ：$('#btn').get(0);
                
//jq ， ， 
/*$(document).click(function(){
        alert('document');
});
btn.click(function(){
        alert('a')
});
btn.click(function(){
        event.stopPropagation();// 
        alert('b');
});
btn.click(function(){
        alert('a');
        event.stopPropagation();
        alert('b')
});*/

2. 이벤트 바인딩 데이터
국부 변수가 아니에요.

    btn.click(foo="abc",function(){
        alert(foo)
    });
    box.click(function(){
        alert(foo)
    });

3. hover () 이벤트: enter+leave 이벤트를 통합한 것과 같다

    box.mouseenter(function(){
        console.log(' ')
    });
    box.mouseleave(function(){
        console.log(' ')
    });

box.hover(function(){
    console.log(' ')
},function(){
    console.log(' ')
});

4. 키보드 누르기 이벤트

$(document).keydown(function(event){
        console.log(event.keyCode)
});

5. 창 크기 변경 이벤트

$(window).resize(function(){
    alert('s')
});

6. 페이지 스크롤 이벤트

$(window).scroll(function(){
    alert('s')
});

7. 텍스트 선택 이벤트

txt.select(function(){
    console.log('xiaoming');
});

이벤트 바인딩

// ：

$('#btn').click(function(){
        alert('s')
});

// on ， ， click function 
$('#btn').on('click',{foo:'a'},function(event){
        alert(event.data.foo)
});

// ， ， click， ， 

요소에 대한 이벤트 바인딩

$(document).on('click','li',function(){
    alert('s')
})

사건의 해결

$('#btn').on('click',function(){
        alert('s')
});
$('#btn').on('click',function(){
        alert('d')
});
$('#btn').off('click');

jq 이벤트가 연결된 이름 공간

$('#btn').on('click.abc',function(){
        alert('a');
});         
$('#btn').on('click.dfg',function(){
        alert('b');
});
$('#btn').off('click.adc');

on 이벤트는 jq1.7 버전 이후에 출현한 새로운 것입니다.1.7 이전에 우리는 모두bind로 사건을 귀속시켰다.1.7 이후에 on이 나타나서 bing 효과와 완전히 일치하고 효율이 좋아서 bind를 철저히 대체했다.
on은 여러 이벤트를 한 번에 연결할 수 있습니다.

$('#btn').on('click mouseenter',function(){
        alert('s');
})

이벤트 위임

//jq ： ， 

// 
    $('.box li').on('click',function(){
        $('.box2').append($(this).clone())
    });
                
// 
    $('.box').on('click','li',function(){
        console.log($(this).html())
    });

일회성 이벤트

$('button').one('click',function(){
    alert('s')
});

trigger () 대상이 연결된 이벤트와 기본 행동을 직접 실행합니다

$('button').click(function(){
    $('.ds').trigger('click')
});
*$('.ds').on('click',function(){
    $(this).css('background','cyan')
});

triggerHandler는 이벤트만 실행하고 기본 행위를 처벌하지 않습니다

$('button').click(function(){
    $('.ds').triggerHandler('click')
    // trigger ， ， 
    // ：from 
    // ： 
});*/

demo 슬라이딩 잠금 해제

        
            $(function(){
                var box = $('#box');
                var slider = $('#slider');
                var sp = $('#sp');
                
                slider.mousedown(function(e){
                    // 
                    var dx = e.clientX - box.offset().left;
                    var dsx = e.clientX;
                    // 
                    box.mousemove(function(e){
                        var sliderLeft = e.clientX - dsx;
                        slider.css('left',sliderLeft);
                        if(slider.position().left>=700){
                            slider.css('left','700px');
                        }
                        if(slider.position().left<=0){
                            slider.css('left','0px');
                        }
                    });
                });
                
                slider.mouseup(function(){
                    box.off('mousemove');
                    if(slider.position().left==700){
                        slider.css('display','none');
                        sp.css('display','block');
                    }
                    if(slider.position().left<700){
                        slider.css('left',0);
                    }
                });
                
                slider.mouseout(function(){
                    slider.mouseup()
                });
                
                
                
            });