如何将事件和事件类型动态添加到Java脚本而不是jquery中的元素

debugcn 发表于 Dev

Swarna Sekhar Dhar

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

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：值不是对象。

在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)" >

我如何通过上面的功能做到这一点

亭子

将函数名称作为字符串传递确实是一个坏主意。以字符串格式附加代码也是如此，例如"(this.getAttribute('"+param_trs+"'))"。这将需要解析，就像这样eval做一样。它效率低下，并可能导致与相关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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。