事件函数
作用
主要用于和用户产生指定的交互,提高页面或程序的交互性。
当用户执行的操作触发事件函数的时候,会执行指定的函数。
常见鼠标的事件
名称 | 作用 |
---|---|
onclick | 鼠标单击 |
ondblclick | 鼠标双击(必须连续点击两下) |
onmouseover | 鼠标移入,即鼠标停留在图片(元素)等的上方(一次) |
onmouseout | 鼠标移出,即离开(元素)图片等所在的区域(一次) |
onmousemove | 鼠标移动,即鼠标在(元素)图片的上方不断移动(多次) |
onmouseup | 事件会在鼠标按键被松开时发生。 |
onmousedown | 事件会在鼠标按键被按下时发生 |
表单事件
名称 | 作用 |
---|---|
onblur | 指定元素失去焦点(光标没了) |
onfocus | 指定元素获取焦点(点击出现光标) |
onreset | 重置表单的时候触发事件,执行对应的js功能 |
onsubmit | 提交表单的时候触发事件,执行对应的js功能 |
onchange | 表单内容发生改变,且鼠标离开时触发 |
oninput | input框输入时触发 |
所有的事件:http://www.w3school.com.cn/jsref/dom_obj_event.asp
事件函数的使用
例1:点击div弹出提示框
<body>
<div onclick="fn()">弹出提示框</div>0
<script>
function fn(){
alert(“点击提示”);
}
</script>
</body>
例2:onmouserover鼠标移入事件,鼠标移入图片时,更换图片
<img src="./pao.jpg" id="img" onmouseover ='changeImg()' alt="">
<script>
function changeImg(){
// 根据id获取图片的节点
var imgObj = document.getElementById('img');
// 更换图片的地址
imgObj.src = './hai.jpg';
}
</script>
例3:输入框发生改变时,输出内容
<p>
<label for="name">用户名:</label>
<input type="text" id="fname" onchange="change()" value=""/>
</p>
<script type="text/javascript">
function change(){
alert('你在修改内容');
}
</script>
</body>
</html>