jQuery Event Handling (事件处理)

CSS是用来定义页面元素的样式，通常在页面加载时，这些样式会被运用。CSS本身并不管何时运用这些样式，而Javscript可以根据不同的事件做出不同的反应（例如，运用不同的CSS样式），它在一定程度下活用了CSS。这就是CSS和Javascript之间最大的，也是最重要的区别。本文将介绍jQuery是如何识别和处理事件（event handling）。

1. 例子一：特定selector的点击

对class为“alert”的按钮点击将触发报警。

代码：

$(document).ready(function() {
  $('button.alert').click(function() {
   alert('欢迎光临61dh.com!');
  });
});
<button class="alert">特定点击</button>

演示：

2.例子二：点击事件只发生1次

ID为“create-button”的链接被点击后，将在该链接后创建一个按钮，但是如果该按钮已经存在，将不再创建。

代码：

$('#create-button').click(function() {
  if ( $('button.new').length <1) { //根据需要这里可以设‘length’为不同的值
  $('<button class="new">刚创建的按钮</button>').insertAfter(this);
}
});
<button id="create-button">创建一个按钮</button>

演示：

3.例子三：事件的委派、传递

当列表里的一列被点击，新的列被加入列表。如果想让新加入的列也具有相同的事件控制，我们可以使用事件委派，把事件处理方法传递给新的列。

代码：

$(document).ready(function() {
  $('#list2').click(function(event) {//注意：这里加入了参数：event
  var $newLi = $('<li class="special"><button>新按钮</button></li>'); 
  var $tgt = $(event.target); //注意：这里用到target函数
  if ($tgt.is('button')) { 
    $tgt.parent().after($newLi); 
  }//这里用到，is()函数来判断当前点击元素的属性，如果是按钮就触发事件。 
  }); 
});

演示：

• 非按钮