最好的方法是处理“无法读取null的属性'addEventListener'"错误 [英] Best approach to handle "Cannot read property 'addEventListener' of null" errors

问题描述

当前，我正在检查元素是否存在于页面中.但是我的代码因此有很多条件.当元素不存在时，jQuery事件侦听器不会显示错误. jQuery如何处理该问题以及我可以使用哪些纹理来进行更好的设计?

Currently what i do is checking if element exist in page. But my code has alot if conditions because of that. Jquery event listeners doesnt show errow when element doesnt exist. How jquery handles that and what texniques can i use for better design ?

var el = document.getElementById('el');
var another_el = document.getElementById('another_el');

if(another_el){
el.addEventListener('click', swapper, false);
}

if(el){
  el.addEventListener('click', swapper, false);
}
....
...

推荐答案

jquery如何处理...?

How jquery handles that...?

jQuery的API是基于基于集合的，而不是基于元素的. DOM的API是基于元素的.在jQuery中执行$("#foo").on("click", ...)时，如果id "foo"中没有元素，则$()返回一个空集，而不是null，并在该集合上调用on什么都不做，但也不会引起错误.

jQuery's API is set-based, not element-based. The DOM's API is element-based. When you do $("#foo").on("click", ...) in jQuery, if there's no element with the id "foo", $() returns an empty set, not null, and calling on on that set doesn't do anything, but doesn't cause an error either.

由于getElementById返回一个 或null，因此您必须具有显示的检查内容以防止尝试在null上调用方法，这会导致错误.

Since getElementById returns an element or null, you have to have the check you've shown to prevent trying to call methods on null, which causes an error.

如果您希望在不使用jQuery的情况下享受基于集合的API的好处，则可以 编写自己的实用程序函数集，这些函数使用querySelectorAll为自己提供一个基于集合的精简包装器. DOM API(如果您愿意).

If you want the benefits of a set-based API without using jQuery, you could write your own set of utility functions that use querySelectorAll to give yourself a thin set-based wrapper around the DOM API, if you like.

这是一个非常简单的入门示例:

Here's a very simple starter example:

// The object we use as the prototype of objects returned by `domSet`
var domSetMethods = {
    on: function(eventName, handler) {
            // Loop through the elements in this set, adding the handler
            this.elements.forEach(function(element) {
                element.addEventListener(eventName, handler);
            });
            // To support chaining, return `this`
            return this;
        }
};
// Get a "DOM set" for the given selector
function domSet(selector) {
  // Create the set, usign `domSetMethods` as its prototype
  var set = Object.create(domSetMethods);
  // Add the elements
  set.elements = Array.prototype.slice.call(document.querySelectorAll(selector));
  // Return it
  return set;
}

domSet("#foo").on("click", function() {
  console.log("foo clicked");
});
// Notice that even though there's no id="bar" element, we don't get an error
domSet("#bar").on("click", function() {
  console.log("bar clicked");
});

<div id="foo">foo element (there is no bar element)</div>

您可以向domSetMethods添加执行其他操作的方法.为了支持jQuery提供的API链接样式，大多数情况下，您需要从这些方法中返回this.

You could add methods to domSetMethods that do other things. To support the chaining style of API jQuery provides, you return this in most cases from those methods.

这篇关于最好的方法是处理“无法读取null的属性'addEventListener'"错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！