jQuery学习笔记(6)--事件处理
JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码
浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
<a id="test-link" href="#0">点我试试</a>
</body>
</html>
这个页面上会有一个超链接，我们用jQuery这样绑定一个click事件,需要用到on
on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数
var a = $('#test-link'); //获取超链接的jQuery对象
a.on('click', function () { alert('果然你点了..'); });//用户点击后弹出一个小弹框
另一种更简化的写法是直接调用click()方法,两者完全等价，一般on('事件",function)==事件(function)
a.click(function () { alert('早上好'); });//这个时候我们会弹出两个框，一个是果然你点了..一个是早上好
当然我们绑定了事件也可以取消绑定 ,通过off(‘click’, function)实现
var a = $('#test-link'); //获取超链接的jQuery对象
function hello(){alert('hello')};
a.click(hello);//跟上面类似，绑定了个点击事件，一旦用户点击超链接位置，就会弹出一个hello
a.off('click', hello);//取消绑定
setTimeout(function () { a.off('click', hello); }, 10000); //10000ms就是10s,setTimeout设置延迟事件,我也不太清楚为什么要用延迟，直接取消也可以的
需要注意，取消绑定只能取消上面这种在外部定义函数的,如果跟之前那样在click里面定义函数的话是无法解除绑定的
a.click(function () { alert('hello!'); });
a.off('click', function () { alert('hello!'); });
看上去没啥问题,但是它们是两个不同的函数对象，off('click', function () {...})无法移除已绑定的第一个匿名函数
为了实现移除效果，可以使用off(‘click’)一次性移除已绑定的click事件的所有处理函数
var a = $('#test-link'); //获取超链接的jQuery对象
a.click(function () { alert('早上好'); });
a.off('click');//直接移除了，这种click内部绑定的也可以移除
同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数
那么具体有哪些事件处理函数呢
jQuery能够绑定的事件主要包括
鼠标事件
click 鼠标单击时触发
dblclick鼠标双击时触发
mouseenter 鼠标进入时触发
mouseleave 鼠标移出时触发
mousemove 鼠标在DOM内部移动时触发
hover 鼠标进入和退出时触发两个函数,相当于mouseenter加上mouseleave
键盘事件
键盘事件仅作用在当前焦点的DOM上，通常是和
keydown 键盘按下时触发
keyup 键盘松开时触发
keypress 按一次键后触发
其他事件
focus 当DOM获得焦点时触发
blur 当DOM失去焦点时触发
change 当、或的内容改变时触发
submit 当提交时触发
ready 当页面被载入并且 DOM树完成初始化后触发,仅作用于document对象,由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$('#testForm').on('submit', function () { alert('submit!'); });
</script>
</head>
<body>
<form id="testForm">
<input type="submit" value="submit">
</form>
</body>
</html>
这个网页源码的想法是，给我们的这个表单绑定submit事件，想在提交之后返回一个提示，但是这个代码并没后这个效果，因为JavaScript在此执行的时候，尚未载入浏览器，所以$(’#testForm)返回[]，并没有绑定事件到任何DOM上
所以如果想达到这个效果，就需要一个类似初始化的效果，初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化，以下两种写法均可行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () { $('#testForm').submit(function () { alert('submit!'); }); });
</script>
</head>
<body>
<form id="testForm">
<input type="submit" value="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function () {
$('#testForm').on('submit', function () { alert('submit!'); });
});
</script>
</head>
<body>
<form id="testForm">
<input type="submit" value="submit">
</form>
</body>
</html>
第二种写法更为简便，最为常见
如果你遇到$(function () {…})的形式，牢记这是document对象的ready事件处理函数
可以反复绑定事件处理函数，它们会依次执行
事件参数
有些事件,如mousemove和keypress，我们需要获取鼠标位置和按键的值
所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function ()
{
$('#testMouseMoveDiv').mousemove(
function (e)
{
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = ' + e.pageY);
}
);
}
);
</script>
</head>
<body>
<div id="testMouseMoveDiv">
<span id="testMouseMoveSpan">测试</span>
</div>
</body>
</html>
在span区域里移动鼠标，可以获得鼠标的当前位置
$(document).mousemove(function(event){$("span").text(event.pageX + ", " + event.pageY);});一般鼠标事件就是这个写法，前面的document可以换成具体的比如说div,ul如果不需要指明范围就用document,function传入的参数就是对应的鼠标事件，变量名随便用，但只要知道是鼠标事件就可以
当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function()
{
var input = $('#test-input'); input.change(function () { alert('changed...'); });
}
);
</script>
</head>
<body>
账号名<input type="text" id="test-input" name="username">
</div>
</body>
</html>
可以测试一下，我们在文本框输入内容后，要按一下回车（按回车才会表明你输入结束），然后会弹出changed…
但我们通过控制台输入时
var input = $('#test-input');//绑定到input
input.val('change it!'); //通过.val改变内容
可以看到，文本框的内容改变了，但却没有弹框出现，说明没有触发之前我们绑定的change事件
但我们又希望用代码触发change事件
可以直接调用无参数的change()方法来触发该事件
在日常网页中，有时候需要根据用户修改的文本内容判断是否为合法输入等等，我们就可以用change()来直接审查网页绑定的change事件
var input = $('#test-input');//绑定到input
input.val('change it!'); //通过.val改变内容
input.change(); //这个时候会弹出弹框。。其实这个change()不需要改变文本框内容，直接调用也可以运行绑定的change事件
input.trigger('change');//input.change()==input.trigger('change')
在浏览器中，有些JavaScript代码只有在用户触发下才能执行，
比如说:在控制台输入window.open(),
会出现Firefox阻止网站弹出的一个窗口
或者写在网页源码里
也会出现Firefox阻止网站弹出的一个窗口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function () { window.open('/'); });
</script>
</head>
<body>
</body>
</html>
这些“敏感代码”只能由用户操作来触发
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(function ()
{
var button1 = $('#testButton1');
var button2 = $('#testButton2');
button1.click(function () { window.open('/'); });
button2.click(function () { setTimeout(function(){window.open();}, 1000); });
});
</script>
</head>
<body>
用户许可<input type="button" id="testButton1"><br>
用户许可<input type="button" id="testButton2">
</body>
</html>
当用户点击button1时，click事件被触发，由于在click事件处理函数内执行，这是浏览器允许的
有的地方说延迟执行会被浏览器拦截，但我好像没有拦截，等了1s就打开了新标签页