2. 程式人生 > >獲取事件物件

獲取事件物件

阿新 • • 發佈：2018-12-21 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滑鼠移入移出</title>
        <style>
            #box{
                width: 70px;
                height: 25px;
                line-height: 25px;
                text-align: center
 
;
            }
        </style>
    </head>
    <body>
        <div id="box">我的盒子</div>

        <script>
            var box=document.getElementById('box');

            //建立一個提示窗並且新增樣式；
            var o=document.createElement('div');
            o.style.width="50px"
 
;
            o.style.height="20px";
            o.style.border="1px solid #ccc"
            o.style.lineHeight="20px";
            o.style.textAlign="center";
            o.style.fontSize="12px";
            o.innerHTML="提示資訊";
            o.style.position="absolute";
            o.style.background="#DDDDDD"
 
;

            //滑鼠移入
            box.addEventListener('mouseover',function(e){
                console.log(e);//e  事件物件
                //客戶端視窗的位置  獲取的是數字 沒有單位
                var x=e.clientX;
                var y=e.clientY;
                //把現在的滑鼠位置 賦值給視窗的 left和top 
                o.style.left=x+5+'px';//加上單位
                o.style.top=y+5+'px';

                //當滑鼠移動上去的時候把提示窗新增到body中。
                document.body.appendChild(o);
            },false);

            //滑鼠移動
            box.addEventListener('mousemove',function(e){
                var x=e.clientX;
                var y=e.clientY;
                o.style.left=x+5+'px';
                o.style.top=y+5+'px';
            },false);

            //滑鼠移出
            box.addEventListener('mouseout',function(){
                //滑鼠移出的時候將提示窗移出
                document.body.removeChild(o);
            },false);
        </script>
    </body>
</html>

事件觸發的時候,系統會自動執行事件函式。 執行後會返回給事件函式 ，一個事件物件。
用引數接收。
這裡寫圖片描述

這裡寫圖片描述

獲取事件物件後能 獲取事件的所有資訊！

相關推薦

獲取事件物件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑鼠移入移出</title> <sty

記一次React中非同步獲取事件物件的爬坑經歷

SyntheticEvent objects are pooled 在使用React過程中，直接非同步獲取事件物件上的屬性，實際上我們拿到的值永遠是null，下面的程式碼就存在問題 const handleClick = e => { setTimeout(() => {

JS獲取事件物件，獲取事件的源物件（Firefox，IE）

做筆記，以防自己忘記~~ JS獲取事件event，不同瀏覽器有不同的做法。 例如IE下，在js函式中，通過window.event就可以獲取，不必在函式中新增什麼引數。 也可以用Prototype或者JQuery等，它們有他們對事件的包裝。還是使用JS庫比較好，不然就有下邊的麻煩。 Firefox：要傳遞

js--獲取/賦值文字值innerText/textContent、innerHTML的區別，獲取表單的值；js事件物件屬性target於currentTarget

  <body> <div id="box_text"> <p style="color:hotpink;">muzidigbig</p> <p style="color:pink">

jquery中獲取原生事件物件來解決html5中拖拽事件的bug

在做一個拖拽demo（九宮格拼圖）時，遇到一個bug,當拖動一張圖片1到另外一張圖片2的位置時，兩個位置的圖片都變成了圖片2，程式碼如下 <script type="text/javascript"> (function($){ var dragSrc; $('li').each

jsx事件獲取event物件

文章參考 下面我根據使用難易的順序做了下面三個例子 一、使用bind函式獲取event物件 react事件引數的傳遞通過繫結來實現，在傳遞時，繫結的this在前，引數在後，在定義函式時，事件物件e要放在最後 /** * 刪除列表中選中的行 * @p

獲取自定義屬性/event的觸發事件物件和繫結事件物件

1.獲取自定義屬性 var testEle = document.getElementById("test")   testEle.setAttribute("key","value"); // 設定   testEle.attributes["k

從事件物件裡獲取事件資料

事件物件：它是由JavaScript和DOM自動建立產生，它包含著事件的相關資料，如click事件包含了事件觸發位置的座標。如果我們要獲取事件資料，比如要輸出事件資料。 下面的程式碼中，要想獲取事件的座標，需要先訪問到這個自動生成的事件物件，實際上，這個事件物件，不僅是由DOM或JavaScript自動建立

js中獲取觸發事件物件的標籤名稱

/**  * 獲取當前觸發事件物件的標籤名稱  * @param event  */ function getTargetName(event){ //判斷瀏覽器，IE需調srcElement來獲取觸發事件的物件 var target = $.browser.msie ?

angular ng-click獲取觸發事件物件

ng-click="shareGoods({{item.goods_id}},$event)" 傳遞一個$event物件 通過事件物件 $event.target  獲取事件源 <div class="float_left width_50 border_b_top_eee border_b_ri

js獲取事件源及觸發該事件的物件

如何獲取事件源及觸發該事件的物件，方法有很多，js中可以通過event來實現，下面有個不錯的示例，感興趣的朋友可以參考下： function myfunction(event) { event = event ? event : window.event; var

ie 火狐 獲取事件源物件

[size=small;]以防自己忘記~~js獲取事件event，不同瀏覽器有不同的做法。[/size][size=small;]例如ie下，在js函式中，通過window.event就可以獲取，不必在函式中新增什麼引數。[/size][size=small;]</sp

position布局影響點擊事件以及冒泡獲取事件目標

　　在編寫功能時總是會出現很多意想不到的問題，現在就講講證券通投顧網遇到的兩個問題，通過舉一個相似的例子來解說。 &lt;1&gt;元素互相獨立，不存在包含於被包含 選擇城市的按鈕，為它綁定點擊事件，點擊後就彈出城市列表層，城市列表層設置了position與z-index的值來進行

獲取事件源不能重復使用id獲取

clas log bsp div image src 簽名 img alt 正確用法為： 配合標簽名使用，也不能跟類名連用 PS：當時花了半個多小時才找到原因 獲取事件源不能重復使用id獲取

根據Android Uri獲取Bitmap物件實現

通常我們在選取圖片的時候在onActivityResult回撥中呼叫intent.getData()拿到uri物件。下面來講解如何根據這個uri獲取到Bitmap物件。 首先，在Android的API中有一個MediaStore.Images.Media類，這個類有一個getBitmap靜態方法用

靈活使用標籤的data自定義屬性和事件物件

如果需要動態的給每一個標籤新增一樣的事件，且只有對應的內容改變，則可以通過data事先定義好要用的資料，然後通過事件物件獲取，data自定義屬性可以是一個字串或者是一個物件 形如：    data-address=“中華人民共和國”   data-sta

繼承beetl模板時，@Mapper註解獲取到 物件變成了 beetlsql 的mapper物件

一、問題： 專案使用 springboot ,頁面模板集成了beetl模板，在編寫Dao層時，一直報空指標異常，如圖所示， 經過除錯我們發現，同樣的使用@Mapper註解的物件最後獲取到時不一樣的，很明顯我們的專案雖然使用了beetl模板，但是我們並不想使用beetlsql，但是在這裡為什麼

【Windows原理】IO非同步-等待事件物件

/* 同步IO的缺點是, 在讀寫檔案時, 如果檔案太大, 或者讀寫的時間太長, 就會在讀寫函式中 阻塞住. 非同步IO解決了這個問題, 非同步IO讀寫檔案時, 檔案再大也不會阻塞住 但是非同步IO要完成這樣的特性是有一點付出的 非同步讀寫檔案後, 需要通過一些方式才能知道檔案讀寫(IO

【Windows原理】執行緒同步-事件物件2

#include "stdafx.h" #include <windows.h> HANDLE g_hEventA = nullptr; // 三個只讀執行緒 DWORD WINAPI ThreadProcA(LPVOID lpParam) { WaitForSin

【Windows原理】執行緒同步-事件物件

#include "stdafx.h" #include <windows.h> HANDLE g_hEventA = nullptr; HANDLE g_hEventB = nullptr; DWORD WINAPI ThreadProcA(LPVOID lpParam) {