JavaScript事件

最新推荐文章于 2024-06-10 17:00:16 发布

apesource-陈安

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量1.2k

点赞数 28

分类专栏： Java前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2302_78070106/article/details/136082492

版权

Java前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

事件

事件-表单

元素获得焦点

onfocus： onfocus 事件在对象获得焦点时发生。鼠标点击获取焦点是发生

onblur： onblur 事件发生在对象失去焦点时，比如说你有个文本框，你鼠标点击进去，只有在离开的时候才会执行onblur事件

let userCode = document.getElementById("userCode");
userCode.onfocus = function () {
    this.style.background = 'red'
}
userCode.onblur = function () {
	this.style.background = 'green'
}

内容改变事件

onchange：当元素的值发生改变时，会发生 onchange 事件。对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。

oninput： oninput 事件在用户输入时触发。该事件在或元素的值发生改变时触发。

    //当鼠标离开文本框时,当内容改变时
    userCode.onchange = function () {
        console.log(this.value)
    }
    //当文本框内容改变时 执行
    userCode.oninput = function () {
        console.log(this.value)
    }

不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于元素。

表单的提交事件

onsubmit：onsubmit 事件在表单提交时触发。

// 表单的提交事件
myForm.onsubmit = function () {
    if (userCode.value == null){
        return false; // 阻止表单提交
    }
    return true; // 提交表单
}

当文本框内容被选中时

onselect：onselect 事件发生在元素中的文本被选中之后。

onselect 事件主要用于或元素。

    userCode.onselect = function () {
        console.log("已经选择了文本框内容")
    }

事件-窗口

窗口焦点变化

onblur：事件发生在对象失去焦点时。

onfocus：事件发生在对象获得焦点时。

onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此，如果您想找出元素或其子元素是否失去焦点，可以使用 onfocusout 事件。但是，您可以通过使用 onblur 事件的 addEventListener() 方法的 useCapture 参数（可选）来实现这一点。

    window.onblur = function (){
        console.log("窗口失去焦点")
    }
    window.onfocus = function () {
        console.log("窗口获得焦点")
    }

窗口加载完成

onload： onload 事件在对象被加载后发生。

    window.onload = function () {
        console.log("窗口加载完成")
    }

窗口大小改变时间

onresize：onresize 事件发生在窗口大小发生改变时

    window.onresize = function () {
        console.log("窗口的大小发生改变")
    }

事件-键盘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="text"/>
<script>
    let text = document.getElementById("text");
    
</script>
</body>
</html>

键盘按下事件

onkeydown：onkeydown 事件会在用户按下一个键盘按键时发生。

    text.onkeydown =function (event) {
        // console.log(event.code);
        console.log(event.key);
        // console.log(event.keyCode);
    }

键盘松开事件

onkeyup: onkeyup 事件会在用户松开键盘时发生。

    text.onkeyup =function (event) {
        // console.log(event.code);
        console.log(event.key);
        // console.log(event.keyCode);
    }

键盘按下并送开事件

onkeypress：onkeypress 事件会在键盘按键被按下并释放一个键时发生

    text.onkeypress =function (event) {
        // console.log(event.code);
        console.log(event.key);
        // console.log(event.keyCode);
    }

他们三者的触发顺序是

onkeydown
onkeypress
onkeyup

事件-鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box" style="color: white;overflow: auto;width: 200px;height: 200px;background-color: black;">
    <div id="box2" style="width: 100px;height: 100px;background-color: pink;">

    </div>
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>
<script type="text/javascript">
    let box = document.getElementById("box");
    let box2 = document.getElementById("box2");

</script>
</body>
</html>

鼠标点击事件

onclick ：onclick 事件在用户单击元素时发生。

    box.onclick = function () {
        console.log("用户单击了容器");
    }

ondblclick：ondblclick 事件在用户双击元素时发生。

    box.ondblclick = function () {
        console.log("用户双击了容器");
    }

鼠标移动事件

onmousemove：onmousemove 鼠标在容器中移动时触发

    box.onmousemove = function () {
        console.log("鼠标的指针移动时")
    }

onmouseover：onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时

    box.onmouseover = function () {
        console.log("鼠标的指针移动到了容器中A")
    }
    box2.onmouseover = function () {
        console.log("鼠标的指针移动到了容器中B")
    }

apesource-陈安

关注

28
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件

不同之处在于 oninput 事件在元素值改变后立即发生，而 onchange 在元素失去焦点而内容发生改变后发生。onchange：当元素的值发生改变时，会发生 onchange 事件。对于单选框和复选框，在被选择的状态改变时，发生 onchange 事件。事件发生在对象失去焦点时，比如说你有个文本框，你鼠标点击进去，只有在离开的时候才会执行onblur事件。该事件在或元素的值发生改变时触发。onblur：事件发生在对象失去焦点时。事件在用户双击元素时发生。事件在用户单击元素时发生。
复制链接

扫一扫

专栏目录