Question

我是JavaScript的新手，试图学习事件处理程序。看一下这个小提琴http://jsfiddle.net/mjmitche/uV4kv/，有人能告诉我为什么单击链接时弹出窗口没有出现？

我还复制了以下代码

<a href="#" title="click me" id="clickLink">click me</a>


function addEventHandler(oNode, sEvt, fFunc, bCaptures){
    if (typeof(window.event) != "undefined")
        oNode.attachEvent("on"+sEvt, fFunc);
    else
        oNode.addEventListener(sEvt,fFunc,bCaptures);
}

function onLinkClicked(e) {
    alert("you clicked the link");
}
function setUpClickHandler(){
    addEventHanlder(document.getElementById('clickLink'), "click", onLinkClicked, false);
}

addEventHandler(window,"load",setUpClickHandler,false);

Answer 1

基本上有三个问题：

你有一些拼写错误，例如“Hanlder”代替“Handler”和“Sevt”而不是“sEvt”。
代码已在页面加载后运行，因此您永远不会调用添加到window的事件处理程序。将jsFiddle从onLoad更改为no wrap (head)。
您“IE检测”不起作用。我在Chrome中遇到此错误：

未捕获的TypeError：对象http://fiddle.jshell.net/_display/#没有方法'attachEvent'。

最好是测试函数window.attachEvent是否存在。我还认为window.event仅在发生事件时可用。

如果更正，your code will run (DEMO)。

补充说明：

不必在每次调用函数时测试支持哪种方法（即attachEvent或addEventListener）。它不会在页面的生命周期中发生变化。最好只在开始时测试一次。例如：

var addEventHandler = (function() {
    if(window.attachEvent) {
        return function(oNode, sEvt, fFunc) {
            oNode.attachEvent("on"+sEvt, fFunc);
        };
    }
    else {
        return function(oNode, sEvt, fFunc, bCaptures) {
            oNode.addEventListener(sEvt,fFunc,bCaptures);
        };
    }
}());

这会将支持的功能分配给addEventHandler。

Answer 2

有几个问题：

你有一个反复出现的拼写错误，“Hanlder”而不是“Handler”。至少有两个，一个用于执行setUpClickHanlder（原文如此）功能，另一个用于addEventHanlder）。
另外，你有“Sevt”，你的意思是“sEvt”。（JavaScript区分大小写。）

Let tools help you。使用浏览器为您提供显示错误的控制台。使用调试器单步执行代码，在运行时使用检查器查看变量值等。

Answer 3

你的addEventHandler需要调整：

function addEventHandler(oNode, sEvt, fFunc, bCaptures) {
    oNode.attachEvent ? oNode.attachEvent ("on" + sEvt, fFunc) :
                        oNode.addEventListener (sEvt, fFunc, bCaptures);
}

事件处理程序本身需要检查window.event

JavaScript事件处理程序 - 为什么没有警报？

3 个答案: