使用鼠標事件調用函數而不附加到HTML元素？

-2

我正在參加網絡開發課。今天，老師給了我們一段代碼，提出了一些我通過自己的搜索無法令人滿意地解決的問題。有問題的代碼本質上是這樣的：使用鼠標事件調用函數而不附加到HTML元素？

<script> 
function selectmouse(e){ 
... 
... 
} 

document.onmousedown = selectmouse; 
</script>

我的第一個問題，這是一種調用函數的合法方式嗎？這是否完成了？我當然熟悉的HTML元素調用函數的典型方式，例如

<body onmousedown="selectmouse(event)">

的代碼應該被調用函數，並傳遞事件對象的onmousedown事件。在玩了一段時間後，我發現了一些不尋常的東西。首先，如果我在函數調用之後放置括號，就像我習慣做的那樣（即selectmouse（）;），那麼函數在加載頁面時立即解析，值爲變量'undefined'。這對我來說很直觀，因爲我假設瀏覽器將它當作一個變量賦值，因此在分析代碼時調用該函數，因爲它通常會分配一個變量。

但是，當我刪除'（）'並將其留在上面時，就會發生奇怪的部分。在這種情況下，它似乎功能就像她想要的那樣。當鼠標在身體的任何部分被按下時，它會調用函數，並且它將事件對象作爲函數的變量。但我不明白爲什麼。我找不到任何類似於在線的參考資料，而且我以前從未見過類似的資料。這是做這種事的合法方式嗎？還是這種錯誤的代碼恰好是出於某種原因而工作的，並且可能會在將來導致問題？它爲什麼工作？

來源

2014-03-04 SometimesDirty

對於調用函數時，你必須選擇文件或它的HTML ....的 –

可能重複[什麼是「第一類對象」是什麼意思？（http://stackoverflow.com/questions/ 705173/what-is-means-by-first-class-object） – Phil

理想情況下，它應該是'document.addEventListener（'mousedown'，selectmouse，false）'。請參閱https://developer.mozilla.org/en-US/docs/Web/API/EventTarget。addEventListener – Phil

document.onmousedown = selectmouse; //note: never do this except in old browsers

當然，這是怪我發生了，當我刪除了「（）」，離開它，因爲它的一部分已在上面編碼。在這種情況下，它似乎像她想要的那樣運作。

這並不奇怪。您正在將該函數的引用傳遞給瀏覽器，而不是執行它。

例如，你有這樣的功能：

function callback(){ 
    alert("clicked!"); 
} 

document.body.onclick = callback;

您通過參考onclick，瀏覽器會知道什麼功能時，該事件被觸發調用。但是，如果你不喜歡這樣寫道：

document.body.onclick = callback();

這將被評估爲：

document.body.onclick = alert("clicked!"); 
//Note that this is simplified explanation to visualize what is happening. 
//The returned value of alert() is not assigned to onclick. 
//To be exact the returned value of callback() is the one that is being assigned. 
//Similar to: 
// ...onclick = (function(){ alert("clicked!"); })();

然後你會看到一個警告，瀏覽器將繼續執行代碼的其餘部分：

document.body.onclick = undefined;

<body onmousedown="selectmouse(event)">  <!-- Don't do this too -->

的parenthes es是必要的，因爲此代碼不會立即執行。只有在事件被觸發時纔會執行。

無論如何，你應該不重視使用.onmousedown或onmousdown="..."兩個事件。有這樣做的更好的辦法：

element.addEventListener("mousedown", callback, false);

原因：如果使用onmousedown屬性，你只能連接一個mousedown事件。在大多數情況下，您會想要附加以上的。

而且附加事件的直列威力造成安全問題（cross-site scripting），這是發展的Chrome應用/擴展正好why Google decided to prohibit all developers from using them。

來源

2014-03-04 05:09:19

我不會說*永遠*。請參閱https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Older_way_to_register_event_listeners（向下滾動到*更老的方式註冊事件監聽器*，MDN的標題鏈接在該頁面上是代理） – Phil

@菲爾 - 那麼它已經是2014年了，我們應該遠離IE <9 ... –

太真了！我只是認爲*從不*有點強:) – Phil

這是合法的代碼，並且正在運行。

您對此感到滿意的方式只是我們在網絡演進過程中嘗試過的一種方法，但目前我們應該更好地使用您展示的第二種方式，儘管它更改了一些，使您更好地理解它，事件綁定。

當你

function selectmouse(e){ 
... 
... 
}

的JavaScript將創建一個名爲selectmouse變量並保存功能的變量。因此selectmouse是一個類型爲function的變量，函數體爲其值。

document另一方面可以涉及class或特別是object這是一個實例。每個document和每個HTML元素或DOM node都可以在其中存儲變量以存儲要在諸如onmousedown之類的用戶事件上調用的函數。

這樣

document.onmousedown = selectmouse;

當我們inturn說

當鼠標按下發生在文件，命名selectmouse 功能應該被稱爲

如果你

document.onmousedown = selectmouse();

這意味着

立即運行功能selectmouse並得到結果，分配的結果onmousedown事件的DOM節點文檔的事件。

如果你問爲什麼，這是從形式

<body onmousedown="selectmouse(event)">

要以簡單的方式回答拆開，HTML是超文本標記語言，其目的無非是代表格式化的數據，快捷網絡冥想的進化使得它像behaviours這樣和presentation像內聯CSS一樣瘋狂。所以爲了使行爲和演示不再使用HTML，我們做了一個更好的設計。

請花一點時間來看看如何爲bind函數指定一個事件，這個事件在做同樣的事情時是當前的權衡。

有關詳細說明，請sectio PPK博客的事件here

來源

2014-03-04 05:05:45 sabithpocker

我很困惑。我展示的第二種方式是我感覺舒服的方式，第一種方式是我有一個問題。 – SometimesDirty

請檢查更新後的答案，謝謝 – sabithpocker

現在，您的答案變得更有意義，非常感謝。我將花一些時間來處理您提供的鏈接。 – SometimesDirty

-2

<body onmousedown="selectmouse(event)">

在這個例子中，瀏覽器計算表達式selectmouse（事件）的結果，並將其分配到身體的onmousedown事件屬性，事件是不確定的，所以它的selectmouse不返回任何東西結果未定義。

它相當於以下的，如果它是一個腳本標籤中

<script> 
    function selectmouse(e) { 
    } 

    document.body.onmousedown = selectmouse(event); 
</script>

<body onmousedown="selectmouse">

當您刪除（），您要分配到onmousedown事件屬性的函數。現在，當mousedown事件發生時，瀏覽器會觸發回調方法並且它會跳出正文，將當前事件作爲您聲明爲「e」的參數傳遞。如果另一個元素也聲明瞭onmousedown事件處理程序，但它取消了該事件（通過調用event.cancelBubble = true），則會調用body的onmousedown處理程序而不是。

<script> 
    function selectmouse(e) { 
    } 

    document.body.onmousedown = selectmouse; 
</script>

來源

2014-03-04 05:11:48

爲什麼選擇投票？ –

-1

我認爲這是正確的，因爲函數被調用的腳本中，就好像它是一個對象，我是不是做的最好的方法，我會像這樣（用jQuery）：

$(document).mousedown(function (event) { 
    // here the content of the function 
});

來源

2014-03-04 05:16:37 jorgeregidor

使用鼠標事件調用函數而不附加到HTML元素？

回答

相關問題