标签:返回 get func 焦点事件 用户名 nbsp mit cli onkeyup
事件:
概念:某些组件被执行了某些操作后,触发某些代码的执行
* 事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如:按钮 文本输入框....
* 监听器:代码
* 注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码
常见的事件:
1、点击事件:
1、onclick(单击事件) 当用户点击某个对象时调用的事件句柄
2、ondblclick(双击事件)
2、焦点事件
1、onblur:失去焦点
一般用于表单校验
2、onfocus:元素获得焦点
3、加载事件:
1、onload:一张页面或一幅图像完成加载
4、鼠标事件:
1、onmousedown 鼠标按钮被按下
* 定义方法时,定义一个形参,接受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 确认按钮被点击
* 可以阻止表单的提交
* 方法返回false,则表单被阻止提交
2、onreset 重置按钮被点击
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>常见事件</title> <script> /* 常见的事件: 1、点击事件: 1、onclick(单击事件) 当用户点击某个对象时调用的事件句柄 2、ondblclick(双击事件) 2、焦点事件 1、onblur:失去焦点 2、onfocus:元素获得焦点 3、加载事件: 1、onload:一张页面或一幅图像完成加载 4、鼠标事件: 1、onmousedown 鼠标按钮被按下 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 重置按钮被点击 */ //2、加载完成事件 onload window.onload = function () { //1、失去焦点事件 document.getElementById("username").onblur = function () { alert("失去焦点了...."); } //3、绑定鼠标移动到元素之上事件 document.getElementById("username").onmouseover = function(){ alert("鼠标来了....."); } //4、绑定鼠标点击事件 document.getElementById("username").onmousedown = function(event){ alert("鼠标点击了....."); alert(event.button) } document.getElementById("username").onkeydown = function(event){ // alert("鼠标点击了....."); if(event.keyCode == 13){ alert("提交表单"); } } document.getElementById("username").onchange = function (event) { alert("改变了....") } document.getElementById("city").onchange = function (event) { alert("改变了....") } document.getElementById("form").onsubmit = function(){ //校验用户名格式是否争取 var flag = false; return flag; } function checkForm(){ return false; } } </script> </head> <body> <!-- function fun(){ return checkForm; } --> <form action="#" id="form" onclick="return checkForm()"> <input name="username" id="username"> <select id="city"> <option> --请选择-- </option> <option> 北京 </option> <option> 上海 </option> <option> 广州 </option> </select> <input type="submit" value="提交"> </form> </body> </html>
标签:返回 get func 焦点事件 用户名 nbsp mit cli onkeyup
原文地址:https://www.cnblogs.com/flypig666/p/11605234.html