HTML：针对非正文元素的onload [英] HTML: onload for non-body elements

问题描述

执行javascript的正常方式会对通过JQuery的大量元素进行转换：
$ b

 < 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 = 警报（ '哞'）/> 
  

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

 < input id =id877gN0icYtxi/> 
< script> $（＃id877gN0icYtxi）。val（...）< / script> 
  

其中 ... 每个输入框，因此不能使用全局jQuery变换轻松完成。另一方面，当我创建它时，我不能只设置值或输入的属性，因为它可能是一个 textarea ，我不知道。我想做一些事情：

 < input onload =$（this）.val（...）/ > 
  

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

编辑2：

我很清楚小时JQuery通常用于对大量元素进行整个文档转换以同样的方式。问题在于，在这种情况下，每个元素都以特定于该元素的方式进行转换，由服务器规定。具体的用例是每个字段都有其内容由 $（）。val（）预先填充，并且每个字段自然会填充不同的内容。为每个元素赋一个唯一的ID并使用JQuery进行全局搜索以再次找到该元素，这似乎是一种令人难以置信的迂回行事方式，当然，当您开始对页面的某些部分进行Ajax化时， 。

EDIT3：

总之，我希望能写出

 < div onload =javascriptFunction（this）/> 
  

并且有 javascriptFunction（）当创建< div> 时（无论是在初始页面上还是通过ajax插入）并通过< div> 作为参数。正如 onclick 会以< div> javascriptFunction（） c>作为单击div时的参数，我希望发生同样的事情，但是当< div> 被创建/插入到DOM中。

为了实现此目的，我愿意接受< head> 中的任意数量的设置脚本。由于上述原因，我不愿意在< div> 之后添加任何< script> < div> class 或 id C>。鉴于这些限制，对于非body元素来模拟 onload 属性可以做些什么最好的？

解决方案

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

然而，您可以使用 DOMNodeInserted事件来监视文档是否有任何更改：

  $（document）.live（DOMNodeInserted，function （e）{
 $（e.target）.val（...）; 
}）; 
  

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

突变事件类型尚未完全实现，并且跨用户代理实现了可互操作的
。开发的目的在于解决突变事件解决的用例，但以更高效的方式进行开发。

我想如果你google的话，你可能会发现一些跨浏览器/ jquery插件，以防万一，这些链接可以帮助你：

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

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

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

http：//help.d ottoro.com/ljimhdto.php

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

My normal way of performing javascript transforms on lots of elements in via JQuery:

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

However, this operation is fragile and brittle: it works on the assumption that the page is all loaded only once. Once you start getting into Ajax and partial reloads, this sort of global transform breaks down completely. It also doesn't work if the server wants to do a different transform to each element based on some serverside data.

I know the actual onload event for non-body elements doesn't work. One solution is to give all the elements IDs/classes and reference them immediately using JQuery:

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

However, that is really messy; I do not like it at all, partly because every element I give an ID pollutes the global I namespace. I am currently giving the element an effectively non-collidable ID

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

based on random base64 numbers. However, this all seems like a giant hack: I can give the elements onclicks and onmousedowns and such very simply using their respective attributes, which then call a function to transform the given this.

Now, I know onload doesn't work. However, is there any way to simulate its functionality? Specifically, I want to be able to run javascript code referencing a particular tag using this without having to assign the tag an ID to them.

EDIT: Essentially I want something like

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

but for oncreate; my current use case is to fill an input or textarea with text, and I am currently doing:

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

where the ... is different for every input box, and thus cannot be done easily using a "global" jquery transform. On the other hand, I cannot just set the value or attribute of the input when i create it, as it may be a textarea, and i wouldn't know. I want to do something like:

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

Which doesn't work, but I wish it did. Again, the ... is set by the server and different for every input tag on the page.

EDIT2:

I'm well aware of hour JQuery is typically used to do whole-document transforms on lots of elements in the same way. The issue is that in this case, each element is being transformed in a way specific to that element, dictated by the server. The specific use case is each field has its contents pre-filled in by $().val(), and naturally every field will be filled with different contents. Giving each element a unique ID and using JQuery to do a global search to find that element again seems like an incredibly roundabout way of doing things, and of course breaks when you start Ajaxing parts of your page in and out.

EDIT3:

In short, i want to be able to write

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

and have javascriptFunction() be run on when the <div> is created (whether it is on the initial page or inserted via ajax) and be passed the <div> as a parameter. Just as onclick would run javascriptFunction() with <div> as a parameter when the div is clicked, I want the same thing to happen, but when the <div> is created/inserted into the DOM.

I'm willing to accept any amount of setup scripts in the <head> in order to make this happen. For reasons mentioned above, I am not willing to add any <script> tags after the <div>, or to add a class or id to the <div>. Given these limitations, what's the best that can be done to simulate an onload attribute for non-body elements?

解决方案

There's no such onload event in DOM spec, however DOM Level 2 spec provides Mutation event types, to allow notification of any changes to the structure of a document, including attr and text modifications, currently only modern browsers support such events and it is buggy in Internet Explorer 9!

However you could use DOMNodeInserted event to monitor the document for any change:

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

You should be careful using Mutation events, at least try to be updated! According to W3C:

Mutation event types has not yet been completely and interoperably implemented across user agents, A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner.

I guess if you google the matter, you might find some cross browser/jquery plugin for this, just in case, these links migh help:

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

这篇关于HTML：针对非正文元素的onload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！