<form action="#" id="form" οnclick="return checkform()"> function checkform(){ return false; } <!--οnclick="false" 注意这里想想看 其实就是方法返回了false字符串在引号里-->
## 事件监听机制:
* 概念:某些组件被执行了某些操作后,触发某些代码的执行。比如单击onclick执行
* 事件:事件就是某些操作。如: 单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如: 按钮 文本输入框... 事件的组件是比如按钮一些html标签
* 监听器:js代码。 就是触发事件的代码 比如说当我们再事件源上点击了事件 function中的代码会被执行
* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:都是on开头的
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件 光标闪 点外面光标不闪
1. onblur:失去焦点
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件: onmousexxx
1. onmousedown 鼠标按钮被按下。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件: onkeyxxx
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。 表单提交的一个事件
2. onreset 重置按钮被点击。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见事件</title>
<script>
/*
* 常见的事件:都是on开头的
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件 光标闪 点外面光标不闪
1. onblur:失去焦点
一般用于表单校验 比如输入密码时候一点外面失去焦点就校验一下有没有用户名有没有错误
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
页面或者窗口整个加载完成了就会触发整个onload事件
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
注意看下面的例子
这里定义function时定义一个形参,接受event对象
event对象的button属性可以获取鼠标的哪个键被点击了
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
可以阻止表单的提交
2. onreset 重置按钮被点击。
*/
</script>
<script>
//加载完成事件 onload 支持该事件的对象 image window layer input标签就可以写在script标签下面 等着页面加载完毕再执行script标签中的内容
window.onload=function () { //这里的意思是window窗口界面加载完成了再执行function中的内容
/*//失去焦点事件 之前整个不能写在这里因为input标签在下面 加载不出来input标签这里会报错
document.getElementById("username").onblur=function () {
alert("失去焦点了"); //前面定义了一个input文本框 点击文本框再点击外面会弹出失去焦点
}*/
/*绑定鼠标事件 onmouseover 鼠标移到某元素之上。
document.getElementById("username").onmouseover=function() {
alert("鼠标来了"); //当鼠标移动到input标签上面弹出鼠标来了
}*/
/* document.getElementById("username").onmousemove=function(){
alert("鼠标移动了"); //当鼠标在input标签移动弹出鼠标移动了
}*/
/* document.getElementById("username").onmousedown=function(){
alert("鼠标点击了"); //当鼠标在input标签里面点击弹出鼠标点击了 鼠标上的左右键 鼠标滚轮都能触发
}*/
/* //看哪个鼠标按钮被点击了//鼠标按下会自动调用function();方法 会传一个event对象 接收整个event对象来操作一些属性
document.getElementById("username").onmousedown=function(event){
alert(event.button); //alert弹出左键0 中键1 右键2
}*/
//键盘事件
document.getElementById("username").onkeydown=function (event) {
// alert(event.keyCode); //按键盘会弹出数字
if (event.keyCode==13){
alert("提交表单"); //按下enter会弹出提交表单
}
}
//onchange域的内容被改变会触发
document.getElementById("username").onchange=function () {
alert("内容改变了"); //内容被改变会触发 一般作用于下拉列表
}
//下拉列表绑定onchange事件
document.getElementById("city").onchange=function () {
alert("内容改变了"); //内容被改变会触发 选择列表也会弹出内容改变了
}
//专门用于表单提交的事件
//onsubmit 确认按钮被点击。可以阻止表单的提交 方法返回false则表单被阻止提交
document.getElementById("form").onsubmit=function () {
//校验用户名格式是否正确
var flag=false;
return flase;
// 如果只定义flag= false 或 true 表单都会提交 但是定义了返回值返回false会阻止不提交,返回true才会提交
}
//上述阻止表单提交第二种方法 在form标签中定义属性
function checkform(){
return false;
}
}
</script>
</head>
<body>
<!--
function fun(){ // 注意下面代码的意思时会自己生成一个方法调用checkform();
checkform(); //所以要return checkform();
}
-->
<form action="#" id="form" onclick="return checkform()"> <!--onclick="false" 注意这里想想看 其实就是方法返回了字符串在引号里-->
<input name="username" id="username">
<select id="city">
<option>请选择城市列表</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>西安</option>
</select>
<input type="submit" value="提交">
</form>
</body>
</html>
注意上面这个图片是下拉列表 注意form表单标签内的东西会被提交
格式:
<select id="city">
<option>请选择城市列表</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>西安</option>
</select>