下面我们再去看一下跟表单相关的两个事件 … change 和 submit … 在表单元素发生变化的时候会触发 change 事件 … 提交表单的时候，会触发 submit 事件 …

.change()

我们先在这个 通知 复选框上绑定一个 change 事件 … 先选中这个元素 … 它上面有一个 notice ID .. 使用 change 事件的事件处理器 ..

用一个函数作为它的参数 … 在这个函数里面，我们用 if 语句去判断复选框的不同的状态，如果勾选了复选框，它的 checked 属性的值会是 true …

如果没有勾选的话，这个属性的值会是 false … 我们可以使用 prop() 方法获取到复选框元素的这个属性的值 …

$( '#notice' ).change(function() {
if( $( this ).prop( 'checked' ) ) {
$( '.alert' ).text( '发送通知' ).show();
}else{
$( '.alert' ).text( '不发送通知' ).show();
}
});

回到浏览器 … 勾选一下 通知 这个复选框 … 现在这个表单元素就发生了一些变化 .. 也就会触发 change 事件 … 这样在状态栏上就会显示 发送通知 … 取消勾选它 … 会在状态栏上显示 不发送通知 …

.submit()

下面我们再去试一下 submit 事件 … 先选择表单 … 调用 .submit() 事件处理器 …. 在状态栏上显示一个 正在提交内容 …

然后用一个提示窗口，显示在评论文本区域里面的内容 ….

$( 'form' ).submit(function() {
$( '.alert' ).text( '正在提交内容...' ).show();
alert( $( '#comment' ).val() );
});

回到浏览器 … 在评论框里输入点内容 … 点击 提交 按钮 … 会触发表单的 submit 事件 …

在弹出的提示窗口里，会显示在评论框里输入的内容 …