jQuery 이벤트 객체의 속성에 대한 자세한 예-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

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

小云云

Dec 29, 2017 am 09:56 AM

jquery이벤트물체

이 글은 주로 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) 사용

참조 코드:

nbsp;html>



  <meta>
  <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></script>



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

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

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

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

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

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

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

관련 기사

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.