日期:2021年11月04日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉得有所帮助
,帮忙点个赞
,也可以关注我,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
如果您想了解更多有关javascript
的知识,那么请点《javascript学习的奇妙之旅》
一、在HTML标签中指定
- 在HTML标签中指定事件(内置函数)
<div onclick="alert('在HTML标签中指定的事件')">
在HTML标签中指定事件(内置函数)
</div>
- 在HTML标签中指定事件(自定义函数)
<div onclick="eventHandler()">
在HTML标签中指定事件(自定义函数)
</div>
二、在Javascript中绑定
- 在Javascript中绑定事件
function eventHandler(){
alert("可以触发点击事件");
};
// 在Javascript中绑定
document.getElementById('d1').onclick = eventHandler;
- 在Javascript中再次绑定事件,会覆盖之前的绑定事件
function eventHandler(){
alert("可以触发点击事件");
}
function eventHandler2(){
alert("可以触发点击事件2");
}
// 在Javascript中绑定
document.getElementById('d1').onclick = eventHandler;
// 再次绑定事件,覆盖
document.getElementById('d1').onclick = eventHandler2;
三、在Javascript中监听
- 在Javascript中监听,首次监听
function eventHandler(){
alert("可以触发点击事件");
}
// 在Javascript中监听
document.getElementById('d2').addEventListener('click',eventHandler)
- 在Javascript中监听,再增加一个监听
function eventHandler(){
alert("可以触发点击事件");
}
function eventHandler2(){
alert("可以触发点击事件2");
}
// 在Javascript中监听
document.getElementById('d2').addEventListener('click',eventHandler)
// 再增加一个监听
document.getElementById('d2').addEventListener('click',eventHandler2)
四、3种JS事件绑定的源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生JS事件绑定的三种方式</title>
<style>
div {
height: 50px;
line-height: 50px;
margin-top: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<div onclick="alert('在HTML标签中指定的事件')">
在HTML标签中指定事件(内置函数)
</div>
<div onclick="eventHandler()">
在HTML标签中指定事件(自定义函数)
</div>
<div id="d1">在Javascript中绑定事件</div>
<div id="d2">在Javascript中监听事件</div>
<script>
function eventHandler(){
alert("可以触发点击事件");
}
function eventHandler2(){
alert("可以触发点击事件2");
}
// 在Javascript中绑定
document.getElementById('d1').onclick = eventHandler;
document.getElementById('d1').onclick = eventHandler2;
// 在Javascript中监听
document.getElementById('d2').addEventListener('click',eventHandler)
document.getElementById('d2').addEventListener('click',eventHandler2)
</script>
</body>
</html>
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/121140105