JavaScript笔记(2)

一、正则表达式

正则表达式(Regexp)在js中有着非常广泛的应用，它令我们在对字符串的操作方面更加的简单和便捷。
1.正则表达式的定义
正则表达式实际上是js的一个内置对象，它的定义有两种方法：
(1)在//两个斜杠符号之间添加你所需要的字符或字符串，如：

 var z1="godness";
 var z=/g/;`

(2)直接new一个regexp对象，如：

 var z1="godness";
 var z=new RegExp("g");

2.正则表达式的属性与方法
一个正则表达式具有5个属性和2个方法。
5个属性：
global(boolean)：表示匹配时是否匹配全部，缺省为匹配全部
ignoreCase(boolean)：表示匹配时是否区分大小写，缺省为区分大小写
Singleline：有Singleline的时候匹配的是所有字符（包括/n），没有Singleline的时候，匹配的是除/n外的所有字符
Mutiline：没有Multiline的时候，把^和$与当作每一行(/n结尾的)的开头和结束来匹配，有Multiline 的时候是与整个字符串的开头和结尾匹配
pattern：表示匹配后返回的字符串。
2个方法：
exec方法：该函数通过对指定你的字符串进行一次匹配检测，在没有global修饰的情况下获取字符串中的第一个与正则表达式的内容，并且将匹配的内容和子匹配的结果存放在返回数组中。在有global修饰的情况下此函数一般会和lastIndex属性匹配使用，此函数会在lastIndex属性指定的字符处开始检索字符串，当exec()找到与表达式相匹配的字符串时，在匹配后，它将lastIndex属性设置为匹配字符串的最后一个字符的下一个位置。可以通过反复调用exec()函数遍历字符串中的所有匹配，当exec()函数再也找不到匹配的文本时，它将返回null，并把lastIndex 属性重置为0。
test方法：判断某一字符串中是否含有Reg，有则返回true，无则返回false

 <script type="text/javascript">
        var z1="godnessod";
        var z=new RegExp("OD","i");
        if(z.ignoreCase)
            console.log(z.test(z1));
        btn1.removeEventListener("click",event1);
    </script>

此时因为z中的ignoreCase参数被修改，因此test方法不区分大小写，所以最终控制台输出的是true。

二、JS中的事件对象

1.DOM响应
dom0级处理：

var btn1 = document.getElementById("bt1");
        btn1.onclick=function () {
            alert("第一次被点击");
        }

0级处理在多次使用的时候将被覆盖，如：

var btn1 = document.getElementById("bt1");
        btn1.onclick=function () {
            alert("第一次被点击");
        }
        btn1.onclick=function () {
            alert("第二次被点击");
        }

此时的对话框只能弹出一个第二次被点击，第一次被点击已被覆盖。
dom2级处理：

 var btn1 = document.getElementById("bt1")；
        btn1.addEventListener("click",event1);
        function event1(event) {
            alert(event.type);
        }

dom2级处理的好处在于只要不使用removeEventListener函数，这个addEventListener函数就能够正常执行。
由上面的代码片我们还能看到，在event1函数中可以传入一个事件作为参数，
这个事件对象的属性有type，target，source等，其中type是调用此事件的对象类型，target为此事件的作用目标。
2.事件的冒泡与捕捉
JS中事件的冒泡是由下而上的，从最具体的地方冒泡至最抽象的地方，如：

    <div id = "div">
        <button id = "bt1">点击触发事件</button>
    </div>
    <script type="text/javascript">
        var btn1 = document.getElementById("bt1");
        btn1.addEventListener("click",event1);
        var div1=document.getElementById("div");
        div1.addEventListener("click",showdiv);
        function event1(event) {
            alert(event.type);
        }
        function showdiv() {
            alert("div had been clicked");
        }
    </script>

此时若点击button，则事件将会冒泡，不仅会弹出click对话框还会弹出div had been clicked的对话框。
阻止冒泡：
有时我们并不想让事件冒泡，则此时可以使用event.stopPropagation();方法来阻止冒泡，如：

<div id = "div">
        <button id = "bt1">点击触发事件</button>
    </div>

    <script type="text/javascript">
        var btn1 = document.getElementById("bt1");
        btn1.addEventListener("click",event1);
        var div1=document.getElementById("div");
        div1.addEventListener("click",showdiv);
        function event1(event) {
            alert(event.type);
            event.stopPropagation();
        }
        function showdiv() {
            alert("div had been clicked");
        }
    </script>

此时因为event1函数中阻止了冒泡，因此showdiv函数就不会再被调用。

//经验+5