Python 转译 addEventListener

Question

我已经编写了一个 Python 程序，用于将 Transcrypt 翻译成 Javascript。我无法使 addEventListener 函数正常工作。有什么想法吗？

代码如下 dom7.py:

class TestSystem:

def __init__ (self):
    self.text = 'Hello, DOM!'
    self.para = 'A new paragraph'
    self.textblock = 'This is an expandable text block.'
    self.button1 = document.getElementById("button1")
    self.button1.addEventListener('mousedown', self.pressed)

def insert(self):,
    document.querySelector('output').innerText = self.text
    # document.querySelector('test').innerText = "Test"+self.button1+":"

def pressed(self):
    container = document.getElementById('textblock')
    newElm = document.createElement('p')
    newElm.innerText = self.para
    container.appendChild(newElm)

testSystem = TestSystem()

下面是对应的dom7.html：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="__javascript__/dom7.js"></script>
<title>Titel</title>
</head>
<body onload=dom7.testSystem.insert()>
<button id="button1">Click me</button><br>
<main>
    <h1>DOM examples</h1>
    <p>Testing DOM</p>
    <p>
        <output></output>
    </p>
  <p>
    <test>Test String:</test>
  </p>

  <div id="textblock">
    <p>This is an expandable text block.</p>
  </div>
</main>
</body>
</html>

Answer 1

问题是您的 TestSystem 构造函数在 DOM 树准备好之前被调用。有三种方法来处理这个问题，最后一种是最好的。

第一种方法是在填充正文后包含脚本：

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerText = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

testSystem = TestSystem()

和：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <title>Titel</title>
    </head>
    <body onload=dom7.testSystem.insert()>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>

            <script src="__javascript__/dom7.js"></script>
        </main>
    </body>
</html>

您的 insert 函数可能调用得太早，因此可能无法运行。

第二种方法是在开头包含脚本并调用初始化函数将事件处理程序连接到 DOM:

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerText = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

def init ():
    testSystem = TestSystem()

和：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script src="__javascript__/dom7.js"></script>

        <title>Titel</title>
    </head>
    <body onload=dom7.testSystem.insert()>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
            <script>dom7.init ();</script>
        </main>
    </body>
</html>

仍然有可能某些浏览器在页面加载之前调用初始化函数，尽管这种情况很少见。除此之外，insert 方法再次被过早调用。

解决这两个问题的第三种也是最好的方法，是运行在页面加载事件之后进行初始化，并在创建之后调用 insert你的 testSystem，例如在初始化函数中：

class TestSystem:

    def __init__ (self):
        self.text = 'Hello, DOM!'
        self.para = 'A new paragraph'
        self.textblock = 'This is an expandable text block.'
        self.button1 = document.getElementById("button1")
        self.button1.addEventListener('mousedown', self.pressed)

    def insert(self):
        document.querySelector('output').innerHTML = self.text
        # document.querySelector('test').innerText = "Test"+self.button1+":"

    def pressed(self):
        container = document.getElementById('textblock')
        newElm = document.createElement('p')
        newElm.innerText = self.para
        container.appendChild(newElm)

def init ():
    testSystem = TestSystem()
    testSystem.insert ()

和：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script src="__javascript__/dom7.js"></script>

        <title>Titel</title>
    </head>
    <body onload="dom7.init ();">
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
        </main>
    </body>
</html>

Answer 2

我在教程部分查看了您的 mondrian 示例，发现还有一种非常简单的方法可以在文档加载后将 addEventListener 附加到文档。您可以使用 html 文档的 header 中的 DOMContentLoaded 属性来执行此操作：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="__javascript__/addEventListener_example1.js"></script>
        <script>document.addEventListener("DOMContentLoaded", addEventListener_example1.init)</script>
        <title>Titel</title>
    </head>
    <body>
        <button id="button1">Click me</button><br>
        <main>
            <h1>DOM examples</h1> 
            <p>
                Testing DOM
            </p>           
            <p>
                <output></output>
            </p>           
            <p>
                <test>Test String:</test>
            </p>
            <div id="textblock">
                <p>This is an expandable text block.</p>
            </div>
        </main>
    </body>
</html>

addEventListener_example1.py 的代码为：

#!/usr/bin/env python
# -*- coding: utf-8 -*-

def init():
    insert()

def insert():
    document.querySelector('output').innerHTML = 'Hello, DOM!'
    button1 = document.getElementById("button1")
    button1.addEventListener('mousedown', pressed)

def pressed():
    para = 'A new paragraph'
    container = document.getElementById('textblock')
    newElm = document.createElement('p')
    newElm.innerText = para
    container.appendChild(newElm)

Python 转译 addEventListener

Python Transcrypt addEventListener

python

addeventlistener

transcrypt