js原生6--事件

事件對(duì)象

鼠標(biāo)事件

event.clientX在可視區(qū)中，鼠標(biāo)點(diǎn)擊的x坐標(biāo)

event.clientY在可視區(qū)中，鼠標(biāo)點(diǎn)擊的y坐標(biāo)

示例：

? ? ? ? document.onclick = function? () {

? ? ? ? ? ? alert(event.clientX + ',' + event.clientY);

? ? ? ? }

示例：一個(gè)跟隨鼠標(biāo)指針移動(dòng)的紅色塊

demo.gif

? ? ? ? #div {

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? background-color :red;

? ? ? ? ? ? position: absolute;

? ? ? ? }

? ? ? ? // 鼠標(biāo)移動(dòng)時(shí)觸發(fā)改事件

? ? ? ? document.onmousemove = function? (ev) {

? ? ? ? ? ? // 獲取距離文檔頂部的高度

? ? ? ? ? ? var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

? ? ? ? ? ? // 獲取距離文檔左邊的的寬度

? ? ? ? ? ? var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

? ? ? ? ? ? // 獲取鼠標(biāo)事件

? ? ? ? ? ? var oEvent = event || ev;

? ? ? ? ? ? // 獲取到div

? ? ? ? ? ? var oDiv = document.getElementById('div');

? ? ? ? ? ? // 設(shè)置div的位置

? ? ? ? ? ? oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';

? ? ? ? ? ? oDiv.style.top = oEvent.clientY + oScrollTop + 'px';

? ? ? ? }

示例：一串跟著鼠標(biāo)走的div

demo.gif

? ? ? ? #div {

? ? ? ? ? ? width: 10px;

? ? ? ? ? ? height: 10px;

? ? ? ? ? ? background-color :red;

? ? ? ? ? ? position: absolute;

? ? ? ? }

? ? ? ? // 鼠標(biāo)移動(dòng)時(shí)觸發(fā)改事件

? ? ? ? window.onload = function? () {

? ? ? ? ? ? var oDivs = document.getElementsByTagName('div');

? ? ? ? ? ? document.onmousemove = function? (ev) {

? ? ? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? ? ? oDivs[0].style.left = oEvent.clientX+'px';

? ? ? ? ? ? ? ? oDivs[0].style.top = oEvent.clientY+'px';

? ? ? ? ? ? ? ? for (var i = oDivs.length-1; i > 0; i--) {

? ? ? ? ? ? ? ? ? ? oDivs[i].style.left = oDivs[i-1].style.left;

? ? ? ? ? ? ? ? ? ? oDivs[i].style.top = oDivs[i-1].style.top;

? ? ? ? ? ? ? ? };

? ? ? ? ? ? }

? ? ? ? }

鍵盤事件

keyCode獲取用戶按下鍵盤的哪個(gè)按鍵

如：鍵盤控制DIV移動(dòng)

ctrlKey 返回boolean值，按下時(shí)為true

shiftKey 返回boolean值，按下時(shí)為true

altKey 返回boolean值，按下時(shí)為true

示例：用提示框?qū)⒂脩舭吹陌存I提示出來(lái)：

demo.gif

? ? ? ? // 按動(dòng)鍵盤時(shí)觸發(fā)事件

? ? ? ? document.onkeydown = function (ev) {

? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? // 獲取到按動(dòng)的是哪個(gè)按鍵

? ? ? ? ? ? alert(oEvent.keyCode);

? ? ? ? }

示例：通過(guò)上下左右按鍵控制DIV的移動(dòng)

demo.gif

? ? ? ? #div1 {

? ? ? ? ? ? width: 100px;

? ? ? ? ? ? height: 100px;

? ? ? ? ? ? left:10px;

? ? ? ? ? ? top:10px;

? ? ? ? ? ? background-color: gray;

? ? ? ? ? ? position: absolute;

? ? ? ? }

? ? ? ? document.onkeydown = function? (ev) {

? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? var oDiv = document.getElementById('div1');

? ? ? ? ? ? if (oEvent.keyCode == 37) {

? ? ? ? ? ? ? ? oDiv.style.left =? oDiv.offsetLeft - 10 +'px';

? ? ? ? ? ? } else if (oEvent.keyCode==38) {

? ? ? ? ? ? ? ? oDiv.style.top = oDiv.offsetTop - 10 +'px';

? ? ? ? ? ? } else if (oEvent.keyCode == 39) {

? ? ? ? ? ? ? ? oDiv.style.left = oDiv.offsetLeft + 10 +'px';

? ? ? ? ? ? } else if (oEvent.keyCode == 40) {

? ? ? ? ? ? ? ? oDiv.style.top = oDiv.offsetTop + 10 +'px';

? ? ? ? ? ? };

? ? ? ? }

示例：按住control+enter鍵，提交留言框中的文字到留言板中

demo.gif

? ? ? ? window.onload = function? () {

? ? ? ? ? ? var oText1 = document.getElementById('text1');

? ? ? ? ? ? var oText2 = document.getElementById('text2');

? ? ? ? ? ? var oBtn = document.getElementById('btn');

? ? ? ? ? ? // 鼠標(biāo)點(diǎn)擊提交按鈕。進(jìn)行留言

? ? ? ? ? ? oBtn.onclick = function? () {

? ? ? ? ? ? ? ? //點(diǎn)擊提交按鈕后，把留言框中的文字提交在留言區(qū)

? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';

? ? ? ? ? ? ? ? // 清空留言框

? ? ? ? ? ? ? ? oText2.value = '';

? ? ? ? ? ? };

? ? ? ? ? ? // 按下control+enter按鈕，進(jìn)行留言,因?yàn)楫?dāng)前焦點(diǎn)在留言框中，所以事件要加載留言框中

? ? ? ? ? ? oText2.onkeydown = function? (ev) {

? ? ? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? ? ? // 按下回車鍵和control鍵

? ? ? ? ? ? ? ? if (oEvent.keyCode == 13 && oEvent.ctrlKey) {

? ? ? ? ? ? ? ? ? ? //點(diǎn)擊提交按鈕后，把留言框中的文字提交在留言區(qū)

? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';

? ? ? ? ? ? ? ? // 清空留言框

? ? ? ? ? ? ? ? oText2.value = '';

? ? ? ? ? ? ? ? };

? ? ? ? ? ? }

? ? ? ? }

? ?

? ?

事件冒泡

子標(biāo)簽發(fā)生事件后，向父級(jí)發(fā)送該事件，一直追溯到document。如：點(diǎn)擊一個(gè)嵌套在body中的button，則該button的onclick事件也會(huì)傳遞給body、document中，觸發(fā)他們的onclick里觸發(fā)的函數(shù).

示例：

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

? ?

window.onload = function () {

? ? ? ? ? ? var oBtn = document.getElementById('button');

? ? ? ? ? ? var oDiv = document.getElementById('div');

? ? ? ? ? ? // 點(diǎn)擊buton后，button的事件會(huì)被觸發(fā)

? ? ? ? ? ? oBtn.onclick = function() {

? ? ? ? ? ? ? ? oDiv.style.display = 'block';

? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");

? ? ? ? ? ? }

? ? ? ? ? ? // 由于事件冒泡，作為父級(jí)的document的onclick事件也會(huì)被觸發(fā)

? ? ? ? ? ? document.onclick = function() {

? ? ? ? ? ? ? ? oDiv.style.display = 'none';

? ? ? ? ? ? ? ? alert("document被點(diǎn)擊了")

? ? ? ? ? ? }

? ? ? ? }

? ?

取消冒泡

由于事件冒泡會(huì)觸發(fā)父級(jí)的相關(guān)方法，所以我們經(jīng)常會(huì)“取消事件冒泡”。

取消事件冒泡的方法:event.cancelBubble=true

div {

width: 100px;

height: 100px;

background-color: red;

display: none;

}

? ?

window.onload = function () {

? ? ? ? ? ? var oBtn = document.getElementById('button');

? ? ? ? ? ? var oDiv = document.getElementById('div');

? ? ? ? ? ? // 點(diǎn)擊buton后，button的事件會(huì)被觸發(fā)

? ? ? ? ? ? oBtn.onclick = function(ev) {

? ? ? ? ? ? ? ? oDiv.style.display = 'block';

? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");

? ? ? ? ? ? ? ? // 在這里取消事件冒泡，防止事件向父級(jí)傳遞

? ? ? ? ? ? ? ? // 兼容性考慮，有的瀏覽器的事件并不是'event'，所以把點(diǎn)擊事件作為參數(shù)傳遞過(guò)來(lái)

? ? ? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? ? ? oEvent.cancelBubble=true;

? ? ? ? ? ? }

? ? ? ? ? ? // 由于事件冒泡，作為父級(jí)的document的onclick事件也會(huì)被觸發(fā)

? ? ? ? ? ? document.onclick = function() {

? ? ? ? ? ? ? ? oDiv.style.display = 'none';

? ? ? ? ? ? ? ? alert("document被點(diǎn)擊了")

? ? ? ? ? ? }

? ? ? ? }

? ?

事件的默認(rèn)行為

瀏覽器自帶的行為就是默認(rèn)行為

阻止默認(rèn)行為

只要將默認(rèn)的事件return false，就可以組織默認(rèn)行為的執(zhí)行。

示例：自定義右鍵菜單：默認(rèn)的右鍵菜單是系統(tǒng)提供的選項(xiàng)，我們可以阻止默認(rèn)的右菜單，來(lái)自定義新右鍵菜單樣式

ul {

list-style-type: none;

display:none;

position:absolute;

}

* {

margin: 0;

padding: 0;

}

? ?

? ? ? ? // 鼠標(biāo)右鍵觸發(fā)的時(shí)間

? ? ? ? document.oncontextmenu = function? (ev) {

? ? ? ? ? ? var oUl = document.getElementById('ul1');

? ? ? ? ? ? var oEvent = ev || event;

? ? ? ? ? ? oUl.style.display = 'block';

? ? ? ? ? ? oUl.style.left = oEvent.clientX + 'px';

? ? ? ? ? ? oUl.style.top = oEvent.clientY + 'px';

? ? ? ? ? ? return false;

? ? ? ? }

? ? ? ? // 鼠標(biāo)左鍵觸發(fā)的事件

? ? ? ? document.onclick? = function? (ev) {

? ? ? ? ? ? var oUl = document.getElementById('ul1');

? ? ? ? ? ? oUl.style.display = 'none';

? ? ? ? }

? ?

? ?

? ? ? ?

  • 首頁(yè)

    • ? ? ? ?

  • 登錄

    • ? ? ? ?

  • 注冊(cè)

    • 示例：輸入框中只能輸入數(shù)字和退格

    ? ?

    window.onload = function? () {

    var oText = document.getElementById('text');

    oText.onkeydown = function? (ev) {

    var oEvent = ev || event;

    if ( (oEvent.keyCode < 40 && oEvent.keyCode != 8) || oEvent.keyCode > 57 ) {

    return false;

    };

    ? ? ? ? ? ? }

    ? ? ? ? }

    拖拽

    拖拽時(shí)，鼠標(biāo)經(jīng)歷三個(gè)事件：

    onmousedown 鼠標(biāo)按下時(shí)，存儲(chǔ)當(dāng)前鼠標(biāo)距離拖拽對(duì)象左上角的距離

    onmousemove 鼠標(biāo)移動(dòng)時(shí)，根據(jù)鼠標(biāo)移動(dòng)的距離移動(dòng)拖拽對(duì)象的位置

    onmouseup 鼠標(biāo)抬起時(shí)，停止拖拽

    示例：鼠標(biāo)拖拽一個(gè)div

    demo.gif

    #div1 {

    width: 100px;

    height: 100px;

    background-color : red;

    position: absolute;

    }

    ? ?

    window.onload = function? () {

    ? ? ? ? ? ? var oDiv = document.getElementById('div1');

    ? ? ? ? ? ? // 當(dāng)鼠標(biāo)按下時(shí)計(jì)算鼠標(biāo)距離div左上角的位置

    ? ? ? ? ? ? oDiv.onmousedown = function? (ev) {

    ? ? ? ? ? ? ? ? var oEvent = ev || event;

    ? ? ? ? ? ? ? ? var oX = oEvent.clientX - oDiv.offsetLeft;

    ? ? ? ? ? ? ? ? var oY = oEvent.clientY - oDiv.offsetTop;

    ? ? ? ? ? ? ? ? // 當(dāng)鼠標(biāo)開始移動(dòng)，重新設(shè)置div的位置

    ? ? ? ? ? ? ? ? document.onmousemove = function? (ev) {

    ? ? ? ? ? ? ? ? ? ? var oEvent = ev || event;

    ? ? ? ? ? ? ? ? ? ? oDiv.style.left = oEvent.clientX - oX + 'px';

    ? ? ? ? ? ? ? ? ? ? oDiv.style.top = oEvent.clientY - oY + 'px';

    ? ? ? ? ? ? ? ? };

    ? ? ? ? ? ? ? ? // 當(dāng)鼠標(biāo)抬起，結(jié)束移動(dòng)，清除移動(dòng)事件的函數(shù)

    ? ? ? ? ? ? ? ? document.onmouseup = function? () {

    ? ? ? ? ? ? ? ? ? ? document.onmousemove = null;

    ? ? ? ? ? ? ? ? ? ? document.onmouseup = null;

    ? ? ? ? ? ? ? ? };

    ? ? ? ? ? ? };

    ? ? ? ? };

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ? ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ? ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ? ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ? ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    ? ?

    最后編輯于 ：
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
    平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

    推薦閱讀更多精彩內(nèi)容

    • 一、DOM 什么是DOM？Document Object Model(文檔對(duì)象模型)。DOM是針對(duì)HTML和XML...
      空谷悠閱讀 986評(píng)論 0贊 2
    • 我們首先要明白，我們給頁(yè)面添加效果用到的js到底是什么？js其實(shí)包含三部分：dom 文檔對(duì)象模型 bom 瀏覽...
      一直以來(lái)都很好閱讀 817評(píng)論 0贊 0
    • 事件源對(duì)象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
      孤魂草閱讀 910評(píng)論 0贊 0
    • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
      lilyping閱讀 1,899評(píng)論 0贊 1
    • 工廠模式類似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
      舟漁行舟閱讀 7,842評(píng)論 2贊 17