ホームページ > 記事 > ウェブフロントエンド > jQueryイベントオブジェクトのプロパティの詳細例

jQueryイベントオブジェクトのプロパティの詳細例

小云云オリジナル: 2017-12-29 09:56:041285ブラウズ

この記事では主に jQuery イベントオブジェクトのプロパティとメソッドを詳しく紹介します。興味のある方はぜひ参考にしてください。

jQueryイベントオブジェクトのプロパティとメソッドは参考までに。具体的な内容は以下の通りです

イベントオブジェクトの属性とメソッドはたくさんありますが、ここではよく使うものをいくつか紹介します。主に機能と違いについて話します

event .type: イベントの種類を取得します

要素をトリガーするイベントの種類

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

event.pageX とevent.pageY: ページに対するマウスの現在の座標を取得します

これら 2 つの属性を通じて、現在のページ上の要素の座標値を決定できます。ドキュメントの左端 (左端) と (上端) を基準としたマウスの位置間の距離は、簡単に言えば、ページの左上隅、つまりページを基準点として使用し、スライダーの移動によって変化しません

event.preventDefault()メソッド: デフォルトの動作を防止します

これは実行後によく使用されます。この方法では、リンク（タグ）をクリックしても、ブラウザは新しい URL にジャンプしません。 event.isDefaultPrevented() を使用して、このメソッドが (そのイベントオブジェクト上で) 呼び出されたかどうかを判断できます

event.stopPropagation() メソッド: イベントのバブリングを防止します

イベントがバブリングするのを防ぐために、イベントをバブリングすることができますDOMツリー、つまり、トリガーされていない先行要素のイベント処理関数

event.that: マウスがクリックされたときにどのマウスボタンがクリックされたかを取得します

event.keyCodeとevent.charCodeを組み合わせたものが標準化されています。また、event.はボタンの押下 (マウスダウンおよびマウスアップイベント) を正規化し、左ボタンは 1、中ボタンは 2、右ボタンは 3 をレポートします

event.currentTarget : イベントバブリング中の現在の DOM 要素

トリガーされる現在の DOM オブジェクトイベントはこれと同等です。

this と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までバブリングしないため、spanをクリックしてもbody要素はクリックされません。

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

内側のspan要素がクリックされました

") //元のmsgに追加します

$('#msg').html("

内側のspan要素がクリックされました

"); //元のコンテンツを置き換えます

jQueryイベントオブジェクトのプロパティの詳細例

関連記事