11-设置事件-传参又有事件源.html

 <!-- html中得onclick属性设置点击事件得方式
    onclick=show()  //事件属性名全小写,赋值为函数调用
    html中属性都是用''赋值  例如'show()'
    jsx中不能用''赋值,且不能加()
  -->
  <button onclick="show()">外部按钮</button>
  <div id="root"></div>
  <script src="./react.js"></script>
  <script src="./react-dom.js"></script>
  <script src="./babel.min.js"></script>
  <script type="text/babel">
    function show(ev,param){
      console.log(ev)//事件对象
      console.log(param)//事件调用时传递得参数
      console.log(this)//
      alert('aaaa')
    }
    /*
    JSX设置事件:
        元素属性得事件名要驼峰命名,如onClick,
        事件函数赋值时用{}函数对象,如{show},不是函数调用,如{show()}
        JSX中给事件属性赋值时一定时函数对象

        //bind方法用于改变函数得this,第二,三。。。个参数为传递给函数得实参,返回值为函数本身
        show.bind(this,'hello')//这个返回值是函数本身

        show.apply(this,['aaaa']);
        show.call(this,'aaa')//函数return 后得结果
    */
    ReactDOM.render((<div>
                    {/*当前访问得this为undefined*/}
                    <button onClick={ev=>show(ev,'hello')}>按钮</button>
                    <button onClick={ev=>show.bind(this,ev,'hello2')()}>按钮2</button>
                </div>),document.getElementById('root'))
  
  </script>

 

上一篇:虚函数列表: 取出方法 // 虚函数工作原理和(虚)继承类的内存占用大小计算 32位机器上 sizeof(void *) // 4byte


下一篇:前端JS拖拽页面元素