HTML/JS/React中的事件处理

HTML学习, JavaScript学习, React.js学习 本文总阅读量次

总结

  • HTML和JS中，DOM事件都是类似onclick这样的小写，而 React 事件绑定属性的命名采用 驼峰式写法 。
  • 尽量不要把DOM事件写在HTML中。

HTML 事件处理

  • DOM事件写在html中不符合 行为、结构、样式 相分离的原则
  • 尽量不要把DOM事件写在HTML中。
    1. 多元素绑定相同事件时，效率低。
    2. 不建议在HTML元素中写JavaScript代码。（将页面元素写在HTML内，JS代码写在<script>内会更好）

以onclick举例

HTML中的语法：

1
<element onclick="SomeJavaScriptCode">

例子：

1
2
3
<button onclick="activateLasers()">
  激活按钮
</button>

然后activateLasers()写在JS代码中。

JS 事件处理

  1. 注意：JS代码要在HTML代码加载完成后执行
  2. 获取DOM元素=>绑定事件函数

DOM 0级事件处理

  • 优点：符合 行为、结构、样式 相分离的原则。还可以选出DOM元素集合通过for循环统一操作。
  • 缺点：每个DOM元素只能绑定一个同类事件。例如绑定onclick，当你想再绑定onclick会发现他被覆盖了。

以onclick举例

JavaScript 中语法:

1
object.onclick=function(){SomeJavaScriptCode};

例子：

1
2
3
4
5
<body>
    <p>单击按钮触发函数。</p>
    <button id="btn">点我</button>
    <p id="demo"></p>
</body>
1
2
3
4
5
<script>
    document.getElementById("btn").onclick=function(){
    	document.getElementById("demo").innerHTML="Hello World";
    }
</script>

DOM 2级事件处理（事件监听）

  • addEventListener("事件名" , "事件处理函数" , "布尔值");
    • false 事件冒泡;true 事件捕获
  • 优点相比前两个就多了。可以选择是事件流。可绑定多个同类事件。事件名可以组成字符串。
  • 注意：使用addEventListener绑定事件，等结束后及时使用removeEventListener移除监听

React事件处理

  • React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
    • React 事件绑定函数的命名采用驼峰式写法，而不是小写。
  • 在类中书写时注意在构造函数中使用bind()绑定事件函数的this指向。

以onClick举例

在JSX语法中：

1
2
3
<button onClick={activateLasers}>
  激活按钮
</button>

activateLasers函数另写

具体事例

当使用 ES6 class 语法来定义一个组件的时候，事件处理函数会成为类的一个方法。
例如，Toggle 组件渲染一个让用户切换开关状态的按钮的例子

HTML学习, JavaScript学习, React.js学习