DOM中的事件绑定有三种方式：
方式1：DOM0级别的事件绑定
<body>
<button id="btn">点我</button>
<script>
// DOM0级别的事件绑定
let btn = document.getElementById("btn");
btn.onclick = function(){
console.log("点我干啥~");
}
</script>
</body>
方式2：DOM2级别的事件绑定
<body>
<button id="btn">点我</button>
<script>
// DOM0级别的事件绑定
let btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
console.log("点我干啥~");
})
</script>
</body>
方式3：HTML级别的事件绑定（方法后必须加括号）
<body>
<button id="btn" onclick="fn()">点我fn()</button>
<button id="btn" onclick="fn">点我fn</button> 不加() 不OK
<script>
function fn(){
console.log("点我干啥~");
}
</script>
</body>
react中的事件绑定
在react事件处理中，this问题很重要。
处理this问题：
1）监听器可以变成箭头函数，在不传递参数的情况下，可以这样绑定：onClick={ this._clickHandle }
2）在构建函数（constructor）中，可以使用bind，对this进行绑定，绑定：onClick={ this._clickHandle } 不能传参
3）直接在使用监听时绑定 onClick={ this._clickHandle.bind(this,1,2) }
class MyCom extends Component{
constructor(){
super();
this.state = {
isHot:false
}
// bind返回一个改变了this指向的新函数
this._clickHandle = this._clickHandle.bind(this)
}
render(){
let {
isHot } = this.state
return (
<div>
<h1>今天天气很{
isHot ? "炎热" : "寒冷"}</h1>
{
/* onClick是React中对原生DOM中的onclick又一次封装 */}
{
/* <button onClick={ this._clickHandle }>切换</button> */}
{
/* 这里面的调用的_clickHandle是调用16行的_clickHandle */}
<button onClick={
this._clickHandle }>切换</button>
</div>
)
}
_clickHandle(){
console.log(this);
let {
isHot } = this.state
// 更新状态机
this.setState({
isHot:!isHot
})
}
}
4）推荐写法：onClick={ (e)=> this._clickHandle(111,222,e) }
class MyCom extends Component{
constructor(){
super();
this.state = {
isHot:false
}
}
render(){
let {
isHot } = this.state
return (
<div>
<h1>今天天气很{
isHot ? "炎热" : "寒冷"}</h1>
<button onClick={
(e)=> this._clickHandle(111,222,e) }>切换</button>
<a href="xxx" onClick={
(e)=> this._clickHandle(111,222,e) }>切换</a>
</div>
)
}
_clickHandle(a,b,e){
console.log(a,b,e);
e.preventDefault(); // 阻止默认事件
console.log(this);
let {
isHot } = this.state
// 更新状态机
this.setState({
isHot:!isHot
})
}
}