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 匹配非单词边界。
　　 查找 NUL 字符。
　　 查找换行符。
　　f 查找换页符。
　　 查找回车符。
　　 查找制表符。
　　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 = /^wd$/;
　　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));