事件(下）_方块等于事件源-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54581080/article/details/118567985

事件对象

event || window.event 用于IE

事件源对象

event.target 火狐只有这个

event.srcElement IE只有这个

这两个chrome都有

封装事件源对象

  ele.onclick = function(e){
      var event = e ||window.event;
      var target = event.target ||event.srcELement;
      console.log(target);
  }

事件源对象有什么用处？

事件委托

利用事件冒泡，和事件源对象进行处理

不需要循环所有的元素一个个绑定事件

当有新的子元素时不需要重新绑定事件

例：c

 //一个ul下10个li,每个li都有序号，绑定事件，使点击哪个li就出现相应的数字
 <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
//看到这种第一时间都会想到for循环，但是如果ul下面有无数多个li的话，for循环效率就太低了


<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(e) {
var event = e || window.event; //事件对象兼容
var target = event.target ||event.srcElement;//拿出来事件源对象
console.log(target.innerText);//打印出事件源对象
}
//这个方法运用了点击任何一个li，都会冒泡给ul,ul的事件源对象又是这个li
</script>

事件分类

鼠标事件

click 鼠标点击 = mousedown鼠标按下去之后 + mouseup鼠标抬起来之后

mousemove 当鼠标移动时

contextmenu右键取消菜单

mouseover/mouseenter 鼠标进入这个区域

mouseout/mouseleave鼠标出这个区域

练习1：写一个跳转按钮，点击跳转，拖住移动不跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color:red;left: 0;
top: 0;position: absolute;"><a href="https://www.baidu.com">我是小方块</a></div>
    <script>
          var div = document.getElementsByTagName('div')[0];
    var first = 0,
        last = 0,
        disX = 0,
        disY = 0,
        key = false;
    div.onmousedown = function(e){   //div可以换成document
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        first = new Date().getTime(); //建立时间戳
        div.onmousemove = function(e){ //div可以换成document
            div.style.left = e.pageX - disX +"px";
            div.style.top = e.pageY - disY +"px";
                }
    }
    div.onmouseup = function(){  //div可以换成document
        div.onmousemove = null;
        last = new Date().getTime();
        if(last - first < 300){
            key = true;
        }
    }
    div.onclick = function(){
        if(key){
            console.log('click');
        }
    }
//用div拖拽有个小毛病，鼠标的速度一旦快了，方块跟不上，用document的话，
跟上是能跟上了，但是点全局的任何地方都能拖拽小方块，看怎么应用了
    </script>
</body>
</html>

练习2：随机移动的方块，鼠标碰到就随机移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100px;height: 100px;background-color: red;
    left:500px;top:500px;position: absolute;"></div>
    
    <script>
var div = document.getElementsByTagName('div')[0];
        div.onmousemove = function(){
            div.style.left =  parseInt(div.style.left) + (Math.random() - 0.5) * 100 + 'px';
            div.style.top =  parseInt(div.style.left) + (Math.random() - 0.5) * 100 + 'px';
        }
//我写的实在是太lol了，就会这么个法
    </script>
</body>
</html>

用button来区分鼠标的按键，0/1/2

DOM3标准规定：click事件只能监听左键，只能通过mousedown和

mouseup来判断鼠标键

键盘事件

keydown 能检测到所有键 fn辅助键除外，但是字符不准

keyup

keypress只能监测到字符类，对应ASCII码

先keydown>keypress>keyup

文本操作事件

文本操作事件

input,focus,blur,change

窗口操作（window）太多了下篇见！