javascript事件, 解决mousedown和click冲突事件, 鼠标事件, 键盘事件, 文本事件用法简介

事件分类鼠标事件
click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
用button来区别鼠标的按键
DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键
鼠标左键button = 0, 右键button = 2

事件分类

鼠标事件

  • click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
  • 用button来区别鼠标的按键
  • DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键
  • 鼠标左键button = 0, 右键button = 2, 滑轮 button = 1
    eg:
1
2
3
4
5
6
7
8
9
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function (e) {
var event = e || window.event;
if(event.button == 2){
console.log('right');
}else if(event.button == 0){
console.log('left');
}
}
  • 如何解决mousedown和click的冲突
    应用时间差去区别, click的点击时间快
    eg:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var div = document.getElementsByTagName('div')[0];
var key = false;
var firstTime = 0;
var lastTime = 0;
div.onclick = function() {
if(key){
console.log('click');
key = false;
}
}
div.onmousedown = function() {
firstTime = new Date().getTime();
console.log('mouseDown');
}
div.onmouseup = function() {
console.log('mouseUp');
lastTime = new Date().getTime();
if( (lastTime - firstTime) < 200){
key = true;
}
}

键盘事件

  • keydown keyup keypress
  • keydown > keypress > keyup
  • keydown和keypress的区别
    • keydown可以响应任意键盘按键, keypress只可以相应字符类键盘按键
    • keypress返回ascii码, 可以转换成相应字符串, charCode属性记录ascii, 并且keypress还可以记录大小写, 然而keydown不能, 但是keydown可以读到所有按键, 例如上下左右, keydown只有which

文本操作事件

  • input //当文本框输入值时触发事件
  • focus//聚焦
  • blur//失焦
  • change//判断一次聚焦失焦时文本内容是否发生变化, 变化时触发事件

窗口操作类

  • scroll//当滚动条滚动时触发
  • load//页面加载完毕之后执行

越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!