【澳门威斯尼人平台登录】文本事件用法简介,JS中鼠标左右键以及中键的事件

时间: 2019-05-12阅读: 869标签: 鼠标

事件分类

前面包车型客车话

  鼠标事件是web开拓中最常用的意气风发类事件,究竟鼠标是最根本的定点装置。本文将详细介绍鼠标事件的剧情

 

不常必要看清鼠标的事件,除了运用的click事件,唯有鼠标左键有效,而右键无效。而对于onmousedown、onmouseup的时候鼠标的平地风波左键/右键有效。以下计算鼠标八个开关操作:

鼠标事件

  • click/ mousedown/ mousemove/ mouseup/ contextmenu/ mouseover/ mouseout/ mouseenter/ mouseleave
  • 用button来分别鼠标的按钮
  • DOM3标准规定: click事件只可以监听左键, 只可以透过mousedown和mouseup来判别鼠标键
  • 鼠标左键button = 0, 右键button = 2, 滑轮 button = 1
    eg:
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:
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;
    }
}

类型

  鼠标事件共10类,包涵click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave

click         当用户按下并释放鼠标按键或其他方式“激活”元素时触发
contextmenu   可以取消的事件,当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单
dblclick      当用户双击鼠标时触发
mousedown     当用户按下鼠标按键时触发
mouseup       当用户释放鼠标按键时触发
mousemove     当用户移动鼠标时触发
mouseover     当鼠标进入元素时触发。relatedTarget(在IE中是fromElement)指的是鼠标来自的元素
mouseout      当鼠标离开元素时触发。relatedTarget(在IE中是toElement)指的是鼠标要去往的元素
mouseenter    类似mouseover,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现
mouseleave    类似mouseout,但不冒泡。IE将其引入,HTML5将其标准化,但尚未广泛实现

冒泡

  页面上的持有因素都扶助鼠标事件,除了mouseenter和mouseleave事件外,全体的鼠标事件都会冒泡

  [注意]safari浏览器不扶植mouseenter和mouseleave事件

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//鼠标移入移出按钮时,显示false,表示不冒泡
test.onmouseenter = test.onmouseleave =function(e){
    test.innerHTML += e.bubbles;//false
}
</script>

<button id="test" style="height: 30px;width: 200px;"></button>
<script>
//鼠标移入移出按钮时,显示true,表示冒泡
test.onmouseover = test.onmouseout =function(e){
    test.innerHTML += e.bubbles;//true
}
</script>

第一,须要为window绑定mousedown、mouseup事件,成分对象.add伊芙ntListener(‘mousedown‘, 管理函数funState of Qatar;

键盘事件

  • keydown keyup keypress
  • keydown > keypress > keyup
  • keydown和keypress的区别
    • keydown能够响应任意键盘按钮, keypress只可以够对应字符类键盘按钮
    • keypress重返ascii码, 能够调换来相应字符串, charCode属性记录ascii, 并且keypress还足以记下大小写, 但是keydown无法, 但是keydown能够读到全体按钮, 举例上下左右, keydown独有which

顺序

【1】鼠标移入时,触发mouseover、mouseenter和mousemove事件

  IE浏览器会先触发一回mousemove事件,再触发mouseover和mouseenter事件,再接触多次mousemove事件

  而其余浏览器都以先触发mouseover和mouseenter事件,再触及多次mousemove事件

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
var oBox = document.getElementById('box');
oBox.onmouseover = oBox.onmouseenter=oBox.onmousemove =function(e){
    e = e || event;
    box.innerHTML += e.type+ ';';
}
</script>

【2】鼠标移出时,触发mousemove、mouseleave和mouseout事件

  全体浏览器的逐一都以(1卡塔尔国mousemove、(2卡塔尔国mouseout和(3卡塔尔(قطر‎mouseleave事件

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
var oBox = document.getElementById('box');
oBox.onmouseleave = oBox.onmouseout=oBox.onmousemove =function(e){
    e = e || event;
    box.innerHTML += e.type+ ';';
}
</script>

【3】双击鼠标时,触发mousedown、mouseup、click、dblclick事件

  平时地,浏览器的逐一是(1卡塔尔国mousedown、(2卡塔尔国mouseup、(3卡塔尔click、(4State of Qatarmousedown、(5卡塔尔国mouseup、(6卡塔尔(قطر‎click、(7State of Qatardblclick

  但IE8-浏览器有多少个小bug,在双击事件中,它会跳过首个mousedown和click事件,顺序为(1卡塔尔国mousedown、(2卡塔尔(قطر‎mouseup、(3卡塔尔(قطر‎click、(4卡塔尔mouseup、(5卡塔尔dblclick

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
var oBox = document.getElementById('box');
oBox.onclick = oBox.ondblclick  = oBox.onmousedown = oBox.onmouseup=function(e){
    e = e || event;
    box.innerHTML += e.type+ ';';
}
</script>

【4】点击鼠标右键时,触发mousedown、mouseup、contextmenu事件

  日常地,浏览器的逐个是(1卡塔尔mousedown、(2卡塔尔(قطر‎mouseup、(3卡塔尔国contextmenu

  但safari浏览器有二个小bug,它不触发mouseup事件,顺序为(1卡塔尔国mousedown、(2卡塔尔(قطر‎contextmenu

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
var oBox = document.getElementById('box');
oBox.oncontextmenu  = oBox.onmousedown = oBox.onmouseup=function(e){
    e = e || event;
    box.innerHTML += e.type+ ';';
}
</script>

【5】嵌套成分的移入移出时,触发mouseover、mouseenter、mouseleave、mouseout事件

  从父级成分步入子级成分时,顺序为:(1State of Qatar父级成分的mouseout、(2卡塔尔(قطر‎子级成分的mouseover、(3卡塔尔国父级成分的mouseover、(4卡塔尔(قطر‎子级成分的mouseenter

  从子级成分步入父级成分时,顺序为:(1卡塔尔子级成分的mouseout、(2卡塔尔国父级成分的mouseout、(3卡塔尔(قطر‎子级成分的mouseleave、(4State of Qatar父级成分的mouseover

<div id="box" style="padding: 50px;width: 100px;background:pink;">
    <div id="inner" style="height: 100px;width: 100px;background-color: lightblue;"></div>
</div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
inner.onmouseout=inner.onmouseleave=inner.onmouseover=inner.onmouseenter=box.onmouseout=box.onmouseleave=box.onmouseover=box.onmouseenter= function(e){
    inner.innerHTML += e.currentTarget.id.slice(0,1)  + ':' +e.type.slice(5) + ';';
}
</script>

  从地点的结果能够看见mouseover、mouseout和mouseleave、mouseenter事件的分裂

  1、mouseover、mouseout是冒泡的,而mouseleave和mouseenter是不冒泡的

  2、从父级元素步入子级成分时,不会接触父级成分的mouseleave事件

  3、从子级成分步向父级成分时,不会触发父级成分的mouseenter事件

 

下一场,决断button的值,button 事件性质可再次来到叁个平头,提醒当事件被触发时哪个鼠标按钮被点击。button: 重返当事件被触发时,哪个鼠标按键被点击。

文本操作事件

  • input //当文本框输入值时接触事件
  • focus//聚焦
  • blur//失焦
  • change//判别三次集中失焦时文本内容是或不是产生变化, 变化时接触事件

事件目的

  鼠标事件目的提供了丰裕的音信,接下去将循序渐进效果与利益分类介绍

参数描述0规定鼠标左键1明确鼠标中键2规定鼠标右键

窗口操作类

  • scroll//当滚动条滚动时接触
  • load//页面加载达成之后试行

坐标地点

  关于坐标地方,事件指标提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对音讯

clientX/Y与x/y

  clientX/Y代表鼠标指针在可视区域中的水平和垂直坐标

  x/y与clientX/Y相像,但有包容难题。firefox浏览器不接济x/y,且IE7-浏览器把视口的左上角坐标设置为(2,2卡塔尔,其他浏览器则将(0,0卡塔尔(قطر‎作为起源坐标,所以存在(2,2卡塔尔的差距

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.onmousemove=function(e){
    e = e || event;
    box.innerHTML = 'clientX:' + e.clientX +';clientY:'+e.clientY + '<br>x:' + e.x + ';y:' + e.y;
}
</script>

screenX/Y

  screenX/Y代表鼠标指针相对于荧屏的品位和垂直坐标

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.onmousemove=function(e){
    e = e || event;
    box.innerHTML = 'clientX:' + e.clientX +';clientY:'+e.clientY + '<br>screenX:' + e.screenX + ';screenY:' + e.screenY;
}
</script>

pageX/Y与layerX/Y

  pageX/Y代表相对于页面的等级次序和垂直坐标,它与clientX/clientY的差距是不随滚动条之处变动

  layerX/Y与pageX/Y相同

<body style="height:2000px;">
<div id="box" style="height:100px;width:300px;background:pink;"></div>
<div id="result"></div>
<script>
var oBox = document.getElementById('box');
oBox.onmousemove=function(e){
    e = e || event;
    result.innerHTML = 'clientX:' + e.clientX +';clientY:'+e.clientY + '<br>pageX:' + e.pageX + ';pageY:' + e.pageY;
}
</script>
</body> 

  [注意]IE8-浏览器不扶植pageX/Y和layerX/Y,但是能够依附scrollTop/Left和clientX/Y总计出来

兼容 

handler = function(e){
    e = e || event;
    if(e.pageX == undefined){
        e.pageX = e.clientX + document.documentElement.scrollLeft
    }
    if(e.pageY == undefined){
        e.pageY = e.clientY + document.documentElement.scrollTop 
    }
}

offsetX/Y

  offsetX/Y表示相对于固定父级的水准和垂直坐标

  当页面无固定成分时,body是因素的长久父级。由于body的暗中认可margin是8px,所以offsetX/Y与clientX/Y差(8,8卡塔尔国

<div id="box" style="height:100px;width:300px;background:pink;"></div>
<script>
var oBox = document.getElementById('box');
oBox.onmousemove=function(e){
    e = e || event;
    oBox.innerHTML = 'clientX:' + e.clientX +';clientY:'+e.clientY + '<br>offsetX:' + e.offsetX + ';offsetY:' + e.offsetY;
}
</script>

w3c下的示范

修改键

  纵然鼠标事件首假诺使用鼠标来触发的,但在按下鼠标时键盘上的一点键的景况也能够影响到所要接纳的操作

  那一个改良键正是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键卡塔尔(قطر‎,它们通常被用来更改鼠标事件的作为

  DOM为此规定了4个天性,表示这一个改进键的情形:shiftKey、ctrlKey、altKey和metaKey。那一个属性中富含的都是布尔值,若是相应的键被按下了,则值为true;不然值为false

  [注意]IE8-浏览器不帮助metaKey属性

  上面通过点击事件,来测验是还是不是在点击的时候按下了那些修正键

<div id="box" style="height:30px;width:300px;background:pink;"></div>
<script>
box.onclick=function(e){
    e = e || event;
    box.innerHTML = '';
       if(e.shiftKey){box.innerHTML += 'shiftKey;'}
       if(e.ctrlKey){box.innerHTML += 'ctrlKey;'}
       if(e.altKey){box.innerHTML += 'altKey;'}
       if(e.metaKey){box.innerHTML += 'metaKey;'}
}
</script>
body onmousedown="whichButton(event)"p请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。/pscript type="text/javascript" function whichButton(event){ var btnNum = event.button; if (btnNum==2){ alert("您点击了鼠标右键!") }else if(btnNum==0){ alert("您点击了鼠标左键!") }else if(btnNum==1){ alert("您点击了鼠标中键!"); }else{ alert("您点击了" + btnNum+ "号键,我不能确定它的名称。"); } }/script/body

连带因素

  relatedTarget属性重回事件的次要相关节点。对于那一个尚未次要相关节点的风浪,该属性再次来到null

  对mouseover事件来说,事件的主目的target是获得光标的因素,而有关要素relatedTarget就是非凡失去光标的要素

  下表列出差异事件的target属性和relatedTarget属性含义

事件名称      target属性       relatedTarget属性
focusin       接受焦点的节点    丧失焦点的节点
focusout     丧失焦点的节点    接受焦点的节点
mouseenter    将要进入的节点    将要离开的节点
mouseleave    将要离开的节点    将要进入的节点
mouseout      将要离开的节点    将要进入的节点
mouseover     将要进入的节点    将要离开的节点
dragenter     将要进入的节点    将要离开的节点
dragexit      将要离开的节点    将要进入的节点

  IE8-浏览器不扶助target和relatedTarget属性

兼容

  target能够用srcElement属性代替,relatedTarget能够用toElement属性代替 

  [注意]firefox浏览器不扶助srcElement和toElement属性

  下列代码中, div成分的mouseover事件是从<body>移入到<div>中

<div id="box" style="height:100px;width:400px;background:pink;"></div>
<button id="reset">还原</button>
<script>
reset.onclick = function(){history.go();}
box.onmouseover=function(e){
    e = e || event;
    box.innerHTML = 'target:' + (e.target||e.srcElement) +'<br>relatedTarget:'+(e.relatedTarget||e.toElement) ;
}
</script>

1

鼠标按钮

  button和buttons属性再次回到事件鼠标开关信息

button

  button属性重临贰个数值,表示按下了鼠标哪个键

  [注意]若不阻碍右键默许行为,safari浏览器不可能代表按下右键

-1     表示没有按下按键
0      表示按下左键
1      表示按下滚轮
2      表示按下右键

buttons

  buttons属性再次来到三个3个比特位的值,表示还要按下了什么键。它用来拍卖同临时间按下多少个鼠标键的气象

  [注意]safari浏览器不帮忙buttons属性

1     二进制为001,表示按下左键
2     二进制为010,表示按下右键
4     二进制为100,表示按下滚轮

  所以,相同的时间按下左键和右键,buttons的二进制为011,表示3;同一时候按下左键和滚轮,buttons的二进制为101,表示5;同一时候按下右键和滚轮,buttons的二进制为110,表示6

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
box.onmouseup=function(e){
    e = e || event;
    box.innerHTML = 'button:' + e.button + ';buttons:' + e.buttons;
}
</script>

  但,IE8-浏览器的button属性的值与标准的button属性有比相当的大间隔

0:表示没有按下按钮
1:表示按下了左键
2:表示按下了右键
3:表示同时按下了左、右键
4:表示按下了滚轮
5:表示同时按下了左键和滚轮
6:表示同时按下了右键和滚轮
7:表示同时按下了左键、右键和滚轮

兼容

  那时候,无法使用技巧检验来鲜明差距,能够经过hasFeature(卡塔尔方法来检查测试,关于hasFeature(State of Qatar方法的详细消息活动至此

var hasMouse = document.implementation.hasFeature('MouseEvents','2.0');
//IE8-浏览器返回false,其他浏览器true
console.log(hasMouse);

<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
box.onmouseup=function(e){
    e = e || event;
    var Compatiblebutton;
    //IE8-浏览器
    if(!document.implementation.hasFeature('MouseEvents','2.0')){
        switch(e.button){
            case 1:
                Compatiblebutton = 0;
                break;
            case 2:
                Compatiblebutton = 2;
                break;                
            case 4:
                Compatiblebutton = 1;
                break;
        }
    }else{
        Compatiblebutton = e.button;
    }
    box.innerHTML = 'button:' + Compatiblebutton;
}
</script>

滚轮事件

  对于滚轮事件,有周围的轮转事件scroll,不过滚动事件不宽容IE8-浏览器,详细意况一抬手一动脚至此

  滚轮事件与滚动事件差异,滚动事件必得有滚动条,技巧够完成。而滚动事件是滚动鼠标滚轮触发的事件,与是还是不是有滚动条非亲非故

  IE6首先达成了鼠标滚轮mousewheel事件,当客商通过滚动与页面交互作用、在笔直方向上滚动页面时,会触发mousewheel事件。最后会冒泡到document(IE8-卡塔尔(قطر‎或window(标准卡塔尔

  [注意]那几个事件能够在此外因素上接触

  滚轮事件中有二个wheelDelta属性,当客户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当客商向后滚动鼠标滚轮时,wheelDelta是-120的翻番

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.onmousewheel=function(e){
    e = e || event;
    box.innerHTML = e.wheelDelta;
    if(e.wheelDelta >0){
        box.style.backgroundColor = 'lightblue';
    }else{
        box.style.backgroundColor = 'lightgreen';
    }
}
</script>

  firefox浏览器不支持mousewheel事件,它协助DOMMouseScroll事件,而关于鼠标滚轮的音信则保留在detail属性中,当向前滚动鼠标滚轮时,那天性子的值是-3的翻番,当向后滚动鼠标滚轮时,那特性子的值是3的翻番

  [注意]该事件仅援救DOM2级事件处理程序的写法

<div id="box" style="height:100px;width:200px;background:pink;"></div>
<script>
box.addEventListener('DOMMouseScroll',function(e){
    e = e || event;
    console.log(e)
    box.innerHTML = e.detail;
    if(e.detail >0){
        box.style.backgroundColor = 'lightblue';
    }else{
        box.style.backgroundColor = 'lightgreen';
    }
})
</script> 

兼容

var handler = function(e){
    var getWheelDelta;
    e = e || event;
    if(e.wheelDelta){
        getWheelDelta = e.wheelDelta;
    }else{
        getWheelDelta = -e.detail * 40;
    }
}

<body style="height:2000px">
<p style="position: fixed">滚动滚轮将显示滚动值</p>
<div id="test" style="position: fixed"></div>
<script>
var wheel = function(e){
    e = e || event;
    if(e.wheelDelta){
        test.innerHTML = e.wheelDelta;
    }else{
        test.innerHTML = -e.detail * 40;
    }
}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);    
</script>    
</body>

 

移动设备

  由于活动器具还未鼠标,所以与计算机端有局地差别的地方。移动装备尽量选用移动端事件,而毫无使用鼠标事件

  【1】不援救dblclick双击事件。在运动设备中双击浏览器窗口会加大画面

  【2】单击成分会触发mousemove事件

  【3】多个手指头放在显示屏上且页面随手指移动而滚动时会触发mousewheel和scroll事件

 

  招待调换

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:【澳门威斯尼人平台登录】文本事件用法简介,JS中鼠标左右键以及中键的事件

相关阅读