事件:

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

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

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

    *  监听器:代码

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

  常见的事件:

    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. python爬取(自动化)豆瓣电影影评,并存储。

    from selenium import webdriverfrom selenium.webdriver import ActionChainsimport time driver = webdri ...

  2. wpf 获取image控件的图片并保存

    XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...

  3. 属性面板:tabcontroller

    Tabcontroller 布局 Anchor 设置控件距离选定方向固定: Dock 定义要绑定到容器的控件边框 Location 设置控件对于容器左上角的坐标 Margin 指定此控件与另一控件边距 ...

  4. 廖雪峰Java11多线程编程-2线程同步-3死锁

    1.线程锁可以嵌套 在多线程编程中,要执行synchronized块: 必须首先获得指定对象的锁 Java的线程锁是可重入的锁.对同一个对象,同一个线程,可以多次获取他的锁,即同一把锁可以嵌套.如以下 ...

  5. 高速网络下的http协议优化

    http协议是基于TCP协议,具备TCP协议的所有功能.但是与一般TCP的长连接不同的是http协议往往连接时间比较短,一个请求一个响应了事.但是总所周知,TCP协议除了具备可靠的传输以外,还有拥塞控 ...

  6. linux系统添加定时任务

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/crontab.html

  7. iOS之CAScrollLayer属性简介和使用

    1.CAScrollLayer的简介 CAScrollLayer用于显示一个滑动图层的一部分,可以确定滑动方向和可视区域面积,限制不滑出区域外!相关属性如下:其中 /* Scroll the cont ...

  8. iOS之CAEmitterLayer粒子引擎

    1.CAEmitterCell粒子发射器的相关属性: /* CoreAnimation - CAEmitterLayer.h Copyright (c) 2007-2017, Apple Inc. A ...

  9. vue alert插件(标题为图片)(自写)

    <template> <div class="modelSelf"> <div class="model" @click=&quo ...

  10. Ubuntu安装Maven(转)

    原文地址:http://my.oschina.net/hongdengyan/blog/150472 一.环境说明: 操作系统:Ubuntu 14.10(64位) maven:apache-maven ...