js函数与事件
javascript中的函数:
1,解析器在向执行环境中加载数据时，会率先读取函数声明，并使其在执行任何代码之前可用；当执行器执行到函数表达式的代码的时候才会真正的解释执行
2,arguments:函数内部用来接收函数参数的类数组对象
3,js中没有重载的概念
4 形式
//匿名函数
function(){
//....
}
5 调用
在<script>标签中调用定义的函数
例如:可以先调用后定义
<script type="text/javascript">
test();
function test(){
alert("hello world");
}
test();
</script>
在html元素的事件属性中调用定义过的函数
例如:可以先调用后定义
<script type="text/javascript">
function test(){
alert("hello world");
}
</script>
<input type="button" value="点击" onclick="test()" />
6,函数内部属性
arguments:是类数组对象,传入函数中参数数组
this: 指向的是函数赖以执行的环境对象
7,函数的属性:
length: 表示函数希望接受的命名参数的个数
8,自调用函数
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
实例
无参的自调用函数:
(function () {
var x = "Hello!!"; // 我将调用自己
})();
有参的自调用函数:
(function(a){
console.log("自调用 参数 "+ a);
})(10);
9,闭包:
闭包是指有权访问另一个函数作用域变量的函数，创建闭包的通常方式，是在一个函数内部创建另一个函数;通常用于保存变量于内存中
闭包的产生是A函数里定义了B函数,B函数里调用了A函数的变量.
var add = (function(){
var sum = 0;
return function(){
return sum+=1;
}
})();
闭包的作用:
1.能在函数外部访问到函数内部的变量
2.能使函数内部的局部变量一直存在于内存中(因为调用此变量的函数会变成全局变量,一直在内存中)
3.使得js函数的私有变量变为可能。
28.2. js事件
javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件三要素：
事件目标（event target）
发生的事件与之相关联或与之相关的对象
事件处理程序（event handler）
处理或相应事件的函数
事件对象（event object）
与特定事件相关且包含有关该事件详细信息的对象。
2) 事件处理程序
事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头(onclick,onload)
1. HTML事件处理程序
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。
<input type="button" value="clickMe" onclick = "alert('is clicked')">
不能在事件中使用未经转义的HTML语法字符
<input type="button" value="clickMe" onclick = "showMsg()">
<script type="text/javascript">
function showMsg(){
alert("is clicked");
}
</script>
点击按钮会调用showMsg()函数，事件处理程序的代码在执行时，有权访问全局作用域的任何代码。
缺点：
1)时差问题，用户可能会在HTML元素以出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行的条件。
2)这种扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
3)HTML与JavaScript代码紧密耦合。
2. DOM0级事件处理程序
通过javascript制定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。特点是简单，跨浏览器。
var btn = document.getElementById("btn");
btn.onclick = function(event){
alert('cliked');
}
dom0级方法制定的事件处理程序被认为是元素的方法，因此这个时候时间处理程序是在元素的作用域中运行，this指向当前元素。
btn.onclick = null; //删除事件处理程序
3. DOM2级事件处理程序
DOM2级规范以一种符合逻辑的方式来标准化DOM事件，IE9,Firefox,Opera,Safari,Chrome全部已经实现了"DOM2级事件"模块的核心部分。IE8是最后一个仍然使用其专有事件系统的主要浏览器。
addEventListener()
事件绑定
参数：
要绑定的事件名
作为事件处理的函数
布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用
removeEventListener()
事件删除
参数：
要删除的事件名
作为事件处理的函数
布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用
例如：
//事件绑定
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
alert(this.id); //该函数在其依附的元素的作用域中运行。
},false);
//事件移除
var btn = document.getElementById("btn");
var handler = function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);
btn.removeEventListener("click",handler,false);//移除
注:1,可以添加多个事件处理程序，并且按照添加她们的顺序触发。
2,移除事件传入的参数与添加处理程序时使用的参数相同，
3,添加事件时如果使用匿名函数将无法删除
3) 事件对象
1. DOM中的事件对象
在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中
dom.onclick = function(event){
console.log(event);
}
dom.addEventListener("click",function(event){
console.log(event);
},false);
事件对象的属性均为只读属性。
属性 类型 说明
bubbles Boolean 事件是否冒泡
cancelable Boolean 是否可以取消事件默认行为
currentTarget Element 事件处理程序当前正在处理事件的那个元素
eventPhase Integer 调用事件处理程序的阶段;1，捕获 2，处于目标 3，冒泡
target Element 事件真正目标
type String 事件类型，需要一个函数处理多个事件时，可以使用该属性。
preventDefault() Function 取消事件的默认行为
stopPropagation() Function 取消事件的进一步捕获或者冒泡
在事件处理程序内部，对象this始终等于currentTarget值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，this,currentTarget,target包含相同的值。
4) 事件类型
1. UI事件
load
当页面完全加载后再window上触发，当所有框架加载完毕时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在<object>触发
select
当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
resize
当浏览器窗口被调整到一个新的高度或者宽度时，会触发
scroll
当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单
2. 焦点事件
blur
元素失去焦点的时候触发
focus
元素获得焦点的时候触发，不支持冒泡
3. 鼠标与滚轮事件
click
点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件
dblclick
双击主鼠标按钮时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
mousedown
任意鼠标按钮按下时触发
mouseup
释放鼠标按钮触发
mousemove
鼠标在元素内部移动的时候重发触发
mousewheel
滚轮事件
mouseover
鼠标位于元素外部，将其首次移入另一个元素边界之内时触发【支持子元素】
mouseenter
鼠标光标从元素外部首次移动到元素范围内激发，不冒泡。【不支持子元素】
mouseout
在位于元素上方的鼠标光标移入到另外一个元素中。【支持子元素】在被选元素上与mouseleave效果相同
mouseleave
在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡【不支持子元素】
4. 相关元素,event特殊属性
1.客户区坐标位置
clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标
2.页面坐标位置
pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
3.屏幕位置
screenX,screenY
4.修改键
值为boolean类型，用来判断对应的按键是否被按下
shiftKey
ctrlKey
altKey
metaKey
5.鼠标按钮
mousedown,mouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。
0表示主鼠标按钮
1表示中间的滚动按钮
2表示次鼠标按钮
5. 键盘与文本事件
keyup 释放键盘上键时触发
当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的特定键对应，对数字字母键，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同
6.表单事件
onsubmit 在提交表单前执行onsubmit
如果返回 true 就会提交表单
如果返回 false 不会提交表单
eg:
<form onsubmit="return true;">
<form onsubmit="return false;">
注意:javascript代码也可以提交表单:
document.forms.myForm.submit();
29.1 正则表达式的基本语法规则
语法:
创建正则表达式对象:
var reg = new RegExp(pattern,modifiers);
或者
var reg = /pattern/modifiers;
注:
pattern 描述了表达式的模式/规则
modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配
对应修饰符modifiers有三个选项:
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
同时在创建正则表达式对象的是也可以不写修饰符
29.2 pattern内容的分析
方括号表达式:匹配一个字符
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
(red|blue|green) 查找任何指定的选项。
元字符: 一个字符
. 查找单个字符，除了换行和行结束符。 想表示字符. 可以转义
\w 查找单词字符。字母 数字 _
\W 查找非单词字符。非 字母 数字 _
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NUL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
量词:
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 的字符串。
29.3 支持正则表达式的 String 对象的方法
使用字符串对象的相关方法按照正则表达式
所描述的规则去搜索、匹配、替换、分割.
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
EG:var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
split 把字符串分割为字符串数组。
29.4 RegExp 对象方法
使用正则表达式对象(RegExp)的相关方法来对
指定字符串进行格式的验证.
compile 编译正则表达式。
var str="Every man in the world! Every woman on earth!";
patt=/man/g;
str2=str.replace(patt,"person");
document.write(str2+"<br />");
patt=/(wo)?man/g;
patt.compile(patt);
str2=str.replace(patt,"person");
document.write(str2);
exec 检索字符串中指定的值。
var str = "Visit W3School";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
console.log(result);
//["W3School", index: 6, input: "Visit W3School", groups: undefined]
}
返回找到的值，并确定其位置。
test 检索字符串中指定的值。
返回 true 或 false。
29.5 例子
var v = "aa1a";
//字符串中包含数字就行
var reg = /\d/;
console.log(reg.test(v));
var v = "aaa1111aa";
//字符串中连着出现4次(或者更多)数字即可
var reg = /\d{4}/;
console.log(reg.test(v));
var v = "1111";
//^表示开头 $表示结尾
//开头和结尾直接必须连续出现4次数字
var reg = /^\d{4}$/;
console.log(reg.test(v));
var v = "1aaa2345";
//开头一个非0数字,后面跟任意字符
0-n个,最后4个数字结尾
var reg = /^[^1-9]{1}.*\d{4}$/;
console.log(reg.test(v));
var v = "aaredaa";
//red go yes 三个单词任意匹配
var reg = /(red|go|yes)/;
console.log(reg.test(v));
var v = "a1";
//开头是一个字符 结尾是一个
数字(一共俩个字符)
var reg = /^\w\d$/;
console.log(reg.test(v));
var v = "aasd11111";
//开头是字符(1-n个)
var reg = /^\w+\d$/;
console.log(reg.test(v));
var v = "aasd )_###11111";
//开头是字符(1-n个) 中间随意匹配
var reg = /^\w+(.*)+\d$/;
console.log(reg.test(v));
//email验证
var v = "huzl@briup.com";
var reg = /^\w+@\w+(\.[A-z]{2,3}){1,2}$/;
console.log(reg.test(v));
