JavaScript事件

事件

事件的组成

事件源、事件类型、事件处理函数

事件的源头：事件源 （给谁添加事件，谁触发这个事件）

事件所触发的事件类型：事件类型 （onclick、onmouseover）

触发后做什么：事件处理函数 （事件触发所绑定的函数）

绑定事件

第一种方式 会将之前的事件覆盖掉

element.onclick = function(){
    console.log(1)
}
element.onclick = function(){
    console.log(2)
}

第二种方式 两个事件都会触发

element.addEventListener("click",function(){
    console.log(1)
})
element.addEventListener("click",function(){
    console.log(2)
})

解绑事件

第一种解绑方式

element.addEventListener("click",function(){
    console.log(2)
    //点击后执行完代码后将事件解绑
    element.onclick=null
})

第二种解绑方式

function logText(){
    console.log(2)
}
element.addEventListener("click",logText)
element.removeEventListener("click",logText)    //logText为函数名

鼠标划入、划出

onmouseover、onmouseout作用到整个盒子，

mouseenter、mouseleave作用到仅仅这个元素身上，

按键事件

onkeydown 按键按下事件

onkeyup 按键抬起事件

element.onkeydown = function(){
    console.log("按键按下")
}
element.onkeyup = function(){
    console.log("按键抬起")
}

焦点事件

常用在表单验证上

onfocus 获取焦点

onblur 失去焦点

element.onfocus = function(){
    console.log("获取焦点")
}
element.onblur = function(){
    console.log("失去焦点")
}

修改事件

onchange 改变时触发 获取焦点时的内容 和 失去焦点时的内容进行判断 发生改变则触发

oninput 修改时实时触发

element.onchange = function(){
    console.log("改变触发")
}
element.oninput = function(){
    console.log("改变实时触发 ")
}

手机端触摸事件

ontouchstart 触摸开始

ontouchmove 触摸移动

ontouchend 触摸结束

element.ontouchstart = function(){
    console.log("触摸开始")
}
element.ontouchmove = function(){
    console.log("触摸移动")
}
element.ontouchend = function(){
    console.log("触摸结束")
}

鼠标坐标

clientX、clientY 鼠标的位置到浏览器页面视口顶端

pageX、pageY 文档/页面 流中鼠标坐标

offsetX、offsetY 相对于盒子元素本身左上角为0点

<style>
    body {
        margin: 0;
        padding: 0;
    }
    body>div {
        width: 250px;
        position: relative;
    }
    div>div {
        width: 400px;
        height: 300px;
        background-color: rgba(0, 0, 0, .3);
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        /* 禁用该元素鼠标事件 */
        pointer-events: none;
    }
</style>
<div class="box">
    <img width="100%" src="./img/mhl.jpg" alt="">
    <div class="info">
        <p>简介</p>
        <p>字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字    </p>
    </div>
</div>
<script>
    var box = document.querySelector(".box");
    var info = document.querySelector(".info");
    box.onmouseover = function () {
        // console.log(event.offsetX, event.offsetY);
        info.style.display = "block";
    }
    box.onmouseout = function () {
        // console.log(event.offsetX, event.offsetY);
        info.style.display = "none";
    }
    box.onmousemove = function (event) {
        info.style.top = event.offsetY + "px"
        info.style.left = event.offsetX + "px"
    }
</script>

事件三个阶段

事件捕获阶段：从外向内

element.addEventListener("click",function(){
    console.log("outer捕获")
},true)

事件目标阶段：最开始选择的那个

事件冒泡阶段：从里向外

阻止事件传播

event.stopPropagation()

低版本ie取消冒泡兼容

event.cancelBubble = true

正则表达式

var reg = /\b\b/     \b从开始到结束\b
var reg = /\b[a-zA-Z0-9]{6，8}\b/    //数字、大小写字母 最少6位 最长8位
var reg = /[\u4e00-\u9fa5]{6，8}/    //汉字 最少6位 最长8位
var str = pwd.value;
console.log(reg.text(str))  //返回布尔值 判断密码正确或失败