3.事件参数.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="../babel.min.js"></script>
  8. <script src="../react.development.js"></script>
  9. <script src="../react-dom.development.js"></script>
  10. </head>
  11. <body>
  12. <div id="btn">第一种</div>
  13. <div id="root"></div>
  14. <script type="text/babel">
  15. // 第一种 this指向
  16. function handleClick(){
  17. console.log(this)
  18. }
  19. document.getElementById("btn").onclick = handleClick
  20. // 第二种 改变this指向
  21. // call apply bind
  22. let person = {
  23. str:"我是一个字符串"
  24. }
  25. // let element = <div onClick={handleClick.bind(person)}>第二种</div>
  26. function handleClick1(e){
  27. console.log(this,'正常') // undefined
  28. console.log(e,'事件') //存在事件对象
  29. }
  30. function handleClick2(e,...arg){
  31. console.log(e.target)
  32. console.log(arg)
  33. }
  34. function handleClick3(e){
  35. console.log(e)
  36. }
  37. let element = (
  38. <div>
  39. <p onClick={handleClick1.bind(person)}>事件1</p>
  40. {/*套壳*/}
  41. <p onClick={(e)=>{
  42. handleClick2(e,3,444,5555)
  43. }}>事件2</p>
  44. {/*
  45. 传递多个参数时,接受参数需要解构
  46. null 不占位
  47. 默认传递的参数是事件对象
  48. bind虽然可以改变this指向,但是位置固定并不灵活
  49. 箭头函数 可以套壳比较灵活
  50. */}
  51. <p onClick={handleClick3.bind(null,111)}>事件3</p>
  52. </div>
  53. )
  54. ReactDOM.createRoot(document.querySelector('#root')).render(element)
  55. </script>
  56. </body>
  57. </html>