JavaScript事件基础

学习目标

1.掌握什么是事件

2.掌握HTML事件

3.掌握DOM0级事件

4.掌握常用的鼠标与键盘事件

5.掌握this的指向

什么是事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

HTML事件

语法：<tag 事件=“执行脚本”></tag>

功能：在HTML元素上绑定事件。

说明：执行脚本可以是一个函数的调用。

DOM0级事件

语法: ele.事件=执行脚本

功能：在DOM0对象上绑定事件

说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用。

鼠标事件

onload: 页面加载时触发

onclick : 鼠标点击时触发

onmouseover: 鼠标滑过时触发

onmouseout: 鼠标离开时触发

onfocus: 获得焦点时触发

onblur: 失去焦点时触发

onchange: 域的内容改变时发生

鼠标事件

onsubmit: 表单中的确认按钮被点击时触发

onmousedown：鼠标按钮在元素上按下时触发

onmousemove: 在鼠标指针移动时发生

onmouseup: 在元素上松开鼠标按钮时触发

onresize: 当调整浏览器窗口的大小时触发

onscroll: 拖动滚动条滚动时触发

键盘事件与keyCode属性

Onkeydown: 在用户按下一个键盘按键时发生

Onkeypress: 在键盘按键被按下并释放一个键时发生

Onkeyup: 在键盘按键被松开时发生

keyCode：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或者的键的代码。

关于this指向

在事件触发的函数中，this是对该DOW对象的引用。

JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;的更多相关文章

  1. HTML5 Canvas鼠标与键盘事件

    演示HTML5 Canvas鼠标事件,获取Canvas对象上的鼠标坐标,演示键盘事件 通过键盘控制Canvas上对象移动. Canvas对象支持所有的JavaScript的鼠标事件,包括鼠标点击(Mo ...

  2. Selenium WebDriver 中鼠标和键盘事件分析及扩展(转)

    本文将总结 Selenium WebDriver 中的一些鼠标和键盘事件的使用,以及组合键的使用,并且将介绍 WebDriver 中没有实现的键盘事件(Keys 枚举中没有列举的按键)的扩展.举例说明 ...

  3. tkinter中鼠标与键盘事件（十五）

    鼠标与键盘事件 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("300x200+ ...

  4. 50-用Python监听鼠标和键盘事件

    转自:https://www.cnblogs.com/qiernonstop/p/3654021.html 用Python监听鼠标和键盘事件 PyHook是一个基于Python的“钩子”库,主要用于监 ...

  5. C#/winform 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  6. java鼠标与键盘事件监听

    package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...

  7. OSX 鼠标和键盘事件

    本文转自:http://www.macdev.io/ebook/event.html 事件分发过程 OSX 与用户交互的主要外设是鼠标,键盘.鼠标键盘的活动会产生底层系统事件.这个事件首先传递到IOK ...

  8. C# 自动触发鼠标、键盘事件

    要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...

  9. 使用Robot类模拟鼠标、键盘事件

    Robot类用于模拟鼠标.键盘事件,生成本机系统输入事件.Robot 的主要用于自动化.自运行的程序和其他需要自动控制鼠标和键盘的程序 相当于实际操作的效果,不仅仅只是生成对应的鼠标.键盘事件.比如R ...

随机推荐

  1. Git冲突：commit your changes or stash them before you can merge.

    用git pull来更新代码的时候,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  2. Vue中 computed 和 methods的区别

    涉及到计算部分的时候,计算属性是基于它们的依赖进行缓存的,如果说值不变,那么它就不会去重新执行,只有当值发生了改变,它才会去重新执行一次,其它时候它都是缓存的.而方法则会反复计算处理.二者之间的差距就 ...

  3. pandas报错处理：TypeError: Empty 'DataFrame': no numeric data to plot

    Tushare返回的是pandas的DataFrame格式,但是执行以下代码时报错:TypeError: Empty 'DataFrame': no numeric data to plot impo ...

  4. date命令说明

    基本使用格式: date [-d "time-to-display"] +"format-to-display" -d指定要显示的时间,如果不指定默认为当前时间 ...

  5. telnet的装配及xinetd的讨论

    telnet由于是不安全的明文传输所以基本被ssh取代了,尤其是在Linux上:不过还是可能会用到,且启停方式还有些不同所以还是有必要说明一下. rpm -qa | grep telnet #查看是否 ...

  6. --save-dev 与 －－save区别

    npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install --save另一个是 npm install --sav ...

  7. Redis在linux环境下的安装和部署

    官网:http://redis.io          windows版本下载地址https://github.com/MicrosoftArchive/redis/releases 1Redis建议 ...

  8. PHP中的Trait方法

    <?php /* * 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait. * Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制. * Trait ...

  9. weblogic相关

    来源:http://zhidao.baidu.com/link?url=gqPaYovGiEHYPPPyI6PgPV6THVLr4nlj3CGCjY3mwm0-ERUnfuQz614ywAwYLnP6 ...

  10. js 中class选择器，addClass，removeClass，hasClass，toggleClass，getByClass

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...