给元素添加 单击事件
onclick: 鼠标的单击事件
方式一: 获取元素,在js中给元素绑定
备注: 直接赋值使用,不需要函数名
<input type="button" class="ipt" value="点我"/>
<div class="box" style="width: 100px;height: 100px; border: 1px solid;"></div>
<script>
var btn = document.getElementsByClassName("ipt")[0];
var box = document.getElementsByClassName("box")[0];
btn.onclick = function(){ //当鼠标点击的btn的时候
box.style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")"; //调用封装好的函数
}
function randomColor(){
return Math.floor(Math.random()*(250-200)+200);
//将随机色封装在函数里
}
</script>
方式二: 定义好函数, 在html标签中 绑定函数
<button class="btn" onclick="myClick()">按钮</button>
<script>
var btn=document.querySelector("button");
function myClick(){
box.innerHTML = "啊~~";//
}
btn.onclick = function(){
box.style.backgroundColor = "rgb(" + randomColor() + "," + randomColor() + "," + randomColor() + ")";
}
</script>