HTML:非正文元素的加载

HTML: onload for non-body elements

本文关键字：加载 元素 正文 HTML      更新时间：2023-09-26

我通过JQuery对许多元素执行javascript转换的正常方式：

<div class="cow"></div>
<script> $(".cow").doStuff() </script>

但是，此操作是脆弱和脆弱的：它的工作原理是假设页面仅加载一次。一旦你开始进入 Ajax 并部分重新加载，这种全局转换就会完全崩溃。如果服务器想要根据某些服务器端数据对每个元素进行不同的转换，它也不会起作用。

我知道非body元素的实际onload事件不起作用。一种解决方案是为所有元素提供 ID/类，并使用 JQuery 立即引用它们：

<div id="cow"></div>
<script> $("#cow").doStuff() </script>

然而，这真的很混乱;我一点也不喜欢它，部分原因是我给 ID 的每个元素都会污染全局 I 命名空间。我目前正在为元素提供一个有效的不可碰撞 ID

<div id="id877gN0icYtxi"></div>
<script> $("#id877gN0icYtxi").doStuff() </script>

基于随机 base64 数字。然而，这一切似乎都是一个巨大的黑客：我可以非常简单地使用它们各自的属性为元素提供 onclick s 和 onmousedown s，然后调用一个函数来转换给定的this。

现在，我知道onload不起作用。但是，有没有办法模拟其功能？具体来说，我希望能够运行使用this引用特定标签的 javascript 代码，而不必为标签分配 ID。

编辑：本质上我想要类似的东西

<input onclick="alert('moo')"/>

但是对于oncreate;我目前的用例是用文本填充input或textarea，我目前正在做：

<input id="id877gN0icYtxi"/>
<script>$("#id877gN0icYtxi").val(...)</script>

其中每个输入框的...都不同，因此使用"全局"jQuery转换无法轻松完成。另一方面，我不能在创建input时只设置value或属性，因为它可能是一个textarea，而且我不知道。我想做这样的事情：

<input onload="$(this).val(...)"/>

这行不通，但我希望它行得通。同样，...由服务器设置，并且页面上的每个input标记都不同。

编辑2：

我很清楚小时 JQuery 通常用于以相同的方式对许多元素进行全文档转换。问题是，在这种情况下，每个元素都以特定于该元素的方式进行转换，由服务器指示。具体的用例是每个字段的内容都由$().val()预先填充，自然每个字段都会填充不同的内容。为每个元素提供一个唯一的 ID 并使用 JQuery 进行全局搜索以再次查找该元素似乎是一种令人难以置信的迂回做事方式，当然，当您开始 Ajaxing 页面的某些部分进出时，它会中断。

编辑3：

简而言之，我希望能够写作

<div onload="javascriptFunction(this)"/>

并且必须在创建<div>时运行javascriptFunction()（无论是在初始页面上还是通过 ajax 插入），并将<div>作为参数传递。就像单击div 时onclick以 <div> 作为参数运行javascriptFunction()一样，我希望发生同样的事情，但是当<div>创建/插入到 DOM 中时。

我愿意接受<head>中任意数量的安装脚本，以便实现这一目标。由于上述原因，我不愿意在<div>后添加任何<script>标签，也不愿意在<div>中添加class或id。鉴于这些限制，模拟非主体元素的onload属性的最佳方法是什么？

DOM 规范中没有这样的onload事件，但是 DOM Level 2 规范提供了突变事件类型，以允许通知文档结构的任何更改，包括 attr 和文本修改，目前只有现代浏览器支持此类事件，并且在 Internet Explorer 9 中存在错误！

但是，您可以使用DOMNodeInserted event来监视文档的任何更改：

$(document).live("DOMNodeInserted", function(e){
  $(e.target).val(...);
});

你应该小心使用突变事件，至少尝试更新！根据W3C：

突变事件类型尚未完全和互操作 跨用户代理实现，正在开发一个新规范，旨在解决突变事件解决的用例，但以更高性能的方式。

我想如果你用谷歌搜索这个问题，你可能会找到一些跨浏览器/jquery 插件，以防万一，这些链接可能会有所帮助：

https://developer.mozilla.org/en/DOM/Mutation_events

http://help.dottoro.com/ljfvvdnm.php#additionalEvents

http://help.dottoro.com/ljmcxjla.php

http://help.dottoro.com/ljimhdto.php

http://www.bennadel.com/blog/1623-Ask-Ben-Detecting-When-DOM-Elements-Have-Been-Removed-With-jQuery.htm

所有这些都取决于您要使用的标签类型。

要知道的一件事是，jQuery允许您一次选择很多项目，因此当您执行类似$('p')，该对象引用所有p节点时。

执行类似 $('p').hide() 的操作会隐藏所有p节点。

jQuery选择器（至少）与CSS选择器一样强大，因此您可以在单行中执行一些语义上非常有趣的事情。

想象一下，如果你有一个类似评论部分的回复框列表之类的东西：

 -----------------------------------------
  Comment #1
   blah blah blah blah blah
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #2
   nyark nyark nyark nyark
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #3
   ubadabuba 
    [ Text field  ] (Reply)
 -----------------------------------------
  Comment #4
   eeeeeeeeeeeeeeeeeeeeeeeeee?
    [ Text field  ] (Reply)

所以你的 DOM 布局可能看起来像

<div class="comment" >
    <h1> Comment #1 </h1>
   <p> blah blah blah blah blah </p>
    <input  /> <button >Reply </button>
</div>
<div class="comment" >
    <h1> Comment #2 </h1>
   <p> nyark nyark nyark nyark </p>
    <input  /> <button >Reply </button>
</div>

因此，如果要更新所有输入字段，要输入默认文本，则只需看到字段的CSS选择器.comment > input 。

之后JS自行出现

$(document).ready(function(){
    var inputs=$('.comment > input ');//references all the input fields defined by this selector
    inputs.attr('value','default text');//set the value of the text in the input
})​

此处显示的示例

为元素提供 ID 不会"污染全局命名空间"，它只是引用元素的一种机制。您只需要要按 ID 引用的元素的 ID。为其他元素提供 ID 是无害的，只是没有必要。

您可以通过许多条件引用元素，包括类及其在 DOM 中的位置（CSS 选择器池中的任何方法以及 DOM 关系 - 父、子、同级等）。您选择的方法可能有优点和缺点，具体取决于您的使用方式，没有固有的"好"或"最佳"方法可以做到这一点，只是有些方法比其他方法更适合某些情况。

如果你想在替换 DOM 中的元素后替换侦听器，那么替换元素需要考虑这一点。 事件委派是一种策略，还有其他策略。

window.onload()呢？

相关文章：