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}