GHCJS事件指南

Question

我试图了解如何使用GHCJS创建GUI。我一直在看hello示例https://github.com/ghcjs/ghcjs-dom-hello，这很简单。添加新节点很简单。我不能，也不能从库文档(只有签名)中计算出的是添加一些事件。例如，在鼠标单击时向主体添加一个新节点。

我希望避免使用像JQuery这样的JS库，因为我希望by GUI能够在GHC (webkit)和GHCJS之间进行移植。

最终，我希望能够将鼠标事件表达为玻璃钢事件，但我会一步一步地满足。

如果有人有指导的话，我会非常感激的。我已经使用haskell几年了，但这是我第一次涉足DOM。

Answer 1

您可以从包括莫兹拉在内的许多地方获得有关DOM的信息。下面是一个示例，它为文档体上的单击事件添加了一个事件处理程序.

module Main (
    main
) where

import Control.Applicative ((<$>))
import Control.Monad.Trans (liftIO)
import GHCJS.DOM
       (enableInspector, webViewGetDomDocument, runWebGUI)
import GHCJS.DOM.Document (documentGetBody, documentCreateElement)
import GHCJS.DOM.HTMLElement (htmlElementSetInnerHTML, htmlElementSetInnerText)
import GHCJS.DOM.Element (elementOnclick)
import GHCJS.DOM.HTMLParagraphElement
       (castToHTMLParagraphElement)
import GHCJS.DOM.Node (nodeAppendChild)
import GHCJS.DOM.EventM (mouseClientXY)

main = runWebGUI $ \ webView -> do
    enableInspector webView
    Just doc <- webViewGetDomDocument webView
    Just body <- documentGetBody doc
    htmlElementSetInnerHTML body "<h1>Hello World</h1>"
    elementOnclick body $ do
        (x, y) <- mouseClientXY
        liftIO $ do
            Just newParagraph <- fmap castToHTMLParagraphElement <$> documentCreateElement doc "p"
            htmlElementSetInnerText newParagraph $ "Click " ++ show (x, y)
            nodeAppendChild body (Just newParagraph)
            return ()
    return ()