38 事件

1.1  键盘事件及对象

  • onkeydown:只要按下任意键,就会触发一次

  • onkeypress:生成一个字符时触发,最常用

  • //键盘事件对象 document.onkeypress = function(evt){ // console.log(evt); //录入的字符 console.log(evt.key); //录入的ASC码值 var keyAsc = evt.keyCode || evt.which || evt.charCode; // console.log(evt.keyCode); // console.log(evt.which); // console.log(evt.charCode); // 65 97 13 32 48 10 // A a 回车 空格 0 ctrl+回车 console.log(keyAsc); if(keyAsc == 10){ console.log("发送"); } //ctrlKey:判断ctrl是否被按下 console.log(evt.ctrlKey); }

1.2  事件的绑定方式

  • 1.通过HTML元素绑定

    • <button οnclick="f1()">点击1</button>

  • 2.通过JS对象绑定

    • <button id="btn">点击2</button><br> var oBtn = document.querySelector("#btn");

  • 以上绑定的缺陷:

    • 1.无法为相同的元素绑定相同的事件

    • 2.无法决定事件流是捕获还是冒泡

    • 解决方案

      • 3.事件的监听

        • 优点

          • 1.可以为相同的元素绑定相同的事件

          • 可以决定事件流是捕获还是冒泡

        • 事件元素

          • addEventListener("去掉on的事件名",回调函数,是否捕获true | 默认false)

          • 先捕获后冒泡

1.3  事件的解绑

  • 1.js对象的解绑

    • var oBtns = document.querySelectorAll("button"); oBtns[0].onclick = function(){ alert(111); } oBtns[1].onclick = function(){ oBtns[0].onclick = null; }

  • 2.事件监听的解绑

    • removeEventListener("去掉on的事件","同一个回调函数");

1.4  事件的委托

  • 委托:你的事情让别人干

  • 事件的委托:子元素被触发后,事件体由父元素去执行--》依赖于冒泡机制

  • 好处1:可以将批量绑定的子元素事件,委托到父元素的事件,从而提高程序的执行效率

  • 好处2:可以为未来添加子元素,提前绑定事件

1.5  拖拽

  • onmousedown

    • box

  • onmousemove

    • document

  • onmouseup

    • document

上一篇:C++ | Leetcode C++题解之第49题字母异位词分组-题解:


下一篇:Linux系统命令-目录命令