haskell – GHCJS-DOM事件指导

前端之家收集整理的这篇文章主要介绍了haskell – GHCJS-DOM事件指导前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试了解如何使用GHCJS-DOM创建GUI.我一直在看你好世界的例子 https://github.com/ghcjs/ghcjs-dom-hello,这是微不足道的.添加新节点非常简单.我不能做的,并且无法从库文档(仅签名)中解决,是添加一些事件.例如,在鼠标单击时向主体添加新节点.

我希望避免使用像JQuery这样的JS库,因为我想通过GUI在GHC(webkit)和GHCJS之间移植.

最后,我希望能够将一个鼠标事件表达为FRP事件,但我会一步一步解决.

如果有人有任何指导我会非常感激.我已经使用了haskell几年了,但这是我第一次尝试使用DOM.

解决方法

您可以从许多地方获取有关DOM的信息,包括 mozilla.这是一个为文档正文中的点击事件添加事件处理程序的示例…
  1. module Main (
  2. main
  3. ) where
  4.  
  5. import Control.Applicative ((<$>))
  6. import Control.Monad.Trans (liftIO)
  7. import GHCJS.DOM
  8. (enableInspector,webViewGetDomDocument,runWebGUI)
  9. import GHCJS.DOM.Document (documentGetBody,documentCreateElement)
  10. import GHCJS.DOM.HTMLElement (htmlElementSetInnerHTML,htmlElementSetInnerText)
  11. import GHCJS.DOM.Element (elementOnclick)
  12. import GHCJS.DOM.HTMLParagraphElement
  13. (castToHTMLParagraphElement)
  14. import GHCJS.DOM.Node (nodeAppendChild)
  15. import GHCJS.DOM.EventM (mouseClientXY)
  16.  
  17. main = runWebGUI $\ webView -> do
  18. enableInspector webView
  19. Just doc <- webViewGetDomDocument webView
  20. Just body <- documentGetBody doc
  21. htmlElementSetInnerHTML body "<h1>Hello World</h1>"
  22. elementOnclick body $do
  23. (x,y) <- mouseClientXY
  24. liftIO $do
  25. Just newParagraph <- fmap castToHTMLParagraphElement <$> documentCreateElement doc "p"
  26. htmlElementSetInnerText newParagraph $"Click " ++ show (x,y)
  27. nodeAppendChild body (Just newParagraph)
  28. return ()
  29. return ()

猜你在找的HTML相关文章