This article mainly shares with you the detailed explanation of the JS event model, mainly in the form of code, hoping to help everyone.
1. Inline model
<body>
<input type="button" value="test1" onclick=' alert("dian ji shi jian")'/>
<input type="button" value="test2" onclick="dian()" />
<script>
function dian(){
alert("dian ji shi jian")
}
</script>
</body>2. Script model
<body>
<input type="button" value="test3" id="dian1"/>
<input type="button" value="test4" id="dian2"/>
<input type="button" value="test5" id="dian3"/>
<script>
//可通过匿名函数
var dian1 = document.getElementById('dian1');//首先找到这个ID
dian1.onclick = function(){//根据ID付给它一个点击事件
alert('dian ji shi jian');
};
//通过函数赋值
function dianji(){
alert('dian ji shi jian');
};
var dian2 = document.getElementById('dian2');
dian2.onclick=dianji;
//得到元素的名字
var dian3 = document.getElementById('dian3');
dian3.onclick = function(){
alert(this.tagName);
};
//删除点击事件
var dian3 = document.getElementById('dian3');
var count=0;
dian3.onclick = function(){
alert(count++);
if(count==3){
dian3.onclick = null;
}
};
</script>
</body>Related recommendations:
Detailed explanation of event model
Take you to quickly understand the event model in javascript
Detailed explanation of javascript event model, objects, monitoring, and delivery code examples
The above is the detailed content of Detailed explanation of JS event model. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
