使用JavaScript绑定事件

Question

我有这个div我用javascript添加更多div。

但是，每当我使用javascript将div添加到div时，它会刷新，例如，这些div中的youtube视频将会停止。

我可以将这些div放入div但不重新加载吗？

Answer 1

刷新？您是否使用“提交”类型的按钮（在表单中，感谢RobG）或添加DIV的链接？如果是这样，您可以在要调用的函数中返回false以附加DIV。

HTML

<button onclick="return foo()">The Button</button>

的Javascript

function foo(){
  /*all the work*/
  return false; //No matter what, return false so you don't get a page reload.
}

编辑：看起来你正在使用链接。我们有几种方法可以解决这个问题：

更改href

您可以将href更改为“＃”（在HTML中称为锚）。

<a href="#">Foo</a>

单击它时，不会将您发送到其他页面，但有两点需要注意：

始终滚动到页面顶部或指定的任何部分（例如#foo将滚动到ID为“foo”的元素。这对用户来说可能很烦人。
打破非JavaScript用户的页面。如果您希望该链接重定向到另一个页面，那么非Javascript用户将始终停留在该页面上。

更多信息：W3C Page on Links (and anchors)

使用onclick属性返回false

在Javascript函数中返回false将阻止链接转到其原始目标。这也适用于表格。

您可以在<a>标记的声明中指定操作，例如

<a href="foo.html" onclick="foo(); return false;">Foo</a> 
<!---The above "onclick" could also just be a function that always returns false-->

此方法维护我们希望为非JavaScript用户保留的任何链接，并且不会移动页面的位置。但是，这种方法也存在一些缺陷：

我们的HTML和JavaScript交织在一起。这不是世界上最大的问题，但它使我们的代码更容易更新，因为如果我们将多个元素附加到这个事件，我们必须为每个元素更新它。这可能意味着在我们的HTML文档中编辑很多行。如果我们将HTML和JavaScript分开，我们可以保持更多干（不要重复自己）。
即使我们的JavaScript代码加载到外部文件中并进行了缓存，我们也必须每次都在浏览器中阅读它。同样，根据HTML页面的大小，这可能不是一个大问题。

使用JavaScript绑定事件

一些Javascript术语术语：

事件 - 用户浏览网页时发生的事情。这可以是点击，鼠标移动，窗口大小调整等。
事件处理程序 - 响应事件发生的函数。

有许多方法可以使用Javascript将事件绑定到HTML元素，但为了简单起见，我会将其简要说明。

<a href="foo.html" id="foo">Foo</a>

在这里，我们通过以下方式更改了标签：

删除onclick标记。
添加ID，使元素可以轻松区分我们可能在页面上使用的任何其他链接（以及任何其他元素）。

让我们使用JavaScript将事件处理程序绑定到我们的链接：

function foo(){
 /* stuff we want to do to our div */
 return false; /* prevent page refresh */
}
function addEventToLink(){
  /* Set up a variable that we can use JavaScript to change attributes and event listeners*/
  var theLink = document.getElementById('foo'); 
  /* Set up our link to call the method 'foo', but ONLY when it is clicked on.
  * element.onclick changes the "onclick" attribute of the element */
  theLink.onclick = foo;  
}
addEventToLink(); //finally, call the method so our event listener is added to our link

请注意使用element.onclick，您只能为每个元素设置一个事件处理程序。这基于DOM Level 0 Events规范。如果要为每个元素添加多个事件处理程序，请在Wikipedia.

实例：http://jsfiddle.net/77CLR/6/

Answer 2

你必须做的事情如下：

myDiv.innerHTML += "<div>div content</div>";

完全重建myDiv中的所有内容。相反，操纵DOM以插入新的div：

var newDiv = document.createElement("div");
newDiv.innerHTML = "<span>Some HTML</span>";
myDiv.appendChild(newDiv);

无需重新加载即可刷新

2 个答案:

HTML

的Javascript

更改href

使用onclick属性返回false

使用JavaScript绑定事件