这里写目录标题

mouseEvent事件

mouseEvent

事件

click

点击 //PointerEvent 继承MouseEvent

dblclick

双击

mousedown

鼠标按下键

mouseup

鼠标释放键

mouseover

鼠标滑过 子元素会收到事件并且向上冒泡

mouseout

鼠标滑出 子元素会收到事件并且向上冒泡

mouseenter

鼠标进入 子元素不会收到事件也不会冒泡

mouseleave

鼠标离开 子元素不会收到事件也不会冒泡

mousemove

鼠标移动

contextmenu

右键菜单

.div1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    top: 3000px;
}
.div2{
    width: 50px;
    height: 50px;
    background-color: yellow;
    margin: 50px;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* left: 25px;
    top: 25px; */
}
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <script>
        var div1=document.querySelector(".div1");
        div1.addEventListener("click",clickHandler);

        function clickHandler(e){
            // e.type
            console.log(e.type);//事件类型
            console.log(e)
    </script>

知识卡片

  • ​​cancelBubble: false​​​ 取消冒泡，设置为​​true​​取消冒泡 兼容写法
  • ​​currentTarget​​​ 事件监听的对象 等同于​​this​​
  • ​​target srcElement​​ 事件触发的目标对象

关于mouse位置的几个坐标描述

方法

描述

clientX: 63clientY: 60：

相对视口距离 视口就是当前可视窗口左上角

x: 63 y: 60

相对视口距离 视口就是当前可视窗口左上角

layerX: 30

如果目标元素没有定位时，这个是相对父级的定位元素的左上角距离

layerY: 27

如果目标元素定位时，相对目标元素的左上角距离

offsetX: 30offsetY: 28

相对e.target 目标元素的左上角距离

movementX，movementY

鼠标相对上次移动的距离 向上和左都是负数，右和下都是正数

pageX，pageY

鼠标相对页面的左上角距离

screenX，screenY

鼠标相对屏幕左上角距离

focus聚焦事件

表单元素和超链接 可以接受聚焦事件
form不接受input的focus冒泡事件,也就是说点击哪个就是那个

<form action="#">
    <input type="text">
    <input type="password">
</form>
<script>
    var input=document.querySelector("input");
    var pass=document.querySelector("[type=password]");
    var form=document.querySelector("form");
    
    input.addEventListener("focus",focusHandler);
    pass.addEventListener("focus",focusHandler);
    
    function focusHandler(e){
        console.log(e)
        // e.relatedTarget  上一次聚焦的对象
    }
</script>

blur 失焦事件,也没有冒泡发生

<form action="#">
    <input type="text">
    <input type="password">
</form>
<script>
    var input=document.querySelector("input");
    var pass=document.querySelector("[type=password]");
    var form=document.querySelector("form");
    
     pass.addEventListener("blur",focusHandler)
     input.addEventListener("blur",focusHandler)
     
    function focusHandler(e){
        console.log(e)
        // e.relatedTarget  上一次聚焦的对象
    }
</script>

focusin focusout 表单的聚焦事件，一般支持冒泡

<form action="#">
    <input type="text">
    <input type="password">
</form>

<script>
    var input=document.querySelector("input");
    var pass=document.querySelector("[type=password]");
    var form=document.querySelector("form");
    
    form.addEventListener("focusin",focusHandler);
    form.addEventListener("focusout",focusHandler);
    
    function focusHandler(e){
        console.log(e)
       // e.relatedTarget  上一次聚焦的对象
    }
</script>

input事件

方法

描述

e.data: “s”

当前输入的内容

e.inputType:“insertCompositionText”

输入类型

e.isComposing:true

是否开启了输入法

节流(thorttle):

高频事件触发
每次触发事件时设置一个延迟调用方法
并且取消之前的延时调用方法。
概述:每次触发事件时都会判断是否等待执行的延时函数。

<form action="#">
    <input type="text">
    <input type="password">
</form>

<script>
    var ids; //开关
    var input=document.querySelector("input");
    input.addEventListener("input",inputHandler);

    // 节流
    // 每次高频触发事件时，设置一个延迟执行，在这段时间内部继续触发，
    // 直到上次的延迟执行完成后，再次触发
    function inputHandler(e){
        // ids默认是undefined，进入后转换为布尔值不为真，所以不跳出
        if(ids) return;
        // setTimeout会返回一个非0的数值，这个数值是针对这次setTimeout的堆中的回调函数索引
        // 通过clearTimeout删除这个索引所对应的函数
        
        ids=setTimeout(function(){
        // 根据索引删除setTimeout对应的回调函数
            clearTimeout(ids);
            // 将ids变量重新设置为undefined，这样就可以再次进入这个input事件了
            ids=undefined;
            // 打印input的结果
            console.log(input.value);
        },500)
    }
</script>

mouseWheel(滚轮事件)

<script>
document.addEventListener("DOMMouseScroll",mousewheelHandler);//火狐浏览器
document.addEventListener("mousewheel",mousewheelHandler);//谷歌浏览器
function mousewheelHandler(e){
    // console.log(e)
    /*统一向上是1，向下是-1*/
    var detail;
    if(e.deltaY){
        detail=e.deltaY/Math.abs(e.deltaY);
    }else{
        detail=e.detail/Math.abs(e.detail);
    }
    console.log(detail)
    /* 

    mousewheel
    向上
    deltaX: -0
    deltaY: 2
    deltaZ: 0
    detail: 0
    wheelDelta: -6
    wheelDeltaX: 0
    wheelDeltaY: -6
    

    DOMMouseScroll
    向上
    detail: 1
     
     */
 }
</script>