事件:

  概念:某些组件被执行了某些操作后,触发某些代码的执行

    *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了

    *  事件源:组件。如:按钮   文本输入框....

    *  监听器:代码

    *  注册监听:将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码

  常见的事件:

    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基础:事件的更多相关文章

  1. javascript基础-事件1

    原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因I ...

  2. javascript基础-事件2

    DOM0,DOM2,DOM3事件类型 图解: 范畴 响应顺序(标:标准浏览器.IE9+) 注意点 MouseEvent 标: mousedown-mouseup-click-mousedown-mou ...

  3. JavaScript基础事件(6)

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html#autoid-2-3-8 事件 HTML 4.0 的新特性之一是有能力使 HTML ...

  4. 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 ...

  5. 【JavaWeb】JavaScript 基础

    JavaScript 基础 事件 事件是指输入设备与页面之间进行交互的响应. 常用的事件: onload 加载完成事件:页面加载完成之后,常用于页面 js 代码初始化操作: onclick 单击事件: ...

  6. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  7. JavaScript基础笔记(九)事件

    事件 一.事件流 事件流描述的是从页面中接收事件的顺序. 一)事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点. 如:div------>b ...

  8. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  10. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

随机推荐

  1. Vue的指令和成员

    目录 Vue的指令和成员 指令 表单 斗篷 条件 循环 成员 计算成员 监听成员 Vue的指令和成员 指令 表单 表单指令一般是和属性指令联合使用的,最常见的就是v-model="变量&qu ...

  2. <Python基础>列表的基本操作

    s = 'abCDeFg aBcDea' s1 = s.split('D',3) #以s1列表为例 print(s1) #增 s1.append('foxabc') #返回值None,直接增到列表的最 ...

  3. 13-2-return

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Activiti学习笔记2 — HelloWorld

    一. Maven的POM配置文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="htt ...

  5. python spark环境配置

              在配置Hadoop之前,应该先做以下配置   1.更改主机名 首先更改主机名,目的是为了方便管理.  输入:hostname  查看本机的名称  使用 hostname 修改当前主 ...

  6. PDO连续query()失败问题

    设置了非缓冲查询(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY)以后,连续query会导致下一次结果为false $conn = "mysql:host=127.0. ...

  7. jeecms v9 vue-CLI开发环境配置

    vue-CLI开发环境配置 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静 ...

  8. Java +支付宝 +接入

    说下业务场景, 公司之前的支付宝业务是PHP对接的现在改成 Java ,在接入出现不同的问题.之前PHP用的是老的移动支付, 现在Java的新接口 , 需要签约. 跟运维沟通好几次, 说签约不了, 只 ...

  9. eclipse memory analyzer对系统内存溢出堆文件解析(转)

    本文转之:https://blog.csdn.net/rachel_luo/article/details/8992461 前言 性能分析工具之-- Eclipse Memory Analyzer t ...

  10. <每日一题>题目22:简单的python练习题(31-40)

    #31.分布式爬虫主要解决什么问题? ''' ip 带宽 CPU IO ''' #32.网络传输层 ''' 应用层—http ftp dns nfs 传输层—tcp --udp 网络层—ip icmp ...