内联JavaScript实现事件绑定

发表于 更新于 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 2 分钟

框架类库极度流行，它们都提供了各种各样简单的方式来操作JS，也或者其他的语言技术。使用一时爽，更为可怕的是它们也会折叠一部分的认知。比如这里要说的内联JS实现事件绑定，在实际开发中确实不怎么使用，但不代表不会使用，且需要懂。

React中事件绑定

先说下React中的事件绑定，React帮我们包装了一些事情。

  1. 比如事件绑定，我们使用onClick，原生JS是onclick，一个是驼峰，一个是纯小写，很好区分

  2. React下比如一个列表我们循环增加事件绑定，不会造成性能的浪费，因为React最终还是会实现事件委托，当然写法上，还是不建议，每个单独的事件绑定，毕竟source code维护及调试也会是个问题

  3. React下进行事件绑定，我们可以方便的拿到事件参数event，当然这个参数名字我们也可以自定义

    1
    2
    3
    4
    5
     <Button onClick={this.handleClickCancel}>
                <GlobalI18n.CANCEL />
              </Button>
       
    private handleClickCancel = (e) => this.props.callback(e.target.id);

原生内联下的事件绑定

原生内联下需要如下写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<p id="p">selectedIndex: <span>0</span></p>

<select id="select" onchange="print(event)">
  <option selected>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>

<script>
  var selectedIndexEle = document
    .getElementById('p')
    .querySelector('span');

  function print({ target: e }) {
    selectedIndexEle.innerText = e.selectedIndex;
  }
</script>

  1. 内联如果想传递事件当参，需要准确的命名为event，比如e不行。

    ​ WHY？因为这里的event即window.event，是准确的引用调用，

  2. 假如事件处理并不需要消费本身事件的任何特殊逻辑，比如阻止默认行为等，还可以改为print(this)，因为这是this指向的即是该DOM元素本身

  3. 当然除了这两种方式，还可以Script标签中bind绑定事件，这样可以直接使用event，与React下类似。

    1
    2
    3
    4
    5
    document
      .getElementById('select')
      .addEventListener('change', function (e) {
        print(e);
      });

写在最后

问题简单，但很基础，开发中小心注意吧。