1.鼠标事件
+ 一些依赖鼠标行为触发的事件
获取元素
var ele = document.querySelector('div')
1. click
ele.onclick = function () { console.log('鼠标左键单击') }
2. dblclick
ele.ondblclick = function () { console.log('鼠标左键双击') }
3. contextmenu
ele.oncontextmenu = function () { console.log('鼠标右键单击') }
4. mousedown
ele.onmousedown = function () { console.log('鼠标按键按下') }
5. mouseup
ele.onmouseup = function () { console.log('鼠标抬起事件') }
6. mousemove
ele.onmousemove = function () { console.log('鼠标移动事件') }
7. mouseover
ele.onmouseover = function () { console.log('鼠标移入事件') }
8. mouseout
ele.onmouseout = function () { console.log('鼠标移出事件') }
9. mouseenter
ele.onmouseenter = function () { console.log('鼠标移入事件') }
10. mouseleave
ele.onmouseleave = function () { console.log('鼠标移出事件')
2.e中的属性
type 事件类型
timeStamp 从页面渲染完成后到触发事件所需要的毫秒数
target 目标对象
srcElement 目标对象
currentTarget 事件侦听对象
bubbles 是否允许冒泡 只读
cancelBubble 是否取消冒泡
cancelable 取消冒泡 只读（抛发事件时设置）
view 视窗
path 冒泡路径
ctrlKey 是否按下ctrl键
metaKey 是否按下command键(苹果)
shiftKey 是否按下shift键
altKey 是否按下alt键
which 按下那个键 左键 1 右键 3
//DOM 元素的位置都是Left Top
// 鼠标的位置都是 x,y
//1. 当前鼠标相对视口距离
clientX: 734
clientY: 109
x: 734
y: 109
//2. mousemove 相对上次移动的距离 向右和下为正值，向左和上为负值
movementX: 0
movementY: 0
//3. 绝对页面顶端左上角的距离
pageX: 734
pageY: 109
//4. 相对屏幕左上角的距离
screenX: 734
screenY: 220
//5. 相对目标 e.target的左上角距离
offsetX: 65
offsetY: 51
// 如果目标对象没有定位，相对向上的父容器（定位的）左上角位置
// 如果目标对象定位了，相对目标对象左上角位置
layerX: 65
layerY: 51
3.拖拽小案例
拖拽可以做验证码 拖拽验证
var divs=document.querySelectorAll(".div1")
divs.forEach(function(item){ //因为同时操作多个div1 所以到遍历每一个添加mousedown事件
item.addEventListener("mousedown",mouseHandler)
})
function mouseHandler(e){
if(e.type==="mousedown"){
// this-->就是按下的div
this.offsetX=e.offsetX
this.offsetY=e.offsetY
document.div=this
document.addEventListener("mousemove",mouseHandler)
document.addEventListener("mouseup",mouseHandler)
}else if(e.type==="mousemove"){
// this-->就是document
this.div.style.left=e.clientX-this.div.offsetX+"px"
this.div.style.top=e.clientY-this.div.offsetY+"px"
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler)
document.removeEventListener("mouseup",mouseHandler)
}
}
4.表单事件
表单事件
+ 专门给表单元素使用的
var inp = document.querySelector('input')
var form = document.querySelector('form')
1. focus
inp.onfocus = function () { console.log('聚焦事件') }
2. blur
inp.onblur = function () { console.log('失焦事件') }
！！！focusin focusout 聚焦和失焦事件，但是可以做事件委托，向父容器冒泡(比focus和blur更好用)
3. change
inp.onchange = function () { console.log('内容发生变化了') }
4. input
inp.oninput = function () { console.log('内容修改了') }
5. reset
form.onreset = function () { console.log('表单重置了') }
6. submit
form.onsubmit = function () { console.log('表单提交了') }
补充:
e.inputType 输入的类型
e.isComposing 是否是输入法输入
e.data 当前输入的内容
5.按键事件
1.e.code: "ArrowLeft" 按下键的键名
2.key: "ArrowLeft" 按下键的键名
3.keyCode: 37 键码
4.which: 37 键码
5.repeat: false 是否重复按下
6.正则表达式的创建
正则表达式创建
修饰符
g 全局查找
i 不区分大小写
/正则表达式内容/修饰符
var reg=/a/g
var reg=new RegExp(正则表达式内容,修饰符)
var reg=new RegExp("a","g");
7.正则表达式针对字符串处理
正则方法
test(); 是否test中的字符满足正则表达式
exec(); 查找到满足的内容，并且返回这个内容对应的下标位置
字符串方法
match(); 高频使用方法 查找满足正则的字符内容，并且返回一个由满足内容组成的数组
search(); 在字符串中查找满足正则内容的字符，返回下标
replace();高频使用方法 替换方法
split(); 切割，使用正则切割
8.元字符
1. . 元字符 通配符，代表任意一个字符
console.log("abac".match(/a./)); //['ab', index: 0, input: 'abac', groups: undefined]
console.log("abac".match(/a./g)); //['ab', 'ac']
console.log("abcade".match(/a../g)) // ['abc', 'ade']
console.log("abcadcadd".match(/a.c/g)) //['abc', 'adc']
2. \. 转义 将通配符变为字符.
console.log("abca.cadd".match(/a\.c/g)) // ['a.c']
console.log("a\\b".match(/a\\/)[0]) // a\
3. [] 元字符 []内字符可以代表任何一个字符，或者的作用,可以在[]中选择任意一个字符
console.log("abcaccadc".match(/a.c/g)) //['abc', 'acc', 'adc']
console.log("abcaccadc".match(/a[bc]c/g)) //['abc', 'acc']
4. /[ab][cd]/g ac ad bc bd
在[]中. 不是通配符，而是字符.
console.log("aba.ad".match(/a[b.]/g)); //['ab', 'a.']
console.log("abca.cadd".match(/a[.]c/g)) //['a.c']
5. [^] 不要某个字符
/[1356790]/
/[^248]/ 如果^在[]里面的第一位，这个[]的内容取反 [1356790a-zA-Z.其他各种符号]
console.log("abcadcaec".match(/a[^d]c/g))
6. /[^\^]/ 匹配非^的所有字符
console.log("a^bacb".match(/a[^\^]b/g));
如果 ^不是在[]的第一位，则表示单一的^字符
[a^c] 满足a或者^或者c
var str="abacadae";
str=str.replace(/[bd]/g,"z");
str=str.replace(/[^cd]/g,"z");
str.replace(正则,function(被查找到元素,索引值,原字符串){
return 返回内容 替换被查找的元素
})
7. /[1-3]/ [123]
/[a-z]/ [abcdefghijklmnopqrstuvwxyz]
/[A-Z]/ [A....Z]
/[0-9]/ [0123456789]
/3[0-3]/ 30 31 32 33
/[1-31]/ [1-3 1] [123];
/[11122]/ [12]
\w [a-zA-Z0-9_]
\W [^a-zA-Z0-9_]
\d [0-9]
\D [^0-9]
\s 空格 空白字符
\S 非空格 非空白字符
