绑定事件/冒泡/默认行为/正则

178 阅读1分钟

1. 鼠标右键事件...

    demo1.oncontextmenu = function(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"
    }
    // 点取内部不关闭,点击外部关闭
    window.onclick = e => {
        let menu = document.querySelector('.menu')
        if(menu && !menu.contains(e.target))
        // contains() 检测一个元素包含在另一个元素之内
        menu.remove()
    }

2. 鼠标点击事件

事件覆盖,只触发后者

    // 只触发第二次事件
    demo1.onclick = function () {
        console.log('早');
    }
    demo1.onclick = function () {
        console.log('午');
    }

stopPropagation()阻止冒泡

    btn.onclick = function (e) {
        e.stopPropagation();
        console.log('冒泡');
    }

preventDefault()阻止默认行为

    zz.onclick = function (e) {
        e.preventDefault();
        console.log('不跳转');
    }

事件不覆盖,触发两次

    // 触发两次
    demo1.addEventListener('click', function () {
        console.log('早');
    })
    demo1.addEventListener('click', function () {
        console.log('午');
    })
    btn.addEventListener('click', function () {
        console.log('冒泡');
    }, true)  // 默认为false; true是从父级到自身,捕获事件

    // 触发两次
    $('.demo1').click(function () {
        console.log('早');
    })
    $('.demo1').click(function () {
        console.log('午');
    })

3. 移入移出 ,对于是否有子集的区别

onmouseover、onmouseout

    // 有子集时异常
    demo1.onmouseover = function () {
        console.log('移入');
    }
    demo1.onmouseout = function () {
        console.log('移出');
    }

onmouseenter、onmouseleave

    // 有子集,正常
    demo1.onmouseenter = function () {
        console.log('移入');
    }
    demo1.onmouseleave = function () {
        console.log('移出');
    }

4.正则

   // let reg = new RegExp("(美国|日本)",'i')
   
   let reg = /^(美国|日本|FUC*)/i  // i 大小写
   let str = 'FUC*你好'

   let reg = /^张飞/i   // ^ 开头匹配
   let str = '张飞'

   let reg = /8$/i      // $ 结尾匹配
   let str = '19999999998'
   let reg = /^[186]{6}$/i  //186三个数随便6次
   let str = '456456'

   let reg = /^(18|16|26){6}$/i   // 18、16、26三个数字随便6次
   let str = '181818161626'

   let reg = /^(\.|\[|\]|\{|\}|\|)$/i   // 转义字符\
   let str = '['

   let reg = /^[a-zA-Z]{1,5}$/i
   let reg = /^[a-zA-Z]{2,}$/i
   let reg = /^[a-zA-Z]?$/i      // {0,1}
   let reg = /^[a-zA-Z]*$/i      // {0,wx}
   let reg = /^[a-zA-Z]+$/i      // {1,wx}