jQuery 观察类变化 - JavaScript

在前端开发中，我们经常需要观察元素的类变化，以便在类发生变化时进行相应的操作。使用 jQuery 的 addClass、removeClass 和 toggleClass 方法可以添加、删除和切换类名，同时 jQuery 还提供了一些方法用于观察元素的类变化。

.hasClass( className )

.hasClass( className ) 方法用于检查元素是否具有指定的类名。它的返回值为布尔值，如果元素具有该类名则返回 true，否则返回 false。

if ($('#myDiv').hasClass('active')) {
  // TODO: do something
}

.on( events [, selector ] [, data ], handler )

.on( events [, selector ] [, data ], handler ) 方法可以为元素添加事件监听器。其中 events 参数为要监听的事件类型，可以是一个或多个事件类型，多个事件类型之间用空格隔开。selector 参数为要监听的子元素选择器，如果不需要委托，则可以省略此参数。data 参数为要传递给事件处理函数的数据，可以是任意类型。handler 参数为事件处理函数，可以是一段函数代码，也可以是一个已有的函数名。

$('#myDiv').on('click', function(event) {
  console.log('clicked');
});

.bind( eventType [, eventData ], handler )

.bind( eventType [, eventData ], handler ) 方法是 .on() 方法的简写形式，用于绑定元素事件。其中 eventType 参数为要绑定的事件类型，如 click、mousedown 等。eventData 参数为要传递给事件处理函数的数据，可以是任意类型。handler 参数为事件处理函数，可以是一段函数代码，也可以是一个已有的函数名。

$('#myDiv').bind('click', function(event) {
  console.log('clicked');
});

.live( eventType, handler )

.live( eventType, handler ) 方法用于绑定元素事件，它会自动处理新添加到页面中的匹配选择器的元素。其中 eventType 参数为要绑定的事件类型，如 click、mousedown 等。handler 参数为事件处理函数，可以是一段函数代码，也可以是一个已有的函数名。

$('#myDiv').live('click', function(event) {
  console.log('clicked');
});

.delegate( selector, eventType, handler )

.delegate( selector, eventType, handler ) 方法用于绑定元素事件，它会委托给指定的选择器元素并自动处理新添加到页面中的匹配选择器的元素。其中 selector 参数为要委托的元素选择器，eventType 参数为要绑定的事件类型，如 click、mousedown 等。handler 参数为事件处理函数，可以是一段函数代码，也可以是一个已有的函数名。

$('#myDiv').delegate('.item', 'click', function(event) {
  console.log('clicked');
});

.unbind( eventType [, handler ] )

.unbind( eventType [, handler ] ) 方法用于取消元素事件绑定。其中 eventType 参数为要取消绑定的事件类型，如 click、mousedown 等。handler 参数为要取消绑定的事件处理函数，如果省略此参数，则取消所有该事件类型的绑定。

$('#myDiv').unbind('click', myHandler);

.die( eventType, handler )

.die( eventType, handler ) 方法用于取消元素事件绑定，并且取消事件代理。其中 eventType 参数为要取消绑定的事件类型，如 click、mousedown 等。handler 参数为要取消绑定的事件处理函数，如果省略此参数，则取消所有该事件类型的绑定。

$('#myDiv').die('click', myHandler);

.undelegate( selector [, eventType ] [, handler ] )

.undelegate( selector [, eventType ] [, handler ] ) 方法用于取消为选择器委托的元素的事件绑定。其中 selector 参数为要取消委托的元素选择器，eventType 参数为要取消绑定的事件类型，如 click、mousedown 等，如果省略此参数，则取消所有该选择器的委托。handler 参数为要取消绑定的事件处理函数，如果省略此参数，则取消所有该选择器和事件类型的绑定。

$('#myDiv').undelegate('.item', 'click', myHandler);