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爬取(自动化)豆瓣电影影评,并存储。
from selenium import webdriverfrom selenium.webdriver import ActionChainsimport time driver = webdri ...
- wpf 获取image控件的图片并保存
XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...
- 属性面板:tabcontroller
Tabcontroller 布局 Anchor 设置控件距离选定方向固定: Dock 定义要绑定到容器的控件边框 Location 设置控件对于容器左上角的坐标 Margin 指定此控件与另一控件边距 ...
- 廖雪峰Java11多线程编程-2线程同步-3死锁
1.线程锁可以嵌套 在多线程编程中,要执行synchronized块: 必须首先获得指定对象的锁 Java的线程锁是可重入的锁.对同一个对象,同一个线程,可以多次获取他的锁,即同一把锁可以嵌套.如以下 ...
- 高速网络下的http协议优化
http协议是基于TCP协议,具备TCP协议的所有功能.但是与一般TCP的长连接不同的是http协议往往连接时间比较短,一个请求一个响应了事.但是总所周知,TCP协议除了具备可靠的传输以外,还有拥塞控 ...
- linux系统添加定时任务
http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/crontab.html
- iOS之CAScrollLayer属性简介和使用
1.CAScrollLayer的简介 CAScrollLayer用于显示一个滑动图层的一部分,可以确定滑动方向和可视区域面积,限制不滑出区域外!相关属性如下:其中 /* Scroll the cont ...
- iOS之CAEmitterLayer粒子引擎
1.CAEmitterCell粒子发射器的相关属性: /* CoreAnimation - CAEmitterLayer.h Copyright (c) 2007-2017, Apple Inc. A ...
- vue alert插件(标题为图片)(自写)
<template> <div class="modelSelf"> <div class="model" @click=&quo ...
- Ubuntu安装Maven(转)
原文地址:http://my.oschina.net/hongdengyan/blog/150472 一.环境说明: 操作系统:Ubuntu 14.10(64位) maven:apache-maven ...