事件监听
当鼠标进行操作的时候能够对网页页面进行操作。
事件绑定
常见事件
onload: 当某个页面或者元素加载完成之后执行指定的代码块
onclick:鼠标单机的时候就执行指定的代码块
onblur\onfocus:鼠标点击的时候光标在的地方就是获得焦点否则失去焦点
onkeydown:绑定键盘的某个按键 当按下某个按键的时候就会触发事件
onmouseover：鼠标移动到元素之上会触发
onmouseout:鼠标移出某个元素
onsubmit:表单提交之后执行代码块
案例
将上篇文章的控制操作使用点击事件进行完成。
//方法一
<body>
<img src="imgjs/off.gif" id="img0" onclick="img_on()"><br><br>
<div class="cls">北京方恒时尚中心</div> <br>
<div class="cls">天津陆家嘴金融广场</div> <br>
<input type="checkbox" name="hobby" > 看电影
<input type="checkbox" name="hobby" > play games
<input type="checkbox" name="hobby" > 旅行
</body>
<script>
// 事件监听 绑定
// 方式一
//onclick 鼠标点击
let flag_img = false;
function img_on(){
var img_ = document.getElementById('img0');
if(flag_img == false ){
img_.src = "imgjs/on.gif";
flag_img = true;
}else{
img_.src = "imgjs/off.gif";
flag_img = false;
}
};注意定义好函数以后，在调用的时候必须functionName+'()'，不然不会运行。
//方式二
// 方式二
document.getElementById('img0').onclick = function img_on() {
if(flag_img == false ){
document.getElementById('img0').src = "imgjs/on.gif";
flag_img = true;
}else{
document.getElementById('img0').src = "imgjs/off.gif";
flag_img = false;
}
}其他的是一样的可以试试。
