事件函数
作用
主要用于和用户产生指定的交互，提高页面或程序的交互性。
当用户执行的操作触发事件函数的时候，会执行指定的函数。
常见鼠标的事件
| 名称 | 作用 |
|---|---|
| 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>
953
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
