第9章 JavaScript事件处理

带着问题去看书学习啦~

HTML5＋CSS3＋JavaScript Web 前端开发案例教程（慕课版）【不推荐】，微信读书中找到的学习Web前端书籍，第9章开始啦，耶(＾－＾)V

习题

9-1 调用事件的方法有几种？

• 1. 事件处理程序在JavaScript中的调用

<input id="save" name="bt_save" type="button" value="保存">
<script language="javascript">
var b_save=document.getElementById("save");
b_save.onclick=function(){
  alert("单击了保存按钮");
}
</script>

由于html代码是按照顺序执行的，所以像input表单定义这里，一定要放在js代码前面，这样才能操作到对象，否则会报空。当然也是有方式让js代码在最后执行的，先把页面渲染出来再执行js代码，这点后续再说。

注意：在JavaScript中指定事件处理程序时，事件名称必须小写，才能正确响应事件。

• 2.事件处理程序在HTML中的调用

在HTML中调用事件处理程序，只需要在HTML标签中添加相应的事件，并在其中指定要执行的代码或是函数名即可。

<input name="bt_save" type="button" value="保存" onclick="alert(’单击了保存按钮’);">

or

<input name="bt_save" type="button" value="保存"onclick="clickFunction();"><script>
  function clickFunction(){
    alert("单击了保存按钮");
  }
</script>

9-2 JavaScript中常见的事件有哪几类？

click、submit、mouseover 等

9-3 主流浏览器支持DOM标准的事件处理模型有哪几种？

• 1. 冒泡型事件（Bubbling）：从DOM树型结构上理解，就是事件由子节点沿父节点一直向上传递直到根节点；从浏览器界面视图HTML 元素排列层次上理解就是，事件由具有从属关系的最确定的目标元素一直传递到最不确定的目标元素。
• 2. 捕获型事件（Capturing）：与冒泡型事件刚好相反，是由DOM树最顶层元素一直传递到最精确的元素。

注意：目前除IE外，其他主流浏览器如Firefox、Opera、Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型，即冒泡型。

9-4 常用的鼠标事件有哪些？

• 1. onclick事件：鼠标单击时被触发的事件。
• 2. onmousedown事件：鼠标的按下事件。
• 3. onmouseup事件：鼠标松开事件。
• 4. onmouseover事件：鼠标移入事件。
• 5. onmouseout事件：鼠标移出事件。
• 6. onmousemove事件：鼠标移动事件。

9-5 如何移除事件监听器

• IE：

element.attachEvent ('onclick', observer); // 注册事件监听器

element.detachEvent('onclick', observer); // 移除事件监听器

• DOM标准：

// 第一个参数是事件名称，第二个参数 observer 是回调处理函数，第三个参数注明该回调处理函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用，默认true为捕获阶段
element.addEventListener('click', observer, useCapture); // 注册事件监听器（既支持注册冒泡型事件，又支持捕获型事件。）

element.removeEventListener('click', observer, useCapture); // 移除事件监听器

• 直接在DOM节点上加事件

  • 取消浏览器的事件传递

    取消事件传递是指，停止捕获型事件或冒泡型事件的进一步传递。例如在冒泡型事件传递中，body 停止事件传递后，位于上层的document的事件监听器就不再收到通知，不再被处理。

    IE：通过设置event对象的cancelBubble为true即可

      function someHandle() {
        window.event.cancelBubble = true;
      }
    

    DOM标准的浏览器：通过调用event对象的stopPropagation（）即可

    function someHandle(event) {
      event.stopPropagation();
    }
    

    因此，跨浏览器的停止事件传递的方法是：

    function someHandle(event) {
      event = event || window.event;
      if(event.stopPropagation)
        event.stopPropagation();
      else 
        event.cancelBubble = true;
    }
    

  • 取消事件传递后的默认处理

    事件传递后的默认处理是指，通常浏览器在事件传递并处理完后会执行与该事件关联的默认动作（如果存在这样的动作）。

    IE：通过设置event对象的returnValue为false即可

    function someHandle() {
      window.event.returnValue = false;
    }
    

    DOM标准的浏览器：通过调用event对象的preventDefault（）即可

    function someHandle(event) {
      event.preventDefault();
    }
    

    因此，跨浏览器的取消事件传递后的默认处理方法如下：

    function someHandle(event) {
      event = event || window.event;
      if(event.preventDefault)
        event.preventDefault();
      else 
        event.returnValue = false;
    }
    

其他

真的是不推荐此书噢，越看下去，越觉得...一言难尽。

此篇正篇中，鼠标的移出事件这里就写错了单词，有点误人子弟的意味。至于示例，可以参考一下，自己练习练习，当然也是有好处的。起码敲代码会逐步熟练。敲代码速度也会逐步加快，加上大概会走了不少坑，虽说有点费时间，可是从坑里爬出来后，一切都会豁然开朗。