事件的概念
事件源
事件名
事件注册
事件处理
以火灾为例:
XX大酒店201房间发生火灾,119电话报警,南湖区消防支队出警,赶赴现场通过喷水作业成功灭火。
事件源:XX大酒店201房间
事件名:火灾
事件注册:事先已经规划好片区,XX大酒店所属片区归南湖区消防支队负责
事件处理:喷水
常用事件
鼠标常用事件:
(1)click单机事件
empty
<script>
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被单机了!";
p1.style.fontSize = "60px";
}
</script>
单击事件测试
在这个案例中,事件源就是id为”p1”的元素,事件名是单机,事件注册是οnclick=”fun()”,也就是说当单机id为”p1”的元素的时候,即交由fun函数来处理。
(2)double-click双击事件
empty
<script>
function zoomout(){
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
(3)鼠标按下/弹起(onmousedown onmouseup)
empty
鼠标按下/弹起
<script>
function zoomout(){
var div1 = document.getElementById("div1");
div1.style.width = "200px";
div1.style.height = "200px";
}
function zoomin(){
var div1 = document.getElementById("div1");
div1.style.width = "100px";
div1.style.height = "100px";
}
</script>
(4)鼠标移入/离开(onmouseenter onmouseleave)
empty
鼠标在移入/离开
<script>
function red(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "red";
}
function blue(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "blue";
}
</script>
(5)鼠标在上面/出去(onmouseover onmouseout)效果与(4)一样,但是有区别
empty
鼠标在上面/出去
<script>
function red(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "red";
}
function blue(){
var div1 = document.getElementById("div1");
div1.style.backgroundColor = "blue";
}
</script>
(6)鼠标移动时(onmousemove)可以获取鼠标坐标
empty
鼠标的坐标
<script>
function move(e){
var div1 = document.getElementById("p1");
div1.innerText = e.clientX + "," + e.clientY;//鼠标在div1里面的坐标
}
</script>
图片跟着鼠标一起移动
empty
鼠标的坐标
<script>
function move(e){
var div1 = document.getElementById("p1");
var img1 = document.getElementById("img1");
div1.innerText = e.clientX + "," + e.clientY;//鼠标在div1里面的坐标
img1.style.top = e.clientY + "px";
img1.style.left = e.clientX + "px";
}
</script>
(7)鼠标滚动(onmousewheel)
empty
<script>
var width = 100;
var height = 100;
function wheel(e){
if(e.wheelDelta > 0){
width += 5;
height += 5;
}else{
width -= 5;
height -= 5;
}
var div1 = document.getElementById("div1");
div1.style.width = width + "px";
div1.style.height = height + "px";
}
</script>