您的位置：首页 > Web前端 > JavaScript

js绑定事件的方式

2019-02-17 18:03 127 查看

一、在行内绑定时间
例：
在行内写事件，在js里写事件的方法

<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function winload(){
alert("窗体刷新了")
}
function btn(){
alert("1");
}

</script>
</head>
<body "winload()">//onload加载窗体事件
<button onclick="btn()">按钮</button>//点击事件
</body>

二、js动态绑定事件
例:

<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
/*脚本写在元素之前得考虑获取的元素是否存在*/
//脚本写在元素之前，用窗口加载事件先获取元素
window.onload = function () {
//获取到了这个按钮元素
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("你好！");
}
btn.onmouseover = function () {
alert("你悬停我");
}

//获取className名称元素
var btnclass = document.getElementsByClassName("btnclass");
for (var i = 0; i < btnclass.length; i++) {
btnclass[i].onclick = function () {
alert("你好");
}
}
//一个个获取太麻烦，用for循环遍历
/* btnclass[0].onclick=function (){

};
btnclass[1].onclick=function (){

};
btnclass[2].onclick=function (){

};
btnclass[3].onclick=function (){

};*/

}
</script>
</head>
<body> <!--"windowsread()"-->
<button id="btn">按钮</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
<button class="btnclass">className</button>
</body>

三、事件的监听

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航