javascript基础:事件
事件:
概念:某些组件被执行了某些操作后,触发某些代码的执行
* 事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了
* 事件源:组件。如:按钮 文本输入框....
* 监听器:代码
* 注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码
常见的事件:
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>
javascript基础:事件的更多相关文章
- javascript基础-事件1
原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...
- javascript基础-事件2
DOM0,DOM2,DOM3事件类型 图解: 范畴 响应顺序(标:标准浏览器.IE9+) 注意点 MouseEvent 标: mousedown-mouseup-click-mousedown-mou ...
- JavaScript基础事件(6)
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...
- JavaScript基础系列目录(2014.06.01~2014.06.08)
下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...
- 【JavaWeb】JavaScript 基础
JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...
- 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式
JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...
- JavaScript基础笔记(九)事件
事件 一.事件流 事件流描述的是从页面中接收事件的顺序. 一)事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点. 如:div------>b ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
随机推荐
- python函数基础(函数的定义和调用)
函数的定义 python定义函数使用def关键字 return[表达式]语句用于退出函数,选择性的向调用方返回一个表达式,不带参数值的return语句返回none def 函数名(参数列表): 函数体 ...
- 迅雷 API 接口说明文档 -调用迅雷自动下载
我们可以利用迅雷提供的开放API接口来自动下载文件.详细的接口说明大家可以看下面的. 先要说明一下的就是 迅雷的API接口是用 .com 来调用的 首先就是脚本了,各种语言写法不同,我这里提供用vbs ...
- 用hexo在本地搭建自己的博客
参考路径:https://blog.csdn.net/Hoshea_chx/article/details/78826689
- 五. Arrow Function 箭头函数
箭头函数三大好处: 1. 简明的语法 举例: 如果只有一个参数,可以不加(),多个参数用 "," 隔开 2. 隐式返回 首先说下什么是显示返回,显示返回就是 return 加上你要 ...
- [JZOJ4633] 【GDOI2017模拟7.15】萌萌哒
题目 描述 题目大意 给你一个数列,接下来有许多个操作,使得区间[l1,r1][l_1,r_1][l1,r1]和[l2,r2][l_2,r_2][l2,r2]对应的位置染上同样的颜色(使得它们 ...
- 今天给各位介绍Linux touch命令详述
触摸命令 touch命令有两个功能:一个是将现有文件的时间戳更新为系统的当前时间(默认模式),它们的数据将保持不变;第二个是创建一个新的空文件. 语法 触摸(可选) 最常见的用法:touch file ...
- Ubuntu GitHub操作——分支、合并与标签
分支 分支是用来将特性开发绝缘开来的.在你创建仓库的时候,master 是"默认的"分支.在其他分支上进行开发,完成后再将它们合并到主分支上. 创建一个叫做"featur ...
- docker 安装 ElasticSearch
docker pull docker.elastic.co/elasticsearch/elasticsearch:5.6.9 docker images docker run -e ES_JAVA_ ...
- php中的线程、进程和并发区别
https://mp.weixin.qq.com/s/Ps5w13TTmpnZx-RPWbsl1A 进程 进程是什么?进程是正在执行的程序:进程是正在计算机上执行的程序实例:进程是能分配给处理器并由处 ...
- ES6 学习笔记(基础)
书链接:http://es6.ruanyifeng.com/ #.let let 不存在“变量提升” 暂时性死区(即:let 所定义的变量在局部作用域中不受外界影响) var tmp = 123; i ...