JavaScript中事件详解

最新推荐文章于 2024-05-21 14:15:14 发布

l1050188952

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量248

点赞数 1

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/l1050188952/article/details/126711893

版权

事件：在浏览器中触发特定任务时的行为。

定义触发方式：

1.静态：html标签的事件属性赋予事件响应代码

//onclick：单击事件
<input type="button"  onclick="hello()"/>

<script>
    function hello() {

    alert("hello 单击事件!");

    }
</script>

2.动态获取：使用js 代码得到标签的 DOM对象，然后通过DOM对象.事件名=function（）{执行代码}

<body>
<div id="divA" style="width:500px;height:500px;background-color: aqua"></div>
<script>
   var divv= document.getElementById("divA");
   divv.onclick = function(){
        alert('单击事件触发')
}
</script>
</body>

1.鼠标事件

单击事件：onclick

双击事件：ondblclick

<script>
    window.onclick = function () {
        console.log("鼠标单击事件");
    }

    window.ondblclick = function () {
        console.log("鼠标双击事件");
    }
</script>

鼠标按下按钮时事件

<script>
    window.onmousedown = function () {
        console.log("当鼠标按钮按下运行时");
    }
</script>

鼠标松开按钮时事件

<script>
    window.onmouseup = function () {
        console.log("当鼠标按钮松开时");
    }
</script>

当鼠标移入（onmouseover）---移出（onmouseout）时不能阻止冒泡

<body>

<div 
     //鼠标移入时
     onmouseover="divMouseover()"
    //鼠标移出时
     onmouseout="divMouseout()"
     style="width: 300px;height: 300px;background: red">
        <div onmouseover="divMouseover()"
         onmouseout="divMouseout()"
         style="width: 100px;height: 100px;background: pink">
        </div>
</div>

    <script>
     /* onmouseover 当鼠标移入时  不能阻止冒泡  */
        function divMouseover() {
        console.log("当鼠标进入了当前的DIV");
        }

        /* onmouseout : 当鼠标移出时  不能阻止冒泡*/
        function divMouseout() {
            console.log("当鼠标移出了当前的DIV");
        }
    </script>
</body>

当鼠标移入（onmouseenter）---移出（onmouseleave）时能阻止冒泡

<div onmouseenter="divMouseenter()"
     onmouseleave="divMouseleave()"
     style="width: 300px;height: 300px;background: red">
    <div onmouseenter="divMouseenter()"
         onmouseleave="divMouseleave()"
         style="width: 100px;height: 100px;background: pink">
    </div>
</div>
<script>
    /* onmouseenter ： 可以阻止事件冒泡 */
    function divMouseenter() {
        console.log("当鼠标进入了当前的DIV");
    }
     // onmouseleave ： 可以阻止事件冒泡
    function divMouseleave() {
        console.log("当鼠标移出了当前的DIV");
    }

</script>


</body>

当滚动元素的滚动条滚动时---鼠标滚轮滚动时

<body>
<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
    这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>

<script>
    document.getElementById("box").onscroll = function () {
        console.log("当滚动元素的滚动条运行时");
    }
    /* 当鼠标的滚轮运行时 */
    window.onmousewheel=function (){
        console.log("当鼠标的滚轮运行时");
    }

</script>


</body>

2.键盘事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .divStyle {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" class="divStyle">

</div>

<script>
       /*  键盘按下事件 */
       window.onkeydown = function (event) {
           /* 解决兼容问题 */
           event = event || window.event;
           console.log("键盘按下了" + event.keyCode);
           if (event.keyCode == 13) {
               console.log('按下了回车');
           }
       }

    /* onkeyup： 当松开按键时 触发 */
    window.onkeyup = function (event) {

        event = event || window.event;

        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

    /* 键盘 按下并松开时*/
    window.onkeypress = function (event) {
        event = event || window.event;
        console.log("键盘按下了" + event.keyCode);
        if (event.keyCode == 13) {
            console.log('按下了回车');
        }
    }

    var box = document.getElementById("box");
    document.onkeydown = function (event) {
        event  = event ||window.event;

        switch (event.keyCode) {
            case 37:
                box.style.left = box.offsetLeft - 10+'px';
                break;
            case 39:
                box.style.left = box.offsetLeft + 10+'px';
                break;
            case 38:
                box.style.top = box.offsetTop - 10+'px';
                break;
            case 40:
                box.style.top = box.offsetTop + 10+'px';
                break;
        }
    }
</script>

</body>

3.窗口事件

1.失去焦点事件： onblur

<script>
    window.onblur = function (){
        // alert('患失');
        console.log('患失');
    }
</script>

2.得到焦点事件：onfocus

<script>
    window.onfocus = function (){
        // alert('患得');
        console.log('患得');
    }
</script>

3.加载完成事件：onload

<script>
    window.onload = function () {
        alert('完活，下班');
    }
</script>

4.窗口大小改变事件：onresize

<script>
    window.onresize = function () {
        alert('看我七十二变变大小');
    }
</script>

4.文本框使用事件

定义使用的标签

<body>
<form action="内置对象.html" id="form" method="get">
    <label>账号：</label><input type="text" id="userName" value="这个是默认值" /><br/><br/>
    <label>密码：</label><input type="password" id="pwd"/><br/><br/>
    <input type="submit">
    <input type="button" value="自定义的重置" id="butA">
    <input type="reset">
</form>
</body>

1.失去、获得焦点事件

  <script>
    //获得焦点时文本框变色
    userName.onfocus = function () {
        this.style.backgroundColor = 'red';
    }
    //失去焦点时，文本框变色
    userName.onblur = function () {
        this.style.backgroundColor = 'pink';
    }
  <script>

2.内容改变事件

<script>
    //内容改变事件(删减没有改变不触发)    onchange
    userName.onchange = function () {
        // alert(userName.value);
        console.log(userName.value);
    }
    //只要文本框发生变化就会触发 oninput
    userName.oninput = function () {
        console.log(userName.value)
    }
</script>

3.表单未提交事件、文本被选中事件

<script>
    //表单未能提交时触发  oninvalid
    userName.oninvalid = function () {
        console.log('请完成表单');
    }
    //文本被选中时    onselect
    userName.onselect = function () {
        console.log('选我干啥')
    }
</script>

5.表单事件

获取表单的Dom对象

<script>
    var form = document.getElementById('form');
</script>

表单提交事件

<script>
        form.onsubmit = function () {
        var uName = document.getElementById("userName").value;
        var apwd = document.getElementById("pwd").value;
        //正则表达式判断
        var reg = /^[A-Za-z0-9]{6,12}$/;
        console.log("触发了表单的提交事件！");
        if (uName == '') {
            alert("账号不能为空");
        } else if (uName.length < 6 || uName.length > 12) {
            alert("账号长度错误");
        } else if (!reg.test(uName)) {
            alert("账号只能为字母与数字!");
        } else if (apwd == '') {
            alert("密码不能为空");
        } else if (apwd.length < 6 || apwd.length > 12) {
            alert("密码长度错误");
        } else if (!reg.test(apwd)) {
            alert("密码只能为字母与数字!");
        } else {
            return true;
        }
        // return true:可以提交  false 不能提交
        return false;
    }
</script>

表单重置事件： form.reset();

以上就是JavaScript的事件总结，根据自己的业务情况响应补充代码就可

l1050188952

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中事件详解

2.动态获取：使用js 代码得到标签的 DOM对象，然后通过DOM对象.事件名=function（）{执行代码}当鼠标移入（onmouseover）---移出（onmouseout）时不能阻止冒泡。当鼠标移入（onmouseenter）---移出（onmouseleave）时能阻止冒泡。当滚动元素的滚动条滚动时---鼠标滚轮滚动时。1.失去焦点事件： onblur。3.表单未提交事件、文本被选中事件。1.静态：html标签的事件属性赋予事件响应代码。事件：在浏览器中触发特定任务时的行为。
复制链接

扫一扫