Question

我是javascript的新手，我正在尝试创建一个内部具有某些html的元素。

这是我的代码：

function newTask()
    {
        var newtask = document.CreateElement('li');
        newtask.setAttribute('id','newtask');
        newtask.innerHTML="DeveloperSnippets";
        document.getElementById('newtaskcontainer').appendChild(newtask);
        document.getElementById('newtask').innerHTML='<input type="text" size="" value="Click here to add new task"> <a href=""><img src="IMG/delete.png" alt="delete" class="fr" /></a>';
    }

我相信这是正确的，但我不知道如何在用户点击按钮时触发它。我在外部js文件中有这个代码，所以我不想要任何内联javascript。

更新

嘿，感谢所有帮助人员，我在连接我的JS文件时遇到了问题，这就是为什么你的代码都不能正常工作的原因，但是随着时间的推移，我意识到我自己已经发现了代码的问题。但如果你们想要，你们仍然可以帮助我:)。

这就是我现在所拥有的：

function newTask()
{
    var addTask= document.createElement("div");
    addTask.id = "newtask";
    addTask.innerHTML = "/* My HTML */"
    document.getElementById("newtaskcontainer").appendChild( addTask);
    $("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500);
}

不幸的是，我不得不使用html onclick属性，但是现在这样做了。我遇到的问题是因为最后一行代码

$("#newtask").animate({opacity: "1.0", left: "+=1000"}, 500);

它不再创建div，它只是继续将div推到一边，而我需要它做的是创建一个从左边滑入的div（它确实如此），但是当我点击按钮获得一个新的div，它实际上创建了一个新的div，而不是只是向前推进前一个div。

我希望这是有道理的，非常感谢你的帮助。

Answer 1

最简单的方法是将函数指定为onclick处理程序。

document.getElementById('my-button').onclick = newTask;

Event listeners是更专业的方式，特别是因为它们添加事件处理程序而不是覆盖（如onclick），但由于W3C模型和Microsoft模型都不适用于所有浏览器，如果需要，最好使用像jQuery这样的框架来实现更强大的行为。

Answer 2

有三种方法可以不显眼地注册点击事件，即HTML中没有任何内联脚本或onclick属性。 Matchu描述的旧方式，IE方式和W3C标准方式。最后两个是“现代”方法，它相对容易支持。

var button = document.getElementById('button_id');
if (button.attachEvent) {
    //handle IE
    button.attachEvent('onclick', handlerFunc);
} else {
    //handle other browsers
    button.addEventListener('click', handlerFunc);
}

一些重要的警告。首先，请注意事件名称的不同之处。 W3C版本采用事件名称，开头没有“打开”。

其次，this关键字在两种情况下的处理方式不同。使用addEventListener时，handlerFunc中的代码可以使用this来引用触发事件的DOM对象。

当使用特定于IE的attachEvent时，this关键字指向窗口对象，这是非常无用的。要获得事件的目标，您需要使用事件对象，该事件对象的处理方式也不同。

这给我们带来了第三个区别。在W3C标准方法中，事件对象被传递给处理函数。因此，当您定义处理程序时，只需说出function handlerFunc(e) {...}，就可以使用e获取有关事件性质的各种信息。

在特定于IE的.attachEvent中，事件对象放在window.event中。您可以在window.event.target中获取正在处理的事件的目标。

要处理这两种情况，请按照以下方式编写处理程序：

function handlerFunc(e) {
    var event = e || window.event,
        target = event.target;
    //you event code here...
}

event获得参数e或window.event。无论哪个存在。

Answer 3

你应该使用一个jQuery插件......

开玩笑吧。在HTML代码中添加“onclick”属性，并将该函数作为参数。

<button onclick="newTask();">Click Me!</button>

或者，您可以为onclick处理程序分配一个函数。

document.getElementById('your_button_id').onclick = newTask;

但这就是W3C希望你这样做的方式：

document.getElementById('your_button_id').addEventListener('click', newTask, false);

编辑：

有一种跨浏览器的方式将所有这些放在一起（用Google搜索“跨浏览器javascript事件” - 取自http://javascript.about.com/library/bldom21.htm）：

function addEvent(el, eType, fn, uC) {
  if (el.addEventListener) {
   el.addEventListener(eType, fn, uC);
   return true;
  } else if (el.attachEvent) {
   return el.attachEvent('on' + eType, fn);
  } else {
   el['on' + eType] = fn;
  }
}

function doWhatever() { alert('Hello World'); }

addEvent(document.getElementByID('your_id'), 'click', doWhatever, false);

Answer 4

您可以在外部JavaScript文件中编写JavaScript代码，然后从HTML代码中调用它。

<script type="text/javascript" src="external_js_file.js"></script>

现在您可以从任何元素/标签调用任何函数。

示例：

<INPUT TYPE=BUTTON OnClick="newTask();">

单击Javascript，Fire功能

4 个答案: