Question

你好我在使用2级DOM来处理事件时遇到了麻烦，我已经环顾四周但只是不太明白它是如何工作的，并且总是最终做了如下的简单代码：

<element onClick = " some code" > </element>

而不是从html代码外部到达元素，请帮助，我知道这是一个简单的主题，但只是无法使其工作... 还有一些css代码，但它与我的问题无关，所以这里是我的代码：

<script type="text/javascript">

    function rotate( xy , deegrees){        

            document.getElementById("cube").style.WebkitTransform = " rotate"+xy+"("+deegrees+"deg)";
    }


             // so this is where its supposed to be  but not working 
             //  whats wrong ? 

    document.getElementById("upp").addEventListener("click", rotate('X', 540), true);

    myFunction();

</script>
</head>

<body>

document.getElementById('cube').style.WebkitTransform = 'rotateX(90deg)'; 

<div id="button_container">
<button id="upp" onMouseOver=" rotate('X',90); "> UP</button>
<button id="downn" onMouseOver = " rotate('X',-90); "> DOWN</button>
<button id="leftt" onMouseOver = " rotate('Y',00); "> LEFT</button>
<button id="rightt" onMouseOver = " rotate('Y',-90); "> RIGHT</button>
</div>
    <section class="container">

        <div id="cube">

            <figure class="front">front</figure>
            <figure class="back">back</figure>
            <figure class="right">right</figure>
            <figure class="left">left</figure>
            <figure class="top">top</figure>
            <figure class="bottom">bottom</figure>          

        </div>          
    </section>

Answer 1

这是一个函数调用：

rotate('X', 540)

它是一个函数调用，无论它出现在何处，例如当您调用addEventListener时：

document.getElementById("upp").addEventListener("click", rotate('X', 540), true);

因此，您传递了调用＆＃34;旋转＆＃34;的结果。函数而不是函数本身：

document.getElementById("upp").addEventListener("click", function() { rotate('X', 540) }, true);

通过将函数调用包装在另一个函数中，正确地为addEventListener()提供了一个事件处理程序，当＆＃34;单击＆＃34;发生的情况。

除此之外，您还尝试在之前出现的脚本块中添加事件处理程序您尝试影响的DOM元素。当脚本运行时，DOM不会成为您正在寻找的ID的元素。将事件处理程序设置包装在＆＃34; load＆＃34;事件处理程序，或将脚本块移动到<body>的末尾。

Answer 2

在应用DOM之前，您的代码可能正在运行。将脚本标记移动到页面底部或使用onload函数在DOM完成其加载阶段后执行代码。

http://api.jquery.com/ready/

通过确保您可以记录您尝试获取对...的引用的元素来验证这一点。

console.log(document.getElementById("upp"));

应返回DOM元素。

2级DOM处理不能正常运行javascript

2 个答案: