Как я могу добавить значение к событию onClick в JavaScript, если имя функции находится в строке?

Я пытаюсь создать небольшой сценарий JavaScript, чтобы удовлетворить некоторые потребности пользователей (сценарий UserLand).

Операция очень проста, и чтобы сделать ее максимально простой, мне нужно добавить некоторые элементы в DOM, с CSS, текстом, функциями и т. Д.

Чтобы скрипт знал, какие элементы создавать, какой CSS применять, какой текст и т. Д. Я создал объект, имеющий следующую форму:

          options: {
      /* Button */
      'button': {
        'tagName'   : 'button',
        'innerHTML' : 'X',
        'css'       : {
          'position'          : 'fixed',
          'z-index'           : '9999999',
          'bottom'            : '20px',
          'left'              : '20px',
          'background-color'  : 'black',
          'cursor'            : 'pointer',
          'color'             : 'white',
          'width'             : '60px',
          'height'            : '60px',
          'border'            : 'none',
          'border-radius'     : '50%',
          'font-weight'       : 'bold',
          'font-size'         : '1.5rem'
        },
        'onClick'   : 'objectName.method()'
      }
    }

Мой скрипт выполняет следующий код в цикле:

          createElement: (element) => {
      
      /* Create element */
      const createElement = document.createElement( element.tagName );
      /* Add innerHTML */
      createElement.innerHTML = element.innerHTML;
      /* Add CSS */
      objectName.addCSStoElement( createElement, element.css );
      /* Add onClick event*/
      createElement.addEventListener( 'click', element.onClick, false );
      /* Add to DOM */
      document.body.appendChild ( createElement );

    }

Все работает правильно, кроме инструкции:

      createElement.addEventListener( 'click', element.onClick, false );

Я думаю, это потому, что это строка, и именно так она добавляется JS к событию onClick.

Предполагая, что я не ошибаюсь, как я могу добавить имя функции, чтобы ее можно было выполнить при нажатии на созданный элемент?

Надеюсь, я хорошо выразился и что мой плохой английский не приведет к путанице.

Спасибо за ваше время и вашу помощь, всем привет!

С уважением, Алекс

Источник

3 ответа

Поскольку вы конкретно спрашиваете об использовании строки для создания обработчика событий HTML для строки и знаете, что можете доверять содержимому строки (что в ней нет вредоносного содержимого), вы можете использовать setAttribute:

      createElement.setAttribute("onclick", element.onClick);

Живой пример:

Источник

Я воспроизвел ваш пример с необходимыми изменениями, и теперь он работает должным образом. Функция вызывается при нажатии кнопки.

      <html>
    <head><title>Example for string as function call</title></head>
    <body>
        <script type="text/javascript">
            let options = {
            /* Button */
            'button': {
                'tagName'   : 'button',
                'innerHTML' : 'X',
                'css'       : {
                    'position'          : 'fixed',
                    'z-index'           : '9999999',
                    'bottom'            : '20px',
                    'left'              : '20px',
                    'background-color'  : 'black',
                    'cursor'            : 'pointer',
                    'color'             : 'white',
                    'width'             : '60px',
                    'height'            : '60px',
                    'border'            : 'none',
                    'border-radius'     : '50%',
                    'font-weight'       : 'bold',
                    'font-size'         : '1.5rem'
                },
                //check how onClick method is changed
                'onClick'   : '(function(){console.log("hello");objectName.method();})'
            }
            };
            
            function createElement(element) {
                /* Create element */
                const createElement = document.createElement( element.tagName );
                /* Add innerHTML */
                createElement.innerHTML = element.innerHTML;
                /* Add CSS */
                objectName.addCSStoElement( createElement, element.css );
                /* Add onClick event*/
                //check how I am passing eval(element.onClick) instead of just element.onClick
                createElement.addEventListener( 'click',eval(element.onClick), false );
                /* Add to DOM */
                document.body.appendChild ( createElement );
            }

            createElement(options['button']);
        </script>
    </body>
</html>

Как указал TJ Crowder : убедитесь, что objectName является глобальной переменной

Источник

Вы можете добавить обработчик щелчка для кнопки, добавив атрибут и передав строку кода для вызова метода, предоставленного в объекте конфигурации.

В приведенном ниже примере объект добавляется в качестве аргумента вызова, чтобы метод мог просматривать event.target а также event.currentTarget для получения дополнительной информации о том, что было нажато.

Пример использования кнопки без всех остальных деталей конфигурации:

Это работает за счет того, что парсер HTML преобразует строку кода в объект функции, который вызывается одним щелчком мыши. event объект в качестве аргумента, как если бы вы поместили onclick атрибут в исходном HTML.

Никогда не делайте этого с ненадежным кодом, но я предполагаю, что данные конфигурации поступают из кода приложения, а не из пользовательского или непроверенного ввода.

Установка атрибута не подходит для добавления нескольких обработчиков событий к одному элементу, но внутри она создает функцию, которая выполняет код (строку), предоставленный в качестве значения атрибута, и вызывает addEventListener для тебя.

Источник
Другие вопросы по тегам