20200820丁浪

js事件快速一览

事件一句话概括为:事件源上的触发器触发事件,事件响应。

鼠标事件

事件源及事件绑定

<button onclick="fun01()">点击弹出一句话</button>

事件处理

function fun01(){
            alert("爸爸的爸爸是神马");
        }

小注

鼠标事件触发器包括

  1. onclick
  2. onmouseover
  3. onmouseout
  4. onmousedown
  5. onmouseup
  6. onmousemove

如果给一个事件源同时添加onmousedown\onmouseup\onclick触发器,则三者发生的顺序为

onmousedown -> onmouseup -> onclick

鼠标事件的事件源包括所有在页面中有尺寸的html元素。

鼠标事件的事件响应为js函数和window对象的函数(window.alert()...)。

键盘事件

事件源及事件绑定

<body onkeydown="fun01(event)"></body>

事件处理

function fun01(event){
            console.log(event.keyCode);
            // 键盘按下之后会在控制台输出被按键的键码
        }

小注

键盘事件的触发器一般只设置为html-body\html-form能获取到输入焦点的元素上(未经测试)

鼠标事件包括:

  1. onkeydown
  2. onkeyup
  3. onkeypress

当为一个元素同时添加onkeydown\onkeypress\onkeyup触发器时,事件处理程序发生的顺序为:

onkeydown -> onkeypress -> onkeyup

表单事件

事件源及事件绑定

    <form >
        <input type="button" value="按钮" onfocus="fun01()">
        <input type="text" placeholder="请输入..."  >
    </form>
    <input type="button" value="" onfocus="fun01()">

事件处理

        function fun01(){
            var a=document.getElementsByTagName("form");
            console.log(a);
            console.log(a[0]);
            a[0].style.backgroundColor="#f00";
        }

小注

表单事件包括:

  1. onfocus

    获取输入焦点时触发器触发,input-button被点击时触发器被触发

  2. onblur

    失去焦点时触发器触发

  3. onchange

    控件内容改变时触发,暂时只在文本输入框和文本域中发现被触发,(button的value属性修改时,不可被触发),并且当在文本输入框中修改内容时,当输入焦点离开并且内容改变时触发。

  4. onreset

    重置按钮点击时被触发,该触发器仅能加在form上,不可加在form-input上,当且仅当form内部的reset按钮被点击时,触发器被触发一旦点击便触发不会管内容是否发送改变

  5. onsubmit

    表单提交时发生,该触发器仅能加在form上,当提交按钮点击时发送。

  6. onselect

    当控件,该触发器一般被加在radio/checkbox上未测试通过!!!

触发器见每个事件后的小注。

窗口事件

[临时插入]关于javascript脚本执行的一个细节

注意下边这段代码,alert("yes??")会执行,javascript中,除了函数需要被显式的调用之外,其他的代码会执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body></body>
</html>
<script>
    alert("yes??");
</script>

事件源及事件绑定

    function test01(){
        alert("网页正在被加载");
    }

事件处理

    function test01(){
        alert("网页正在被加载");
    }

小注

窗口事件包括

  1. onload

    网页开始加载时

  2. onunload未测试

    网页被关闭时

触发器为body。

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1