初窥JQuery(二) 事件机制(1)

下面是对“初窥JQuery(二) 事件机制(1)”文章的详细讲解。

事件机制概述

在网页中，当用户执行某些操作（如点击、鼠标移动等）时，会触发相应的事件。事件机制是指网页对这些事件做出响应的机制，而JQuery就是一种优秀的事件机制的实现方式。

JQuery通过封装事件处理函数和事件绑定方式，大大简化了页面开发过程，同时也提高了页面的响应速度和可维护性。

事件绑定

JQuery通过.on()方法实现事件绑定，该方法接收两个参数：事件类型和处理函数。例如：

$( "#btn1" ).on( "click", function() {
  console.log( "btn1被点击了" );
});

上述代码表示给id为btn1的元素绑定了一个点击事件处理函数。当该元素被点击时，会执行该处理函数并输出“btn1被点击了”。

事件处理

对于事件处理函数，可以通过JQuery提供的event参数来获取事件相关信息。例如：

$( "#btn1" ).on( "click", function(event) {
  console.log( "X轴坐标：" + event.pageX );
  console.log( "Y轴坐标：" + event.pageY );
});

上述代码表示当id为btn1的元素被点击时，输出该点击事件在页面上的X和Y轴坐标。

示例说明

下面以一个卡片翻转的示例来说明事件机制的应用。

首先需要在HTML中定义两个div元素，分别表示正面和背面，如下所示：

<div id="card">
  <div class="front">正面</div>
  <div class="back">背面</div>
</div>

接着需要在CSS中设置一个3D转换效果，使得点击时正面翻转成背面：

#card {
  width: 200px;
  height: 200px;
  position: relative;
}

#card .front,
#card .back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}

#card .front {
  background-color: blue;
  transform: rotateY(0deg);
}

#card .back {
  background-color: orange;
  transform: rotateY(180deg);
}

#card.flipped .front {
  transform: rotateY(180deg);
}

#card.flipped .back {
  transform: rotateY(0deg);
}

最后，在JavaScript中绑定点击事件，当点击元素时，添加或移除flipped类：

$( "#card" ).on( "click", function(event) {
  $(this).toggleClass("flipped");
});

当执行以上代码后，点击id为card的元素时，就会轮流显示正、背面了。

另一个示例是当用户输入值时，实时更新计算结果。HTML代码如下：

<div>
  <input type="number" id="num1">
  <input type="number" id="num2">
  <span id="result"></span>
</div>

JavaScript代码如下：

$( "#num1, #num2" ).on( "input", function(event) {
  var num1 = parseInt( $( "#num1" ).val() );
  var num2 = parseInt( $( "#num2" ).val() );
  var res = num1 + num2;
  $( "#result" ).text( res );
});

上述代码表示监听id为num1和num2的输入框的input事件，在输入框值发生变化时，计算num1和num2的和，并实时更新id为result的span元素。完成后，用户输入num1和num2的值，就能实时计算并反馈结果。

以上就是对“初窥JQuery(二) 事件机制(1)”文章的完整攻略。