函数调用混乱事件处理答案

【问题标题】：Function calling messed event handling函数调用混乱事件处理
【发布时间】：2013-07-13 10:55:36
【问题描述】：

我仅在 eventhandle() 在正文加载后产生输出后触发事件（聚焦输入元素）。 cmets 是事件触发调用事件句柄时产生的输出。

<input type="text" value="xyz" ></input>
<script>
    eventhandle();
    document.getElementsByTagName("input")[0].onclick=eventhandle
    function eventhandle()
    {
        alert(this.value);//works
        alert(event);    //works
        alert(event.type)//Error for all the properties of event object
    }
</script>

如果我在目标上的 DOM 触发事件之后调用 eventhandle()，这个问题就会得到解决。

<input type="text" value="xyz" ></input>
<script>
    document.getElementsByTagName("input")[0].onclick=eventhandle
    function eventhandle()
    {
        alert(this.value);
        alert(event.type); //works for all properties of event object
        alert(event)       //works
    }
    eventhandle();
</script>

我无法理解错误发生的原因以及如何解决

【问题讨论】：

标签： javascript html function event-handling this

【解决方案1】：

首先，我不知道你为什么这样称呼事件句柄，我的意思是eventhandle()？事件句柄不是直接调用的，它会在事件触发后调用。

其次，您收到错误是因为调用事件句柄函数时，您的页面没有完全加载。你应该先使用 window.onload = your_handler

【讨论】：

我调用了 eventhandle() 来测试 javascript 是否在开始执行 javascript 之前解释事件处理函数，就像任何其他函数声明一样。我发现 javascript 甚至在事件触发之前就解释了该函数。跨度>
我认为你的事件处理程序声明应该是：function eventhandle(event){// do something with your event.}
请删除函数调用，我认为它是先调用的，所以您遇到了错误。
tahts 我的问题是什么？为什么会这样？
有一个全局对象名为：event。但是它的“类型”属性没有定义，这个属性只在事件被实际触发时定义。你甚至在任何事件被触发之前就先调用了这个函数，所以 ERROR!

【解决方案2】：

我不明白为什么会发生错误

此时您手动调用eventhandle()，没有触发任何事件，因此全局event 变量没有值。

以及如何解决

正如您在此处看到的，将调用放在代码末尾实际上并不能解决错误：http://jsfiddle.net/M7rXK/。问题还是一样。

【讨论】：

@chetanmehta: 全局变量event 一直存在（至少在 IE 和 Chrome 中），但是当没有触发事件时它没有值。
还有什么你不明白的？ window.event 仅在触发实际事件时才具有值。您正在“手动”调用eventhandle，即不是响应事件，因此window.event是undefined。
你的事件对象描述没问题，但是当手动调用 eventhandle() 时不会发生错误，而是在事件触发时发生。
它对我来说很好用：jsfiddle.net/M7rXK/1。但是它在 Firefox 中不起作用，因为 event 对象作为参数传递给处理程序，它不是全局的。要使其在 FF 中工作，请使用 function eventhandle(event) { event = event || window.event; ... }。请查看quirksmode.org/js/events_tradmod.html 了解更多信息。

【解决方案3】：

好的，这是我的代码：

<input type="text" value="xyz" ></input>
<script>
    // eventhandle(); I hate this, verymuch =="
    document.getElementsByTagName("input")[0].onclick=eventhandle
    function eventhandle(event) // please parse a parameter represent the event here
    {
        alert(this.value);//works
        alert(event);    //works
        alert(event.type)// If works, plz tell me :D
    }
</script>

【讨论】：

我没有兼容浏览器的经验，可能是你先声明句柄，然后绑定句柄。或者如果您有其他解决方案，请告诉我
@ricky-for Ie8 使用 AttachEvent
eventhandle() 被手动调用以检查 javascript 引擎是否像任何其他函数声明一样在代码执行开始之前解释事件处理函数

【解决方案4】：

事件不会在 Firefox 中退出。以下代码应该在大多数浏览器中都可以工作：

document.getElementsByTagName("input")[0].onclick=eventhandle
function eventhandle(e)
{
    var event = e || window.event;
    console.log(this.value); // works
    console.log(event.type); //works for all properties of event object
    console.log(event)       //works
}
// trigger the click event without actually clicking on it
document.getElementsByTagName("input")[0].click();

在 IE 中你必须按 F12 来打开开发者工具才能看到 console.log，否则会产生错误。在大多数其他浏览器中，您也必须按 F12 才能打开控制台并查看控制台消息，但如果未打开它不会产生错误。

【讨论】：