js-事件、正则表达式

AddEventListener（）之中有三个参数，分别是（1）事件的名称（注：不要加on,例：click才是点击事件的名称）（2）需要执行的function(){} (3)布尔类型（false表示的是事件冒泡开启，true表示的是事件捕获开启）

EventTarget.prototype.addEventListener = function(type,listener,useCapture) {};
/**
@param {string} type
@param {EventListener|Function} listener
@param {boolean} [useCapture = false]
*/

封装添加事件的兼容性：

function addEventListener(element, type, listener) {
    //能力检测
    if(element.addEventListener) { //谷歌、火狐支持
        element.addEventListener(type, listener, false);
    }else if(element.attachEvent) { //ie浏览器
        element.attachEvent("on" + type, listener);
    }else{                //  element.onclick=function(){}
        element["on" + type] = listener;
    }
}

封装移出事件的兼容性：

function removeEventListener(element,type,listener){
    if(element.removeEventListener){
        element.removeEventListener(type,listener,false);//谷歌火狐之中移除事件的方式
    }else if(element.detachEvent){
        element.detachEvent("on"+type,listener);//ie中移除事件的方式
    }else{
        element["on"+type]=null;//element.onclick=function(){}移除事件的方式，此处为何不能写成element.+”on”+type的形式，因为type是一个变量，对象的属性是变量时只能写在[]之中。
    }
}

事件的添加与移除

添加：

<input type="button" value="按钮" id="btn"/>
<script>
    var btn=document.getElementById("btn");
        function test(){
               alert("233");
        }
    //使用addEventListener添加一个点击事件
    btn.addEventListener("click",test,false);
</script>

添加并移除：

<script>
    var btn=document.getElementById("btn");
    //    //移除事件：当test命名函数被调用三次之后，移除点击事件
    var num=0;
    function test(){
        num++;
        alert("233");
        if(num==3){
            btn.removeEventListener("click",test,false);
        }

    }
    btn.addEventListener("click",test,false);
</script>

补充：我们在注册事件的时候需要考虑到注册事件的性能问题：

举个例子:给下面每一个li注册一个点击事件：

<ul id=”ul”>

<li>123</li>

<li>234</li>

<li>456</li>

<li>567</li>

</ul>

var ul = document.getElementById("ul");
//第一种方式
for(var i = 0, length = ul.children.length; i < length; i++) {
    var li = ul.children[i];
    
    li.onclick = function(){//此处可以看出每次都要注册运行一个匿名函数
console.log(this.innerText);

};
}


//第二种方式
for(var i = 0, length = ul.children.length; i < length; i++) {
    var li = ul.children[i];
    
    li.onclick = test; //而运用命名函数的方式则能大大提高程序的运行                                 //效率
}

function test() {
    console.log(this.innerText);
}

事件冒泡：

---事件委托(好处)：举个例子吧我们现在的要求还是给每个li注册一个点击事件，此时我们可能会想到要给每一个li遍历注册事件，但是我们还有一种更加简单的方法那就是通过事件冒泡的方式委托给它的ul标签，对它进行事件注册

<ul id=”ul”>

<li>123</li>

<li>234</li>

<li>456</li>

<li>567</li>

</ul>

 var ul = document.getElementById("ul");
        ul.addEventListener("click", function (e) {
              alert(e.target.innerText);//e.target表示的是当前触//发事件的元素
        }, false);

当然有好处便有坏处，举个例子我们在页面之中需要通过一个a标签来点击弹出一个窗口，假设a标签的id是link，窗口盒子的的id为box,  $$(“”)表示获取页面元素的id

$$(“link”).onclick=function(e){

        $$(“box”).style.display=”block”;

                e.stopPropagation();

}

这样点击a标签之后，盒子就显示出来了，但是我们还需要在单击页面空白之处隐藏盒子。因此就有了

Document.onclick=function(){

$$(“box”).style.display=”none”;}

那么问题就来了：我们会发现第一段之中的显示盒子代码不起效果，为什么呢？原因就在于事件冒泡，a标签处于document之中，第二段代码让盒子不显示，覆盖了a标签显示功能的执行。解决办法就是在第一段代码之中加入e.stopPropagation();以阻止事件冒泡

 

事件捕获：在文章开头我们讲到AddEventListener（）之中有三个参数，其中最后一个参数是布尔类型的true/false.

在这里代表事件捕获的就是true.它与事件冒泡的顺序正好相反，若是发生盒子嵌套的话冒泡是由内而外显示，捕获是由外向内显示元素。

 

e.target的相关属性：

Box3是蓝色盒子，box2是绿色盒子，box1是红色盒子

上图console之中显示的为单机box3盒子时所触发的。

var elements=[box1,box2,box3];
    for(var i= 0,length=elements.length;i<length;i++){
        var element=elements[i];
//        element.addEventListener("click",test,false);
        element.addEventListener("mousedown",test,false);
    }
    function test(e){
        e=e||window.event;
        console.log("target:"+e.target.id);//target始终是点击的元素
        console.log("currentTarget:"+ e.currentTarget.id);//currentTarget是冒泡的的元素
        console.log("this:"+this.id);//与currentTarget保持一样
}
//除了在冒泡事件中，trget与currentTarget显示的内容是一样的。

正则表达式：

一、webstorm中按“ctrl+F”键打开，勾选Regex(正则表达式)，match case（匹配大小写）

按“ctrl+R” 替换

//正则表达式的作用

1.匹配

2.获取

3.替换

//

二、常用的正则表达式规则

//2.1 元字符

    //.   匹配任何单个字符，除了换行

    //d  数字   D 非数字

    //w  数字 字母 下划线   W 非

    //s  空白   S 非空白

    //   换行

    //   制表符

//2.2  范围-- 匹配的是一个字符  ABCD

    // [0-9]  [0123]  [a-z]  [A-Z]  匹配的是一个字符

//2.3  | 或者   w|d

//2.4  量词  -只修饰一个字符

    //a+  1个或多个a

    //a?  1个或0个a

    //a*  0个或多个a

        //var str = "aabbccddeeff";

        //var regRex = /aa*b/;

        //console.log(regRex.test(str));

//2.4  量词  -只修饰一个字符

    //a{x}  x个n

    //a{x,} 至少x个a

    //a{x,y}  x-y个a

//2.5 开始结束

    //^a  以a开始

    //a$  以a结束

//2.6 () 看成一个整体

//2.7 匹配汉字

    // [u4e00-u9fa5]

        //    var str = "中华人民共和国";

        //    var regRex = /[u4e00-u9fa5]{7}/;

        //    console.log(regRex.test(str));

//2.8 参数

    //i  忽略大小写

    //g  全局匹配

在javascript之中创建正则表达式对象的两种写法：

下面这段代码也是利用正则表达式进行字符串的匹配判断：

输出的内容为true/false

<script>
//    第一种写法
//    var regularExpression=new RegExp("\d+");
//    var str="abc";
//    console.log(regularExpression.test(str));
//第二种写法
    var regularExpression=/a?/;
    var str="abc";
    console.log(regularExpression.test(str));
</script>

在javascript之中正则表达式的提取：

举个例子：

var str="张三: 1000，李四：5000，王五：8000。";
var reg=/d+/g;
var arr=str.match(reg);
console.log(arr);

将提取到的数字转换成数组的形式输出，/  /g====g表示的是global全局。

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

stringObject.match(searchvalue)

stringObject.match(regexp)

参数	描述
searchvalue	必需。规定要检索的字符串值。
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

<