第十三章 事件

事件

1. 事件流

  • 事件冒泡
  • 事件捕获
  • DOM 事件流:事件捕获阶段、处于目标阶段、事件冒泡阶段

2. 事件处理程序

事件处理程序的名字以”on”开头

  • HTML 事件处理程序
    直接在 HTML 中
    1
    <input type="button" value="Click Me" onclick='alert("clicked")'>
  • DOM 0 级事件处理程序

    每个元素都有自己的事件处理程序属性,这些属性通常全部小写。将这种属性的值设置为一个函数,就可以指定事件处理程序

    1
    2
    3
    4
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    alert("Clicked");
    };
  • DOM 2 级事件处理程序

    1. addEventListener():添加事件处理程序
    2. removeEleventListener():移除事件处理程序
    3. 可以添加多个事件处理程序
      1
      2
      3
      4
      5
      6
      7
      var btn = document.getElementById("myBtn");
      btn.addEventListener("click", function(){
      alert(this.id);
      }, false);
      btn.removeEleventListener("click", function(){
      alert(this.id);
      }, false);

3. 事件对象

  • DOM 中的事件对象

    兼容 DOM 的浏览器都会将一个 event 对象传入到事件处理程序中,event 对象包含与创建它的特定事件有关的属性和方法。

4. 事件类型

  • UI 事件
    1. load:当页面完全加载后在 window 上面触发
    2. unload:当页面完全卸载后在 window 上面触发,只要用户从一个页面切换到另一个页面就会触发
    3. resize:当浏览器窗口大小被调整在 window 上触发
    4. scroll:页面滚动期间在 window 上触发
  • 焦点事件
    1. blur:在元素失去焦点时触发,事件不冒泡
    2. focus:在元素获得焦点时触发,事件不冒泡
    3. focusin:在元素获得焦点时触发,事件冒泡
    4. focusout:在元素失去焦点时触发,事件冒泡
  • 鼠标与滚轮事件
    1. click:鼠标左键打击按钮
    2. dbclick:鼠标左键双击按钮
    3. mousedown:按下鼠标任意按钮
    4. mouseenter:鼠标光标移入元素
    5. mouseleave:鼠标光标移出元素
    6. mousemove:鼠标光标在元素内移动
    7. mouseout:鼠标光标在重叠元素的移入
    8. mouseover:鼠标光标移入元素边界
    9. mouseup:释放鼠标按钮
  • 键盘与文本事件
    1. keydown:按下键盘的任意键
    2. keypress:按下键盘的字符键
    3. keyup:释放键盘的键
    4. textInput:在可编辑区域输入字符触发
  • 复合事件
  • 变动事件
  • HTML 5 事件
  • 设备事件
  • 触摸与手势事件

5. 内存和性能

  • 事件委托

    事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
    </ul>

    var list = document.getElementById("myLinks");

    function handler(list, "click", function(event){
    var target = event.target;
    switch(target.id){
    case "doSomething":
    document.title = "I changed the document's title";
    break;

    case "goSomewhere":
    location.href = "https://itroger.cn";
    break;

    case "sayHi":
    alert("hi");
    break;
    }
    });
  • 移除事件处理程序

6. 模拟事件

  • DOM 中的事件模拟
-------------本文结束 感谢您的阅读-------------
您的支持将鼓励我继续创作!