click事件
/* HTML:
*
* <a id="test-link" href="#0">点我试试</a>
*
*/
// 获取超链接的jQuery对象:
var a = $('#test-link');
a.on('click', function () {
alert('Hello!');
});
a.click(function () {
alert('Hello!');
});
鼠标事件
click: 鼠标单击时触发；
dblclick：鼠标双击时触发；
mouseenter：鼠标进入时触发；
mouseleave：鼠标移出时触发；
mousemove：鼠标在DOM内部移动时触发；
hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是<input>和<textarea>。
keydown：键盘按下时触发；
keyup：键盘松开时触发；
keypress：按一次键后触发。
其他事件
focus：当DOM获得焦点时触发；
blur：当DOM失去焦点时触发；
change：当<input>、<select>或<textarea>的内容改变时触发；
submit：当<form>提交时触发；
ready：当页面被载入并且DOM树完成初始化后触发。
JavaScript在此执行的时候，<form>尚未载入浏览器
<html>
<head>
<script>
// 代码有误:
$('#testForm).on('submit', function () {
alert('submit!');
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
<html>
<head>
<script>
$(document).on('ready', function () {
$('#testForm).on('submit', function () {
alert('submit!');
});
});
</script>
</head>
<body>
<form id="testForm">
...
</form>
</body>
ready事件
$(document).ready(function () {
// on('submit', function)也可以简化:
$('#testForm).submit(function () {
alert('submit!');
});
});
简化为
$(function () {
// init...
});
事件参数
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
});
});
取消绑定
off('click', function)
function hello() {
alert('hello!');
}
a.click(hello); // 绑定事件
// 10秒钟后解除绑定:
setTimeout(function () {
a.off('click', hello);
}, 10000);
下面是无效的
// 绑定事件:
a.click(function () {
alert('hello!');
});
// 解除绑定:
a.off('click', function () {
alert('hello!');
});
事件触发条件
var input = $('#test-input');
input.change(function () {
console.log('changed...');
});
var input = $('#test-input');
input.val('change it!'); // 无法触发change事件
var input = $('#test-input');
input.val('change it!');
input.change(); // 触发change事件
浏览器安全限制
有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数
$(document).ready(function () {
var button1 = $('#testPopupButton1');
var button2 = $('#testPopupButton2');
function popupTestWindow() {
window.open('/');
}
button1.click(function () {
popupTestWindow();
});
button2.click(function () {
// 不立刻执行popupTestWindow()，100毫秒后执行:
setTimeout(popupTestWindow, 100);
});
});
练习
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
'use strict';
$(function() {
var
form = $('#test-form'),
langs = form.find('[name=lang]'),
selectAll = form.find('label.selectAll :checkbox'),
selectAllLabel = form.find('label.selectAll span.selectAll'),
deselectAllLabel = form.find('label.selectAll span.deselectAll'),
invertSelect = form.find('a.invertSelect');
// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function(e) {
e.preventDefault();
alert(form.serialize());
});
function updateLabel() {
let allChecked = langs.filter(':checked').length === langs.length
selectAll.prop('checked', allChecked)
if(allChecked) {
selectAllLabel.hide()
deselectAllLabel.show()
} else {
selectAllLabel.show()
deselectAllLabel.hide()
}
}
selectAll.change(function(e) {
langs.prop('checked', $(this).is(':checked'))
updateLabel()
})
invertSelect.click(function(e) {
langs.click()
})
langs.change(() => updateLabel())
// 测试:
alert('请测试功能是否正常。');
});
</script>
</head>
<body>
<form id="test-form" action="test">
<legend>请选择想要学习的编程语言：</legend>
<fieldset>
<p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label>
<a href="#0" class="invertSelect">反选</a>
</p>
<p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
<p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
<p><button type="submit">Submit</button></p>
</fieldset>
</form>
</body>
</html>
