- 什么是事件
事件（Event）是文档或者浏览器窗口中发生的，特定的交互瞬间。事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
事件包含三元素：事件源(Source)、事件(Event)、事件处理程序(Handler)。
2.jQuery事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。可以分为：鼠标事件、键盘事件、表单事件和窗口事件四大类。
3.jQuery鼠标事件函数
代码展示：
let flag = false;
$(function(){
$("#username").blur(function(){
if(this.value.length<=0){
$("#errorMsg").text('用户名不能为空！').css("color","red");
}else{
$("#errorMsg").text('')
}
})
$("#power").dblclick(function(){
flag = !flag;
if(flag){
$("#power").attr("src","https://img.simoniu.com/power_on.jpg");
}else{
$("#power").attr("src","https://img.simoniu.com/power_off.jpg");
}
})
$("#girl").mouseover(function(){
console.log('mouseover');
$("#girl").addClass("gray");
})
$("#girl").mouseleave(function(){
console.log('mouseleave');
$("#girl").removeClass("gray");
})
})
运行效果：
- jQuery键盘事件
常用的键盘事件如下：
代码展示：
$(function(){
$("#username").keypress(function(e){
console.log("in keypress username:"+$("#username").val());
console.log("in keypress keycode:"+e.keyCode);
})
$("#email").keydown(function(e){
console.log("in keydown email:"+$("#email").val());
console.log("in keydown keycode:"+e.keyCode);
})
$("#username,#email").keyup(function(){
console.log("in keyup username:"+$("#username").val());
console.log("in keyup email:"+$("#email").val());
})
})keydown,keypress,keyup三者之间的区别:
按下键盘时会触发键盘事件，顺序为keydown -> keypress ->keyup。
keydown、keypress事件触发在文字还没敲进文本框，这时如果在keydown、keypress事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。
keypress与keydown与keyup的主要区别：
（1）对中文输入法不友好，无法响应中文输入；
（2）无法响应系统功能键（比如delete，backspace）；
（3）由于前面两个限制，keyCode与keydown和keyup不是很一致；keypress的keyCode参照ASCII。而keydown与keypress的keyCode参照下图。
- 表单事件
代码展示：
let provinces = ['河北','河南','山东','山西'];
let citys =[
['石家庄','保定','沧州','唐山','邯郸'],
['郑州','洛阳','开封','南阳','驻马店'],
['济南','青岛','泰安','烟台','日照'],
['太原','大同','晋中','运城','临汾'],
];
let currentProvinceIndex = 0;
//初始化省份列表
function initProvinceList(){
provinces.forEach(function(v,i){
let provinceHTML ="";
if(i==0){
provinceHTML = '<option selected>'+v+'</option>'
}else{
provinceHTML = '<option>'+v+'</option>'
}
$("#province").append(provinceHTML);
});
}
//初始化城市列表
function initCityList(index){
$("#city").empty();
citys[currentProvinceIndex].forEach(function(v,i){
let cityHTML ="";
if(i==0){
cityHTML = '<option selected>'+v+'</option>'
}else{
cityHTML = '<option>'+v+'</option>'
}
$("#city").append(cityHTML);
});
}
$(function(){
initProvinceList();
initCityList(currentProvinceIndex);
$("#province").change(function(){
currentProvinceIndex = $("#province").get(0).selectedIndex;
//更新城市列表
initCityList(currentProvinceIndex);
})
$("#loginForm").submit(function(){
console.log('执行登录...');
if($("#username").val().length<=0) {
alert('用户名不能为空！');
return false; //返回 false 则不执行表单提交。
}
let username = $("#username").val();
let provice = $("#province").val();
let city = $("#city").val();
//console.log("登录成功，用户名："+username+"籍贯："+provice+","+city);
alert("登录成功，用户名："+username+" 籍贯："+provice+","+city);
return true;
})
})
执行效果：
6 窗口事件
代码展示：
$("#mypic").on('load',function(){
alert('图片加载完毕！');
})
$(function(){
$(window).resize(function(){
let w = window.innerWidth;
let h = window.innerHeight;
console.log('正在更改尺寸....,width:'+w+",height:"+h);
})
})
执行效果：
本章总结：
学完本章内容应熟练掌握以下内容：
什么是事件：
事件（Event）是文档或者浏览器窗口中发生的，特定的交互瞬间。事件是javaScript和DOM之间交互的桥梁。你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
jQuery常用事件分类：
jQuery 事件处理方法是 jQuery 中的核心函数。可以分为：鼠标事件、键盘事件、表单事件和窗口事件四大类。
学员问题：
问题：mouseout与mouseleave的区别。
答案：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
问题：keydown与keypress的区别。
答案：keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
keypress：当用户按下键盘上的字符键时触发，如果按住不让的话，会重复触发此事件；
