1

我编写了一个 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>
4

2 回答 2

1

我在教程部分查看了您的 mondrian 示例，发现还有一种非常简单的方法可以在加载后将 addEventListener 附加到文档。您可以在 html 文档的标题中使用 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)
于 2018-02-16T09:58:04.817 回答
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>
于 2018-02-04T09:15:03.137 回答