js中的事件

柔情只为你懂 2024-04-18 19:09 62阅读 0赞

# 1.鼠标事件 #

①onclick:点击  
②dblclick;双击  
③mouseover;鼠标进入  
④mouseout;鼠标移出  
⑤mousedown;移动到元素上方，并按下鼠标键。  
⑥mouseup；在元素上方松开鼠标  
⑦mousemove,鼠标移动(以下示例7)

# 2.其他事件 #

①onload；加载  
②onchange;改变（示例2）

③resize;窗口尺寸改变（示例3）

# 3.焦点事件 #

①focus;获取焦点  
②onblur;失去焦点（校验表单内容）

<body>
          <label for="">用户名<input type="text" name="" id="inp1"></label>
          <span>*请输入有效的用户名</span><br>
          <label for="">密码<input type="password" name=""id="inp2"></label>
          <span class="spp">*请输入有效的密码</span>
    </body>
    
    <script>
          var inp1 = document.querySelector('#inp1');
          var inp2 = document.querySelector('#inp2');
          var sp = document.querySelector('span');
          var sp1 = document.querySelector('.spp');
    
           inp1.onblur = function () {
           if (inp1.value.length != 7) {
                   sp.style.display = 'inline-block';
                   this.focus();
           }else{
                  sp.style.display = 'none';
         }
       }
         inp2.onblur = function () {
              if (inp2.value.length !=8) {
              sp1.style.display = 'inline-block';
              this.focus();
         }else{
              sp1.style.display = 'none';}
        }
    </script>

# 4.键盘事件 #

①keydown按下

<body>
        <div class="one"></div>
        <script>
            var one = document.querySelector('.one');
            document.onkeydown = function (e) {
                e = e || window.event;
                console.log(e.keyCode);
                switch (e.keyCode) {
                    case 37:
                    moveH(-20);
                    break;
                    case 38:
                    moveV(-20);
                    break;
                    case 39:
                    moveH(20);
                    break;
                    case 40:
                    moveV(20);
                    break;
                }
                switch (e.keyCode) {
                    case 65:
                    moveH(-20);
                    break;
                    case 87:
                    moveV(-20);
                    break;
                    case 68:
                    moveH(20);
                    break;
                    case 83:
                    moveV(20);
                    break;
                }
            }
            //水平移动
            function moveH(speed) {
                var oleft = one.offsetLeft;
                // oleft = parseFloat(oleft);
                one.style.left = oleft + speed + 'px';
            }
            //垂直移动
            function moveV(speed) {
                var otop = window.getComputedStyle(one, null).top;
                otop = parseFloat(otop);
                one.style.top = otop + speed + 'px';
            }
        </script>
    </body>

②keyup抬起  
③keypress按下

## 事件对象： ##

**兼容性写法：e=e||window.event;**

**拦截默认行为：① return false//消费事件。  
② e=e||window.event；  
e.preventDefault();//拦截默认行为。**

**事件流的传递机制：  
①冒泡：事件有具体对象，层层向外传递，是主流浏览器的机制，bubbles:true;  
②捕获：由最外层触发，层层向内传递。**

**阻止事件冒泡的兼容性写法：  
e?e.stopPoropagation():window.event.canceBubble=true;**