javascript - 为什么 HTML 不允许我以与 JSX 相同的方式添加事件处理程序？

Question

为什么这段代码在 React JSX 中有效但在 HTML 中无效:

下面的代码只是标签的一个属性。 handleClick 函数仅显示 console.log

此代码适用于 React JSX 代码:

onClick={() => this.props.handleClick(1)}

这在 HTML 中不起作用:

onclick={() => handleClick(1)}

1. 为什么我应该将 handleClick 函数放在 React JSX 的另一个函数中？
2. 为什么它在 HTML 中不起作用？

Answer 1

• ReactJS 有自己的 JSX 解释器/编译器，这就是它的工作方式。
• 在“VanillaJS”(实际上，只是 JavaScript)中，您无法获得这种好处。
  • 除非您想将 JSX 引擎导入您的 JS 项目并处理这些依赖项。

Why I should put handleClick function in another function in React JSX?

我需要更多上下文来回答这个问题。

Why it doesn't work in HTML?

onclick={() => handleClick(1)}

这在 VanillaJS 中不起作用，因为 onclick 是一个函数属性，但是您可以简单地覆盖 onclick 函数属性一个新功能:

someButton.onclick = () => handleClick(1); // Warning: this will replace any existing `onclick` function property.

事实上，在 addEventListener 被添加到 DOM 并且支持变得广泛之前(大约在 2000 年代后期)，JavaScript 程序员过去常常将多个事件处理程序添加到同一事件:

p>

var currentOnClick = someButton.onclick;
someButton.onclick = function( e ) {
    if( currentOnClick ) currentOnClick( e );
    // do stuff 
};

当然官方的方式是使用DOM的addEventListener函数:

someButton.addEventListener( 'click', handleClick.bind(this) );
// or:
someButton.addEventListener( 'click', () => handleClick(1) );
// or:
someButton.addEventListener( 'click', e => handleClick(1) );

如果你想让 JavaScript 的事件处理代码更简洁，那么修补 EventTarget(addEventListener 的父类型):

Object.defineProperty( EventTarget.prototype, 'onclick2', {

    get() {
        if( typeof this.onclickHandlers == 'undefined' ) {
           this.onclickHandlers = [];
        }
        return this.onclickHandlers;
    }

    set( handlerFunc ) {

        if( typeof this.onclickHandlers == 'undefined' ) {
           this.onclickHandlers = [];
        }

        this.onclickHandlers.push( handlerFunc );

        this.addEventListener( 'click', handlerFunc );
    }

} );

用法:

someButton.onclick2 = () => doSomething();