javascript - 如何动态添加事件和事件类型到javascript而不是jquery中的元素

Question

我正在尝试通过如下函数将事件添加到元素

function addevent(elements,event_n,function_n,param_trs)
    {
          var i = elements.length; 
       while (i--){ 
           function_name=function_n+"(this.getAttribute('"+param_trs+"'))";
           //function_name=function_n ;
           elements[i].addEventListener(event_n,function_name);
          // console.log(function_name);
       }
    }

这给出了错误:

TypeError: Value not an object.

at elements[i].addEventListener(event_n,function_name);

所以我可以按如下方式整理它们

addevent(document.querySelectorAll('tr'),'click','view_details','request_id');

为所有tr添加点击事件示例:

<tr request_id="5" onclick="view_details(this.getAttribute('request_id'))" >

或

<tr request_id="5" onclick="view_details(this)" >

我如何通过上面的函数来做到这一点

Answer 1

将函数名称作为字符串传递确实是一个坏主意。以字符串格式附加代码也是如此，例如 "(this.getAttribute('"+param_trs+"'))"。这需要进行解析，就像 eval 所做的那样。它效率低下，并可能导致 problems related to eval .

函数可以作为参数传递，而不是作为字符串传递，而是作为真正的函数引用传递。其次，事件处理函数在执行时而不是之前检索属性值会更合适。

这里有一个片段展示了这个想法。该演示将使用属性 data-inc 来确定数字应增加多少。

function addEventListeners(elements, event_n, attrib_n, func) {
    var i = elements.length; 
    while (i--) { 
        // bind the attribute name as argument to the function.
        elements[i].addEventListener(event_n, func.bind(elements[i], attrib_n));
    }
}

// Demo:
addEventListeners(document.querySelectorAll('span'), 'click', 'data-inc',
    function(attrib_n) { 
        this.textContent = +this.textContent + +this.getAttribute(attrib_n);
    }
);

span { border: 1px solid; padding: 2px; background: #C0FFC0 }

Click on numbers to change them:<br>
Per 5: <span data-inc="5">0</span> Per 7: <span data-inc="7">0</span>
Per 1: <span data-inc="1">0</span>
Per -1: <span data-inc="-1">0</span>