JS API事件汇总与使用

最新推荐文章于 2024-07-12 16:27:40 发布

菜白CAIbai

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量117

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/alexei9/article/details/130351249

版权

点击事件：onclick

单机位置的横纵坐标，相对于页面，原点是页面的左上角

event.pageX event.pageY

鼠标移入：onmouseover ：事件在鼠标移动到div触发，在子元素时也触发

鼠标移出：onmouseout ：事件在鼠标移动到div触发

鼠标进入：onmouseenter ：同上，不支持冒泡

鼠标离开：onmouseleave : 不支持冒泡

鼠标移动：onmousemove ：鼠标移动

获取焦点：onfocuse ：一般用于输入框

失去焦点：onblur ：一般用于输入框失去焦点获取内容

示例：

<body>
    <input type="text"  value="">
    <p></p>
</body>
<script>
    let inp = document.querySelector("input")
    let p = document.getElementsByTagName("p")[0]
    let textValue = null
    inp.onfocus = function () {
        // let textValue = inp.value;
        inp.value = ''
    }
    inp.onblur = function() {
        let textValue = inp.value;
        p.innerText = textValue;
    }
</script>

绑定监听事件：两个参数：事件类型，事件处理程序

   var p1 = document.getElementById(“p1”)

        P1.addEventListener(“mouser”,fn1)

          Function fn1(){
}

监听事件移出：removeEventListener

阻止事件的发生：stopPropagation

键盘事件：键盘按下：onkeydown 键盘抬起：onkeyup

滚动条事件：onscroll ：只要滚动条滚动即触发。

菜白CAIbai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS API事件汇总与使用

鼠标移入：onmouseover ：事件在鼠标移动到div触发，在子元素时也触发。键盘事件：键盘按下：onkeydown 键盘抬起：onkeyup。鼠标移出：onmouseout ：事件在鼠标移动到div触发。失去焦点：onblur ：一般用于输入框失去焦点获取内容。绑定监听事件：两个参数：事件类型，事件处理程序。滚动条事件：onscroll ：只要滚动条滚动即触发。鼠标进入：onmouseenter ：同上，不支持冒泡。鼠标移动：onmousemove ：鼠标移动。
复制链接

扫一扫