[웹 프런트 엔드] 028의 jQuery 이벤트

이벤트에 대한

바인딩 1. 이벤트

바인딩 1.1 기본

// 单击与双击事件
$(element).click(function(){});
$(element).dblclick(function(){});

// 加载完毕事件
$(document).ready(function(){});
$(function(){});

1.2 바인딩 방법

$(element).bind('click', function(){}); // 绑定事件
$(element).unbind();                    // 解除事件绑定

바인딩 1.3 동적

• 참고 :이 방법에 살고있는이 높은 버전 (> 1.8.3)의 jQuery에서 제거, 사용하는 버전을주의

$(element).live('click', function(){});

2. 트리거 이벤트

2.1 트리거 표현

• 우리는 요소의 이벤트를 트리거 할 때 사용할 수 있습니다 trigger
• 참고 : 이벤트의 유형에 필요한 요소를

$(element).trigger('click');            // 必须指定元素的事件类型，如此处的 click

2.2 정상 마우스 이벤트

행사	해당 이름
마우스 클릭 이벤트	딸깍 하는 소리
마우스 더블 클릭 이벤트를	dbclick
마우스 이동 이벤트를	마우스 오버
마우스 의 아웃 이벤트	로 마우스를
마우스 를 눌러 이벤트	mousedown
마우스 리프트 이벤트	mouseup에
마우스 이동 이벤트	MouseMove 이벤트

• 사용 예

$('div').mousedown(function(){
            console.log("鼠标被按下了");
        });

3. 이벤트 버블 링과 기본 동작

3.1 이벤트 버블 링

• 트리거 이벤트 요소하면 자동으로 혼란 페이지로 연결, 이벤트 동시 이벤트의 결과로 그 요소의 동일한 유형의 부모와 조상 레벨 트리거는 이벤트 우리는 거품 전화
• 이 시점에서 우리는 이벤트 처리기에서 요소 중 하나를 반환 할 수 있습니다 false방지하기 위해
• 주 :이 메소드는 jQuery를에 사용하는 것이 제한된다

3.2 기본 동작

• 페이지에서 기본 동작을 일부 요소와 같은
  • 링크를 클릭
  • 양식 제출
• 점프 이상의 요소가 제출됩니다, 이러한 행위는 "기본 행위"라고합니다
• 그러나, 이벤트에 바인딩 한 후, 먼저 첫 번째 이벤트를 수행 한 다음 기본 동작을 수행
• 우리는 단지 기본 동작을하지 않는 트리거 이벤트를하자 싶어하지만 경우에, 우리는 경우에 그 요소 반환 할 수 있습니다 false기본 동작을 방지하기를

<a href="https://www.cnblogs.com">点我去博客园</a>

$('a').click(function(){
    alert("单击事件被触发了");
    
    return false;                       // 阻止默认行为
});

4. 눌려 마우스 버튼의 현재 위치를 얻고

• 우리는 마우스와 키보드 이벤트를
• 때 트리거 이벤트, 우리는 경우 마우스의 위치 나 키보드 키 정보를 얻으려면
  • 첫째, 우리는 현재 이벤트가 필요로 이벤트 객체를 전달합니다event

$(element).click(function(e){
    // e for enent，类似于在 Python 中写 Class 时要加 self
    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于浏览器窗口
    var x = e.clientX;
    var y = e.clientY;

    // 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于文档
    var _x = e.pageX;
    var _y = e.pageY;
});

$(element).keydown(function(e){
    // 可以打印 e 对象，或者直接使用该对象中的 keyCode 属性来获取按键信息
    var key = e.keyCode;
    console.log(key);
});