jQuery基础教程（第四版）读书笔记“选择元素与事件“-原创手记-慕课网

上下文关键字this引用的是DOM元素，而不是jQuery对象，作为jquery对象需要：$(this)写成这样子
jQuery提供了一个简便的toggleClass()方法，能够根据相应的类是否存
在而添加或删除类

$(document).ready(function() {
    $('#switcher h3').click(function() {
        $('#switcher button').toggleClass('hidden');
    });
});

$( 'A' 'B' ).~ jQuery选中了A中的子元素B
$( 'A', 'B' ).~ A逗号B， jQuery选择了A or B

mouseenter和mouseleave事件可以避免冒泡问题
通过事件对象改变事件的旅程
事件对象是一种DOM结构，它会在元素获得处理事件的机会时传递给被调用的事件处理程序。这个对象中包含着与事件有关的信息（例如事件发生时的鼠标指针位置），也提供了可以用来影响事件在DOM中传递进程的一些方法。

事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。
通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）而且，this引用的是处理事件的DOM元素

$(document).ready(function() {
    $('#switcher').click(function(event) {
        if (event.target == this) {
            $('#switcher button').toggleClass('hidden');
        }
    });
});

此时的代码确保了被单击的元素是<div id="switcher">，而不是其他后代元素。现在，单击按钮不会再折叠样式转换器，而单击转换器背景区则会触发折叠操作。但是，单击标签（<h3>）同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标
停止事件传播
事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。

$(document).ready(function() {
  $('#switcher-default').addClass('selected');
  $('#switcher button').click(function(event) {
      var bodyClass = this.id.split('-')[1];
      $('body').removeClass().addClass(bodyClass);
      $('#switcher button').removeClass('selected');
      $(this).addClass('selected');
      event.stopPropagation();
  });
});

通过调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

阻止默认操作
即便在事件对象上调用.stopPropagation()方法也不能禁止这种默认操作，因为默认操作不是在正常的事件传播流中发生的。在这种情况下，.preventDefault()方法则可以在触发默认操作之前终止事件

事件传播和默认操作是相互独立的两套机制，在二者任何一方发生时，都可以终止另一方。
如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回false，这是对在事件对象上同时调用.stopPropagation()和.preventDefault()的一种简写方式。

事件委托
利用冒泡的一项高级技术。通过事件委托，可以借助一个元素上的事件处理程序完成很多工作。

is()与.hasClass()
要测试元素是否包含某个类，也可以使用另一个简写方法.hasClass()。
不过，.is()方法则更灵活一些，它可以测试任何选择符表达式。
使用内置的事件委托功能

$('#switcher').on('click', 'button', function() {
  var bodyClass = event.target.id.split('-')[1];
  $('body').removeClass().addClass(bodyClass);
  $('#switcher button').removeClass('selected');
  $(this).addClass('selected');
});

如果给.on()方法传入的第二个参数是一个选择符表达式，jQuery会把click事件处理程序绑定到#switcher对象，同时比较event.target和选择符表达式（这里的'button'）。如果匹配，jQuery会把this关键字映射到匹配的元素，否则不会执行事件处理程序。

为事件处理程序添加命名空间
即在绑定事件时引入附加信息，以便将来识别特定的处理程序。要使用命名空间，需要退一步使用绑定事件处理程序的非简写方法，即.on()方法本身。
我们为.on()方法传递的第一个参数，应该是想要截获的事件的名称。不过，在此可以使用一种特殊的语法形式，即对事件加以细分

$(document).ready(function() {
  $('#switcher').on('click.collapse', function(event) {
    if (!$(event.target).is('button')) {
      $('#switcher button').toggleClass('hidden');
    }
  });
  $('#switcher-narrow, #switcher-large').click(function() {
    $('#switcher').off('click.collapse');
  });
});

对于事件处理系统而言，后缀.collapse是不可见的。换句话说，这里仍然会像编写.on('click')一样，让注册的函数响应单击事件。但是，通过附加的命名空间信息，则可以解除对这个特定处理程序的绑定，同时不影响为按钮注册的其他单击处理程序。

重新绑定事件

$(document).ready(function() {
  var toggleSwitcher = function(event) {
    if (!$(event.target).is('button')) {
      $('#switcher button').toggleClass('hidden');
    }
  };
  $('#switcher').on('click.collapse', toggleSwitcher);
});

将一个匿名函数表达式指定给了一个局部变量。传递给.on()的第二个参数是一个函数引用。

模仿用户操作
即使某个事件没有真正发生，但如果能执行绑定到该事件的代码将会很方便。通过.trigger()方法就可以完成模拟事件的操作。

$(document).ready(function() {
  $('#switcher').trigger('click');
});

这样，随着页面加载完成，样式转换器也会被折叠起来，就好像是被单击了一样.
.trigger()方法提供了一组与.on()方法相同的简写方法。当使用这些方法而不带参数时，结果将是触发操作而不是绑定行为。

$(document).ready(function() {
　$('#switcher').click();
});

键盘事件:以分为两类：直接对键盘按键给出响应的事件keyup和keydown和对文本输入给出响应的事件keypress。
键盘事件的目标是当前拥有键盘焦点的元素。