16-JS 事件监听、事件委托、拖拽事件、正则表达式_js监听文件拖拽事件会被打断-CSDN博客

本文链接：https://blog.csdn.net/weixin_51339105/article/details/124233361

1.事件监听以及移除事件监听

可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>

        oDiv = document.getElementById('box');
        // oDiv.onclick = function(){
        //       console.log(1)
        // }
        // oDiv.onclick = function(){
        //       console.log(2)
        // }
        // oDiv.onclick = function(){
        //       console.log(3)
        // }


        /*
         事件监听：可以向一个元素添加多次点击事件，后一个点击事件不会覆盖前一个点击事件
         obj.addEventListener('click',function(){},false)
         参数1  事件
         参数2  事件的执行函数
         参数3  boolean值，默认是false,明确了该事件是在捕获阶段执行还是在冒泡阶段执行
                false代表在冒泡阶段执行，true代表在捕获阶段执行（可不写）
        */
    //    oDiv.addEventListener('click',fn1,false);
    //    oDiv.addEventListener('click',fn2,false);
    //    oDiv.addEventListener('click',fn3,false);



    //    IE9以下添加事件监听
        //  oDiv.attachEvent('onclick',fn1);
        //  oDiv.attachEvent('onclick',fn2);
        //  oDiv.attachEvent('onclick',fn3);





        addEventListener(oDiv,'click',fn1,false)
        addEventListener(oDiv,'click',fn2,false)
        addEventListener(oDiv,'click',fn3,false)
        // 事件监听的兼容
        function addEventListener(obj,event,fn,bool){
              if (obj.addEventListener){
                  obj.addEventListener(event,fn,bool) 
              }else if(obj.attachEvent){
                  obj.attachEvent('on' + event,fn)
              }
        }





        // 移除事件监听器
        // oDiv.removeEventListener('click',fn1,false);
        // oDiv.detachEvent('onclick',fn1)       IE9以下


        // 移除事件监听器的兼容写法
        function removeEventListener(obj,event,fn,bool){
            if(obj.removeEventListener){
                obj.removeEventListener(event,fn,bool)
            }else if(obj.detachEvent){
                obj.detachEvent('on' + event,fn)
            }
        }
  
        removeEventListener(oDiv,'click',fn1)



        function fn1(){
            console.log('fn1')
        }
        function fn2(){
            console.log('fn2')
        }
        function fn3(){
            console.log('fn3')
        }
    </script>
</body>
</html>

2.事件委托

事件委托也叫事件代理，事件代理就是把原本需要绑定在子元素的响应事件（‘click’,‘keydown’,…）委托给父元素，让父元素担当事件监听的职务；
原理：就是Dom元素的事件冒泡
优点：

1.可以大量节省内存占用，减少事件注册

2.可以实现新增子元素时无需对新增元素绑定事件（动态绑定事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul id="oul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>

    <script>

        /* 
        事件委托也叫事件代理，事件代理就是把原本需要绑定在子元素的响应事件（'click','keydown',...）
        委托给父元素，让父元素担当事件监听的职务；
        原理  就是Dom元素的事件冒泡

        优点：
        1.可以大量节省内存占用，减少事件注册
        2.可以实现新增子元素时无需对新增元素绑定事件（动态绑定事件）
        */

        var oUl = document.getElementById('oul');
        oUl.onclick = function(evt){
            var e = evt || window.event;
            // 获取事件源
            // console.log(e.target);   //标准浏览器
            // console.log(e.srcElement)    //IE


            // 获取事件源的兼容写法
            var target = e.target || e.srcElement;
            console.log(target.innerHTML);

        }
    </script>
</body>
</html>

3.拖拽事件

鼠标按下，求出鼠标的相对坐标值
鼠标移动，对象的left=鼠标的绝对坐标值-相对坐标值+‘px’
鼠标弹出，取消鼠标移动事件 = null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        /* 
        鼠标按下，求出鼠标的相对坐标值
        鼠标移动，对象的left=鼠标的绝对坐标值-相对坐标值+'px'
        鼠标弹出，取消鼠标移动事件 = null
        */

        var oDiv = document.getElementById('box');
        oDiv.onmousedown = function(evt){
            var e = evt || window.event;
            // console.log(e.offsetX,e.offsetY)
            var disX = e.offsetX;
            var disY = e.offsetY;
            // 鼠标在页面上移动
            document.onmousemove = function(evt){
                var e = evt || window.event;
                // console.log(e.pageX,e.pageY)

                oDiv.style.left = e.pageX - disX + 'px';
                oDiv.style.top = e.pageY - disY + 'px'; 
            }

            // 鼠标弹起，停止拖拽
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

4.正则表达式

网址：https://tool.chinaz.com/tools/regexgenerate
正则表达式：匹配字符串的一组规则
作用：常用于表达式验证

4.1如何创建正则表达式？
1.字面量方法 /正则表达式/标志位
2.构造函数方式 new RegExp(‘正则表达式’,‘标志位’)
4.2正则表达式的方法
1.正则表达式.test(字符串)； //判断字符串中是否包含正则的内容，如果包含返回true,否则返回false
2.正则表达式对象.exec(字符串)；//返回伪数组，如果没有匹配到正则表达式，返回null
4.3检测正则表达式的字符串的方法
1.字符串对象.match(正则表达式) 返回伪数组，如果没有匹配到正则表达式返回null
2.字符串对象.replace(‘正则表达式’，新字符串) 替换字符串
3.字符串.search(正则表达式) 查找正则匹配到字符串在父串中第一次出现的下标位置，没有匹配到返回-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="txt" id="txt" value="">

    <script>

        // var reg = /^\s+$/;   //空白字符
        // // var reg1 = new RegExp('^s+&')

        // var str='    ';
        // console.log(reg.test(str));




        // var str = prompt('请输入一组规则');
        // var re = new RegExp(str);

        // var otxt = document.getElementById('txt');
        // otxt.onblur = function(){
        //     var str = otxt.value;
        //     if(re.test(str)){
        //         window.close()
        //     }
        // }





        // var str = 'how do you do';
        // var reg = /do/;
        // console.log(str.match(reg));
        // console.log(str.replace(reg,'de'));    //替换how de you do

        // console.log(str.search(reg));  //4




        /* 无标志位 */
        // var reg = /o/;
        // var str = 'how are you hello';
        // console.log(reg.exec(str));   //['o']
        // console.log(str.match(reg));   //['o']






        // /* 有标志位g    g表示查找所有可能的匹配global*/
        // var reg = /o/g;
        // var str = 'how are you hello';
        // console.log(reg.exec(str));   //['o']
        // console.log(str.match(reg));   //['o','o','o']





        /* 有标志位i   i表示匹配的时候不区分大小写*/
        var reg = /o/i;
        var str = 'hOw are yOu hellO';
        console.log(reg.exec(str));   //['o']
        console.log(str.match(reg));   //['o']



    </script>
</body>
</html>