집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 이벤트 객체의 속성에 대한 자세한 예

jQuery 이벤트 객체의 속성에 대한 자세한 예

小云云원래의: 2017-12-29 09:56:041342검색

이 글은 주로 jQuery 이벤트 객체의 속성과 메소드를 자세히 소개하고 있으며, 관심 있는 친구들이 참고하면 도움이 될 것입니다.

jQuery 이벤트 객체의 속성과 메소드는 참고용입니다. 구체적인 내용은 다음과 같습니다

이벤트 객체의 속성과 메소드는 많지만 여기서는 자주 사용하는 것만 소개하겠습니다. 주로 기능과 차이점에 대해 이야기합니다

event .type: 이벤트 유형을 가져옵니다

요소를 트리거하는 이벤트 유형

$("a").click(function(event) {
 alert(event.type); // "click"事件
});

event.pageX 및 event.pageY: 페이지를 기준으로 한 마우스의 현재 좌표를 가져옵니다

이 두 속성을 통해 현재 페이지에 있는 요소의 좌표 값을 결정할 수 있습니다. 즉, 문서의 왼쪽 가장자리(왼쪽)와 (위)를 기준으로 마우스 위치 사이의 거리는 간단히 말해서 페이지의 왼쪽 상단, 즉 페이지를 기준점으로 삼고 슬라이더의 움직임에 따라 변경되지 않습니다

event.preventDefault() 메소드: 기본 동작 방지

실행 후 많이 사용됩니다. 이 방법을 사용하면 링크(태그)를 클릭하면 브라우저가 새 URL로 이동하지 않습니다. event.isDefaultPrevented()를 사용하여 해당 이벤트 개체에서 이 메서드가 호출되었는지 확인할 수 있습니다.

event.stopPropagation() 메서드: 이벤트가 버블링되는 것을 방지합니다.

이벤트가 버블링되는 것을 방지하기 위해 이벤트가 버블링될 수 있습니다. DOM 트리, 즉 트리거되지 않은 모든 이전 요소에 대한 이벤트 처리 기능

event.which: 마우스 클릭 시 어떤 마우스 버튼이 클릭되는지 가져오기

event.which는 event.keyCode와 event.charCode를 결합하여 표준화되었습니다. . event.또한 왼쪽 버튼 보고 1, 가운데 버튼 보고 2, 오른쪽 버튼 보고 3을 사용하여 버튼 누르기(mousedown 및 mouseupevents)를 정규화합니다.

event.currentTarget: 이벤트 버블링 중 현재 DOM 요소

트리거되는 현재 DOM 객체 이벤트는 이것과 동일합니다.

이것과 event.target의 차이점:

js의 이벤트는 버블링되므로 변경될 수 있지만 event.target은 변경되지 않습니다. 항상 이벤트를 직접 받아들이는 대상 DOM 요소입니다. ;

.this와 event.target은 모두 DOM 객체입니다

jquey에서 메소드를 사용하려면 이를 jquery 객체로 변환할 수 있습니다. 예를 들어 this 및 $(this) 사용, event.target 및 $(event.target) 사용

참조 코드:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style>
  .left p,
  .right p {
    width: 500px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    float: left;
    border: 1px solid #ccc;
  }
  
  .left p {
    background: #bbffaa;
  }
  
  .right p {
    background: yellow;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h3>事件对象的属性与方法</h3>
  <p class="left">
    <p id="content">
      外层p元素
      <br />
      <span style="background: silver;">内层span元素</span>
      <br /> 外层p元素
    </p>
    <br />
    <p id="msg"></p>
  </p>
  <script type="text/javascript">
  //为 <span> 元素绑定 click 事件 
  $("span").click(function() {
    $("#msg").html($("#msg").html() + "<p>内层span元素被单击</p>");
  });
  //为 Id 为 content 的 <p> 元素绑定 click 事件 
  $("#content").click(function(event) {
    $("#msg").html($("#msg").html() + "<p>外层p元素被单击</p>");
    event.stopPropagation(); //阻止事件冒泡 
  });
  //为 <body> 元素绑定 click 事件 
  $("body").click(function() {
    $("#msg").html($("#msg").html() + "<p>body元素被单击</p>");
  });
  </script>
</body>

</html>

클릭 범위는 콘텐츠의 클릭 이벤트까지 버블링됩니다. 을 클릭한 후 내용을 입력합니다. click 함수에서 버블링 방지 문이 실행되므로 body에 버블링되지 않으므로 범위 클릭 시 body 요소가 클릭되지 않습니다.

$('#msg').html($('#msg').html()+ "

내부 범위 요소를 클릭했습니다

") //원본 메시지에 추가
$('#msg').html("

내부 스팬 요소를 클릭했습니다

"); //원본 콘텐츠 교체

jQuery 이벤트 객체의 속성에 대한 자세한 예

관련 기사