JSX事件

 

 

/*
一、事件绑定
onClick={事件监听的名称}
二、事件监听传参
a、利用箭头函数内部调用事件监听的时候传递实参
b、利用bind方法返回一个新的函数在事件发生时调用
三、获取事件对象
  -默认情况下不需要接收参数，且直接执行事件监听，此时它的第一个参数默认就是ev
  -利用箭头函数执行监听的时候，需要通过箭头函数将ev对象传递给事件监听函数进行使用
  -利用bind方法执行时，如果有传参那么最后一个参数默认接收到的就是ev对象
 */

// const handler = (a,b) =>{
//   console.log(a+b)
//   console.log('事件监听执行了');
// }

const handler = (ev) =>{
  console.log(ev)
  console.log('事件监听执行了');
}

//bind方式传递事件对象
// const handler = (a,b,ev) =>{
//   console.log(a+b);
//   console.log(ev)
//   console.log('事件监听执行了');
// }

function App() {
  return (
    <div>
      {/*获取事件对象*/}
      {/* <button onClick={()=>handler(1,3)}>点击触发事件</button> */}
      {/*第一个参数是函数地址，这里不用传*/}
      {/* <button onClick={handler.bind(null,100,200)}>点击触发事件</button> */}
      {/*获取事件对象*/}
      {/*<button onClick={handler}>点击触发事件</button>*/}
      {/*利用箭头函数获取事件对象*/}
      {/* <button onClick={(ev)=>{handler(ev)}}>点击触发事件</button> */}
      {/* <button onClick={handler.bind(null,100,200)}>点击触发事件</button> */}
      <button onClick={handler.bind()}>点击触发事件</button>
      
    </div>
  );
}


export default App;