鼠标事件有很多:click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好,大家看名字基本都懂是什么意思。
其中,contextmenu是右键出现菜单事件,并不是右键事件。
click是一个完整的点击事件,包括mousedown和mouseup。
mouseover和mouseout是一组事件,对应于鼠标的移入移出事件。
• 所有的鼠标事件都有clientX和clientY,代表的是鼠标点击的位置,我们可以通过e.clientX和e.clentY来查看。
• 左键点击的顺序是:mousedown、mouseup、click
document.onclick = function () {
console.log('click');
}
document.onmousedown = function () {
console.log('mousedown');
}
document.onmouseup = function () {
console.log('mouseup');
}
输出的结果是mousedown、mouseup、click。
• 当我们同时绑定了click事件和mousedown事件后,如何解决mousedown和click的冲突问题?
其实方法很简单,我们可以通过按下鼠标的事件来判断是执行click还是mousedown事件。
var firstTime,
lastTime,
flag = false;
document.onclick = function (e) {
if (flag) {
console.log('click');
}else {
console.log('mousedown');
}
}
document.onmousedown = function (e) {
firstTime = new Date().getTime();
}
document.onmouseup = function (e) {
lastTime = new Date().getTime();
if (lastTime - firstTime < 200) {
flag = true;
}else {
flag = false;
}
}
如何判断鼠标点击的是左键还是右键?
click事件永远都是左键,有左键和右键的区别的是mousedown事件。
再mousedown的事件对象中有一个属性叫做button,这个属性的值是0的时候代表我们按下的是左键,1的时候代表按下的中键,2的时候代表按下的是右键。
document.onmousedown = function (e) {
if (e.button == 0) {
console.log('left');
}else if (e.button == 1) {
console.log('mid');
}else {
console.log('right');
}
}
键盘事件:
键盘事件主要有三个:keydown、keypress、keyup。
触发顺序分别是keydown、keypress、keyup。
document.onkeydown = function (e) {
console.log('keydown');
}
document.onkeypress = function (e) {
console.log('keypress');
}
document.onkeyup = function (e) {
console.log('keyup');
}
输出的结果是keydown、keypress、keyup。
keydown和keypress可以响应连续操作,我们一直按着键盘就会一直触发事件。
keypress的范围和keydown有所区别:
keydown可以响应任意键盘按键,keypress只能响应字符类按键,也就是有ASCII码的字符的按键,像字母数字回车空格之类的。
事件对象的属性方面:
只有keypress有charCode属性,这个属性代表的我们输入的这个字符的ASCII码,配合SHIFT之类的按键可以直接获取大写字母等。
keyCode和which每个方法都有,表示的是这个键的唯一标示,可以告诉浏览器我们按下的是键盘上的哪一个键,比如空格是32,32就代表空格。不过我们一般都用which,keyCode用的较少。
• String上有一个方法叫做fromCharCode,可以接受一个Unicode值(包含ASCII值),然后返回对应的字符串,我们可以配合这个方法和charCode来直接获取输入的字符.
document.onkeypress = function (e) {
console.log(String.fromCharCode(e.charCode));
}
load事件
这个事件window.onload和在body标签上写onload是一样的效果,作用是等页面中所有的东西都下载完成再执行里面的代码。
scroll事件
这个方法是监听滚轮滚动的事件,我们可以用这个事件来写一个兼容版的fix定位。
function beFixed(ele){
var initPosX = ele.getPosition().w,
initPosY = ele.getPosition().h;
addEvent(window, 'scroll', function(e){
ele.style.top = initPosY + getScrollOffset().h + 'px';
ele.style.left = initPosX + getScrollOffset().w + 'px';
})
}