Question

所以我知道当一个元素加载jQuery时如何触发一个函数，但似乎无法在纯javascript中找到它。我想这样做是JS。

所以我知道如何在元素加载时在jQuery中激活一个函数，但我想在javascript中执行它。我想这样做是纯粹的javascript。

$('img').load(
      function(){
        //do stuff
})

Answer 1

来自 load event 的MDN文档：

当资源 及其相关资源 时会触发加载事件已经完成加载。

正如评论中所提到的，input元素没有要加载的依赖内容，因此它的input事件永远不会触发。

了解所有元素都需要解析到Document的对象模型中非常重要，但这是一个必须先完成的过程，然后才能以编程方式与元素进行交互。

客户端完成解析DOM中的所有元素后，客户端将触发 "DOMContentLoaded" 事件（相当于JQuery $(document).ready 事件。在这一点上，搜索DOM并定位要使用的元素是安全的。

从那里开始，不同的元素可以/将会在其生命周期中发生不同的事件。 input元素会响应用户输入和互动，因此它会有几个不同的事件（input，change，keydown，keyup， keypress，mouseup，mousedown，focus，blur等。）

对于load事件，您需要使用包含在创建元素本身后需要加载到其中的内容的元素。示例包括window，img，iframe，link。这些都是需要外部内容的元素，对任何人都有用。

因此，采用像img这样需要加载外部资源的元素，纯JavaScript将使用本机DOM API方式注册事件回调，这与 element.addEventListener()一致方法。：

// Get a reference to the DOM element. // Make sure this is done AFTER the DOM has finished loading: var img = document.getElementById("someImgageElementsID"); // Register a function to the image's load event handlers: img.addEventListener("load", doLoad); // Declare the callback function: function doLoad(){ console.log("image loaded"); }

更多关于 element events 。

仅在使用javascript加载元素时触发函数

1 个答案: