1. 程式人生 > >JavaScript 事件Event的相容寫法。event屬性(pageX,clientX)

JavaScript 事件Event的相容寫法。event屬性(pageX,clientX)

event.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


    <script>
        //點選頁面的任何部分
         document.onclick = function (event) {
             //相容寫法
             event = event || window.event;  //相容寫法

            console.log(event);
            console.log(event.timeStamp);  //事件生成的日期和時間(相對頁面載入完成的事件,單位秒)
            console.log(event.bubbles);   //返回布林值,事件是否是起泡事件型別
            console.log(event.button);    //返回事件觸發時,哪個滑鼠按鈕被點選(左鍵:0,中鍵:1)
            console.log(event.pageX);     //滑鼠在整個網頁中的X位置
            console.log(event.pageY);
            console.log(event.screenX);   //相對螢幕(顯示器)的位置
            console.log(event.screenY);
            console.log(event.target);    //事件被傳送到的物件(文件Document  (this))
            console.log(event.type);      //事件的型別("click")
            console.log(event.clientX);   //在可見區域中(相對瀏覽器)的位置
            console.log(event.clientY);

         }

    </script>
</body>
</html>


相關推薦

JavaScript 事件Event相容寫法event屬性(pageX,clientX)

event.html: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> &

Javascript事件函數傳遞的event對象參數

都是 turn button pro keycode art 檢索 cron 鼠標移動 Event屬性和方法:1. type:事件的類型,如onlick中的click;2. srcElement/target:事件源,就是發生事件的元素;3. button:聲明被按下的鼠標

事件物件相容寫法

 // 新增控制代碼              addHandler:function(element,type,handler){           &nb

JavaScript事件屬性event.target

nod tar body pre bin cti ext class tag <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

Javascript事件迴圈——Event loop

引言 Javascript是一門單執行緒的指令碼語言,無法進行多執行緒程式設計; 因此為了不阻塞程式設計,Javascript通過事件迴圈的方式解決耗時任務,實現類多執行緒程式設計; 單執行緒 單執行緒意味著在瀏覽器中,同一時間只能做一件事,其他的行為和事件都

JS動態新增移除事件 和 獲取Event (相容IE和Firefox)

今天小弄了一下JS事件,主要說一下FF和IE相容的問題 物件名.addEventListener("事件名(不帶ON)",函式名,true/false);(FF下) 物件名.attachEvent("事件名",函式名);(IE下) 說明:   事件名稱,要注意的是"

Javascript 事件迴圈(Event Loop)

規則:同一時間只有一個任務在執行,同時執行的過程不能被中途打斷事件佇列型別:macrotask queue 和microtask queue常見的macrotask 和 microtask 如下 :macrotask queue : Mouse Event

javascript事件監聽機制(二)——jquery的Event物件

jQuery封裝了瀏覽器的事件監聽方法,相容了各個瀏覽器的區別,對外提供一套適合於jquery物件的事件監聽介面。Event物件的核心方法主要有三個,add,remove和trigger。 elem對於事件的維護,是通過在elem的內部空間裡(_data訪問的),用一個ev

window.event相容寫法

1.在HTML中新增事件 <div class="left" onclick="goLeft(event)"></div> function goLeft() { alert(e.srcElement || e.tar

[js點滴]JavaScript事件Event物件03

Event物件 事件發生以後,會生成一個事件物件,作為引數傳給監聽函式。瀏覽器原生提供一個Event物件,所有的事件都是這個物件的例項,或者說繼承了Event.prototype物件。 Event物件本身就是一個建構函式,可以用來生成新的例項。 event

一文梳理JavaScript 事件迴圈(Event Loop)

事件迴圈(Event Loop),是每個JS開發者都會接觸到的概念,但是剛接觸時可能會存在各種疑惑。 眾所周知,JS是單執行緒的,即同一時間只能執行一個任務。一般情況下這不會引發問題,但是如果我們有一個耗時較多的任務,我們必須等該任務執行完畢才能進入下一個任務,然而等待的這段時間常常讓我們無法忍受,因為我們

一篇文章圖文並茂地帶你輕鬆學完 JavaScript 事件迴圈機制(event loop)

## JavaScript 事件迴圈機制 (event loop) 本篇文章已經預設你有了基礎的 `ES6` 和 `javascript語法` 知識。 本篇文章比較細緻,如果已經對同步非同步,單執行緒等概念比較熟悉的讀者可以直接閱讀執行棧後面的內容瞭解 event loop 原理 在瞭解 `JavaSc

JavaScript中判斷鼠標按鍵(event.button)

false java turn style .com col ref blog num <div id="test"></div> <script> document.oncontextmenu=function(){

[外文理解] DDD創始人Eric Vans:要實現DDD原始意圖,必須CQRS+Event Sourcing架構

由於 interview ont pos 面向 trac height amp style 原文:http://www.infoq.com/interviews/Technology-Influences-DDD# 要實現DDD(domain drive

JS中event物件中的常見屬性

在事件函式中,其實是可以寫引數的,寫法: <script> var btn = document.getElementById("btn"); btn.onclick = function (event) { var e = event ||

vue.js v-on事件使用,vue.js event事件繫結

vue.js v-on事件使用,vue.js event事件繫結   ================================ ©Copyright 蕃薯耀 2018年12月04日 http://fanshuyao.iteye.com/   <!DOCT

大量日誌資料複雜事件處理技術(Complex Event Processing 簡稱CEP)

複雜事件處理概念 複合事件是由史丹佛大學的David Luckham 與Brian Fraseca 所提出,David Luckham 與Brian Fraseca 於1990年提出複合事件架構,使用模式比對、事件的相互關係、事件間的聚合關係,目的從事件雲(event cl

JavaScript事件相容(事件的繫結addEventListener/移除removeEventListener,阻止冒泡/預設)

一.事件相容 1.事件繫結:addEventListener 用於註冊事件處理程式(為文件節點).IE 中為 attachEvent,我們為 什麼講addEventListener而不講attachEvent呢?一來attachEvent比較簡單,二來addEventListener才是

js事件冒泡和阻止瀏覽器預設行為的相容寫法

//阻止事件冒泡 相容w3c瀏覽器 function cBubble(e){ if(e.stopPropagation){ e.stopPropagation();//ie9+

獲取元素的CSS樣式屬性值 IE相容寫法

/** * 獲取元素的CSS樣式屬性值 */function css(element, attrName) {   /*if (window.getComputedStyle)   return window.getComputedStyle(element)[attrName]   return eleme