2018-10-19

1.事件:

click
dbclick
mouseover
mouseout
mouseenter
mouseleave
onload
change
blur
input
submit
focus
scroll
resize

2. 鼠標(biāo)的點(diǎn)擊位置?

鍵盤按鍵?

如果對一個標(biāo)簽設(shè)置了點(diǎn)擊事件之后,沒有效果?
1.有沒有報錯。
2.事件有沒有寫錯
3.元素有沒有獲取到

document是整個文檔的父級。
event對象是事件發(fā)生的時候產(chǎn)生的一個對象。但是FF不支持。

3. 獲取一個兼容的event對象。

  var ev =  ev || event ;

event.clientX:相對于窗口可視區(qū)域的X坐標(biāo)
event.clientY:相對于窗口可視區(qū)域的Y坐標(biāo)

封裝的鼠標(biāo)點(diǎn)擊位置的坐標(biāo)獲取方法。
    function getPos(ev){
       var scrollLeft = window.pageXOffset ||     
    document.documentElement.scrollLeft ||   document.body.scrollLeft;
      var scrollTop = window.pageYOffset || 
    document.documentElement.scrollTop ||     document.body.scrollTop;
    return {
         left:scrollLeft+ev.clientX,
         top:scrollTop + ev.clientY
    };
}

4.事件流

事件冒泡:事件冒泡就是內(nèi)層元素的事件會隨著文檔流向上冒泡,
如果上層具有相同的事件,那么這個事件也會響應(yīng)。直到冒泡到頂層對象document。

  event.cancelBubble = true; //停止冒泡

5. 鍵盤事件

keydown
keypress
keyup
按鍵的編碼 。 ev.keyCode
按鍵編碼是連續(xù)的。0-9,a-z

ctrlKey、shiftKey、altKey 這個是鍵盤事件的功能鍵,如果這些鍵按下的話,對應(yīng)的key值是true。這樣可以實現(xiàn)多按鍵操作。
Ctrl+enter
ctrl+c
ctrl+v

6.鼠標(biāo)右鍵的菜單事件 on contextmenu

return false ; 能夠阻止事件的默認(rèn)行為。

7.拖拽事件

復(fù)合事件
首先是鼠標(biāo)按下,然后是鼠標(biāo)移動。然后是鼠標(biāo)放開。自己理解。

var  d = document.querySelector('div');
d.onmousedown = function(ev){
    var ev = ev || event;
    var x = ev.clientX - d.offsetLeft;
    var y = ev.clientY-d.offsetTop;
    d.onmousemove = function(ev){
        var ev = ev || event;
        d.style.left = ev.clientX - x + 'px';
        d.style.top = ev.clientY - y + 'px';
    };
    d.onmouseup = function(){
        d.onmousemove = function(){};
    };
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,690評論 1 11
  • 事件是什么,可以用來做什么,什么時候用到它? 事件,就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間。JavaScr...
    茂茂愛吃魚閱讀 1,609評論 0 16
  • 第13章 事件 1. 事件流 事件流描述的是從頁面中接收事件的順序。 (1) 事件冒泡 IE 的事件流叫做事件冒泡...
    yinxmm閱讀 1,034評論 0 17
  • 本節(jié)介紹各種常見的瀏覽器事件。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,840評論 0 4
  • 一.recode1.靜態(tài)方法和類方法、對象方法對象方法:a.直接聲明在類中b.自帶的self參數(shù)c.對象來調(diào)用d....
    芽菜包66閱讀 115評論 0 0

友情鏈接更多精彩內(nèi)容