事件（event），正则

Posted 2020-07-10

1、事件（event）：事件是可以被 javascript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
2、事件源： 触发事件的元素
事件： 被 JavaScript 侦测到的行为
3、事件分类

a、鼠标事件

事件句柄 触发时机
onclick 鼠标点击操作
ondblclick 鼠标双击操作
onmousedowm 按下鼠标按键
onmouseup 抬起鼠标按键
onmousemove 鼠标指针在元素上方移动
onmouseover 鼠标指针进入元素
onmouseout 鼠标指针移出元素
DOMMouseScroll 鼠标滚轮事件(FF)
onmousewheel 鼠标滚轮事件(IE,CHROM)

相对于浏览器位置
event.clientX: 返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标
event.clientY: 返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标
相对于屏幕位置
event.screenX: 返回事件发生时鼠标指针相对于屏幕的水平坐标
event.screenY: 返回事件发生时鼠标指针相对于屏幕的垂直坐标

相对于事件源位置
event.offsetX: 返回事件发生时鼠标指针相对于事件源的水平坐标
event.offsetY: 返回事件发生时鼠标指针相对于事件源的垂直坐标
event.layerX: 返回事件发生时鼠标指针相对于事件源的水平坐标(FIREFOX)
event.layerY: 返回事件发生时鼠标指针相对于事件源的垂直坐标(FIREFOX)

b、键盘事件
onkeyup 抬起键盘按键
onkeydown 按下键盘按键
onkeypress 按下或按住键盘按键

c、表单事件
onsubmit 按下表单的提交按钮
onblur input失去焦点
onfoucs input获得元素
onchange 更改input元素的内容
页面事件 onload 页面加载完成
onunload 文档的载入被撤销(例如页面跳转等情况时)
onbeforeunload 页面刷新或关闭时
4、事件处理函数： 事件发生时要进行的操作,又叫做"事件句柄"或"事件监听器"

5、事件流：当页面元素触发事件的时候, 该元素的容器以及整个页面都会按照特定的顺序响应该元素的触发事件,事件传播的顺序叫做事件流.

5.1 事件流的分类
冒泡型事件(Event Bubbling) 所有浏览器都支持,由明确的事件源到最不确定的事件源依次向上触发.
捕获型事件(Event Capturing) (IE不支持) 不确定的事件源到明确的事件源依次向下触发.
element.addEventListener(event, function, true);//捕获型
element.addEventListener(event, function, false);//冒泡型
6、onselect 事件会在文本框中的文本被选中时发生。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

属性：
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。
6、标准 Event 方法
下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。

 

 

正则：

1、RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法： /pattern/attributes
创建 RegExp 对象的语法：new RegExp(pattern, attributes);
参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。
参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

2、方括号
表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。

3、元字符（Metacharacter）是拥有特殊含义的字符：
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。

4、量词
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
n{X} 匹配包含 X 个 n 的序列的字符串。
n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,} 匹配包含至少 X 个 n 的序列的字符串。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

5、test() 方法用于检测一个字符串是否匹配某个模式.：RegExpObject.test(string)
6.table
cells[] 返回包含表格中所有单元格的一个数组。
rows[] 返回包含表格中所有行的一个数组。
caption 属性设置或返回表格的 caption 元素。
<caption> 元素定义了一个表格标题。<caption> 标签必须紧跟在 <table> 标签之后，每个表格仅能规定一个 caption。通常，caption 会位于表格之上居中的位置。
语法
tableObject.caption=captionObject
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。
cellSpacing 设置或返回在表格中的单元格之间的空白量。
frame 设置或返回表格的外部边框。
7、Select 对象代表 html 表单中的一个下拉列表。

option 集合可返回包含 <select> 元素中所有 <option> 的一个数组。
注释：数组中的每个元素对应一个 <option> 标签 - 由 0 起始。
语法
selectObject.options[]说明
options[] 集合并非一个普通的 HTMLcollection。为了和早期的浏览器向后兼容，这个集合有某种特殊的行为：允许通过 Select 对象来改变显示的选项：
如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。
注释：若允许多重选择，则仅会返回第一个被选选项的索引号。
语法
selectObject.selectedIndex=number