js原生绑定事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
            width: 100px;
            height: 200px;
            position: absolute;
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="demo" style="width: 300px;height: 300px;background-color: red;">
        <button id="btn" style="width: 100px;height: 100px;">btn</button>
    </div>
    <script>
        
        btn.onclick = (e) => {
            e.stopPropagation()// 阻止冒泡
            console.log(1111);
        }
        demo.onclick = () => {
            console.log(2222);
        }
        document.body.onclick = () =>{
            console.log(3333)
        }
        // 添加事件，可多次添加，最后的布尔值可以不写，默认是false
        // false时，冒泡，从触发元素向外依次触发相同事件
        // true时，捕获，从最外向触发元素依次触发相同事件
         btn.addEventListener('click',()=>{
            console.log(1111);
        },true)
          demo.addEventListener('click',()=>{
            console.log(2222);
        },true)
        document.body.addEventListener('click',()=>{
            console.log(3333);
        },true)
        
        // 鼠标进过离开效果
        demo.onmouseenter = ()=>{
            console.log('移入..')
        }
        demo.onmouseleave= ()=>{
            console.log('移出..')
        }
        // 鼠标进过离开效果，与上一种区别在于，如果绑定的元素有子元素，在经过子元素时会先触发离开事件，在触发经过事件
        demo.onmouseover = ()=>{
            console.log('移入..')
        }
        demo.onmouseout= ()=>{
            console.log('移出..')
        }
        
        // 选定元素内自定义右键
        demo.oncontextmenu = (e) => {
            e.preventDefault();//阻止默认事件
            let menu = document.querySelector('.menu')
            if (menu) menu.remove()// 唯一，判断是否存在，处在就删除
            menu = document.createElement('div')
            menu.classList.add('menu')
            document.body.appendChild(menu)
            // 定义右键的位置：当前鼠标的位置
            menu.style.left = e.pageX+'px'
            menu.style.top = e.pageY+'px'
            menu.oncontextmenu = (e) => {
                e.preventDefault()
            }
        }
        
        // 点击除自定义的右键本身外的地方移除自定义的右键
        window.onclick = (e) => {
            let menu = document.querySelector('.menu')
            // contains() 用于判断DOM元素的包含关系; 需要注意的是:它以HTMLElement为参数,且返回布尔值
            if (menu&&!menu.contains(e.target)) menu.remove()
        }
    </script>
</body>

简单正则

<script>
        // 判断包含a或b,i表示无视大小写
        let reg = new RegExp('(a|b)','i') 
        // let reg = /(a|b)/i 效果同上
        let arr = 'ccc'
        console.log(reg.test(arr));
        arr = 'cba'
        console.log(reg.test(arr));

        // 判断以a,b,A,B中任意1-2个开头，1-2结尾
        reg = /^(a|b){1,2}(a|b){1,2}$/i
        arr = 'Aa'
        console.log(reg.test(arr));

        // 关键字符，在前面加\转译
        reg = /(\.|\[|\]|\{|\}|\|)/ 
        arr = '|'
        console.log(reg.test(arr));
        arr = '.'
        console.log(reg.test(arr));
        arr = '['
        console.log(reg.test(arr));
        arr = '}'
        console.log(reg.test(arr));
        
        // 判断长度为0或1的任意英文字母组成的字符串
        reg = /^[a-zA-Z]?$/ //$ {0,1}
        arr = 'aA'
        console.log(reg.test(arr));
        // 判断任意长度的任意英文字母组成的字符串
        reg = /^[a-zA-Z]*$/ //* {0,}
        arr = ''
        console.log(reg.test(arr));
        // 判断长度最少为1的任意英文字母组成的字符串
        reg5 = /^[a-zA-Z]+$/ //+ {1,}
        arr = ''
        console.log(reg.test(arr));
        
        // 简单的手机号码验证
        reg = /^1[2-8]\d{9}$/
        arr = '13234234190'
        console.log(reg.test(arr));
        
        // 简单的邮箱验证
        reg = /^\w{1,20}@\w{1,10}\.(com|cn|net|org)$/
        arr = 'www@abc.com'
        console.log(reg.test(arr));
        arr = 'www@@abc.com'
        console.log(reg.test(arr));

</script>

js原生绑定事件、简单正则

js原生绑定事件

简单正则