事件 | 易学教程

事件与事件流

事件介绍
JavaScript 和 HTML 之间的交互是通过当用户或者浏览器操作网页时发生的事件来处理的。页面装载时，是一个事件，用户点击页面上的某个按钮时，也是一个事件。
事件冒泡
即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。

事件监听器

HTML 事件监听器

<body>
   <button onclick="test()">点击我</button>
   <script>
       let test = function(){
           alert(" 你已经点击了");
       }
   </script>
</body>

DOM 0 级事件监听器

<body>
  <button id="test">点击我</button>
  <script>
      let test = document.getElementById("test");
      test.onclick = function(){
          console.log("this is a test");
      }
  </script>
</body>

DOM 2 级事件监听器
通过addEventListener()来实现，这个方法接收 3 个参数：事件名，事件处理函数，布尔值。

<body>
    <button id="test">点击我</button>
    <script>
        let test = document.getElementById("test");
        test.addEventListener("click",function(){
            console.log("this is a test");
        },false);
        test.addEventListener("click",function(){
            console.log("this is a test,too");
        },false);
    </script>
</body>

删除事件监听器
DOM 0 级事件

<body>
<body>
    <button id="test">点击我</button>
    <script>
        let test = document.getElementById("test");
        test.onclick = function(){
            console.log("this is a test");
        }
        test.onclick = null; // 删除事件绑定
    </script>
</body>
</body>

DOM 2 级事件

<body>
    <button id="test">点击我</button>
    <script>
        let test = document.getElementById("test");
        //DOM 2级添加事件
        let fn1 = function(){
            console.log("this is a test");
        }
        let fn2 = function(){
            console.log("this is a test,too");
        }
        test.addEventListener("click",fn1,false);
        test.addEventListener("click",fn2,false);
        test.removeEventListener("click",fn1); // 只删除第一个点击事件
    </script>
</body>
</body>

事件类型

鼠标事件

 click：用户单机主鼠标按钮（一般是左键）或者按下回车键时触发。
dblclick：用户双击鼠标按钮时触发。
mousedown：用户按下了任意鼠标按钮时触发。
mouseenter：进入元素时触发，但是再进入到子元素时不会再触发。
mouseleave：从某个元素出来时触发，但不包括子元素。
mousemove：当鼠标在元素范围内移动内，就会不停的重复地触发。
mouseout：从当前元素出来时触发，进出子元素也会触发。（因为进出子元素可以看作是从当前元素出来了）
mouseover：进入元素时触发，进出子元素时也会触发。（因为进出子元素可以看作是进入了新的元素）
mouseup：在用户释放鼠标按钮时触发。

键盘事件

keydown：按下键盘上任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：按下键盘上一个字符键（不包括 shift 和 alt 键）时触发。如果按住不放，也是会重复触发。
keyup：当用户释放键盘上的键时触发。

页面事件
1:页面加载
页面事件中最常用的一个事件就是load事件。这个事件一般绑定在 window 对象上面。页面完全加载后（包括所有图像，JavaScript 文件，CSS 外部资源），就会触发 window 上面的load事件。
2:页面卸载
与load事件对应的是unload事件，这个事件是在文档完全被卸载后触发。只要用户从一个页面切换到另一个页面，或者关闭浏览器，就会触发这个事件。
3:页面滚动
滚动页面时，对应的scroll滚动事件就会被触发。通过 body 元素的scrollLeft和scrollTop可以监控到这一变化。scrollLeft 会监控横向滚动条的变化，scrollTop 会监控垂直方向的滚动条变化。

事件对象

鼠标事件的事件对象

button属性
当我们按下鼠标时，会有一个button属性被填入到 event 对象里面。
button 属性有 3 个值：0 表示按下的是鼠标左键，1 表示按下的是鼠标中键，2 表示按下的是鼠标右键。
事件坐标
相对于浏览器器位置:

event.clientX：返回当事件被触发时鼠标指针相对于浏览器页面(或客户区)的水平坐标。(只包含文档的可见部分，不包含窗口本身的控件以及滚动条)
event.clientY：返回当事件被触发时⿏标指针相对于浏览器页面(客户区)的垂直坐标。(只包含文档的可见部分，不包含窗口本身的控件以及滚动条)
event.pageX：可以获取事件发生时光标相对于当前窗口的水平坐标信息(包含窗口自身的控件和滚动条)
event.pageY：可以获取事件发生时光标相对于当前窗口的垂直坐标信息(包含窗口自身的控件和滚动条)

相对于屏幕位置:

event.screenX：返回事件发生时鼠标指针相对于电脑屏幕左上角的水平坐标。
event.screenY：返回事件发生时鼠标指针相对于电脑屏幕左上角的垂直坐标。

相对于事件源位置:

event.offsetX：返回事件发生时鼠标指针相对于事件源的水平坐标 
event.offsetY：返回事件发生时鼠标指针相对于事件源的垂直坐标 
event.layerX：返回事件发生时鼠标指针相对于事件源的水平坐标(Firefox)
event.layerY：返回事件发生时鼠标指针相对于事件源的垂直坐标(Firefox)

键盘事件的事件对象
键盘事件也会有相关的属性被传入 event 对象，常见的属性有keyCode和key属性。
keyCode 属性会发生在keydown和keyup事件被触发时，每一个 keyCode 的值与键盘上一个特定的键对应。该属性的值与 ASCII 码中对应的编码相同。

来源：CSDN

作者：keep,moving

链接：https://blog.csdn.net/KeepMoving_ch/article/details/103468088

标签

test

滚动条

event

按钮