【面向JS--事件】

事件：event：浏览器自动触发的或用户手动触发的页面状态的改变

事件处理函数: 当事件发生时自动调用的函数

当希望在事件发生时，自动调用一个函数，都要在事件发生前，将函数绑定到事件属性上

如何绑定: 3种:

1、在html中绑定: <ANY on事件名="js语句"
   比如: <button onclick="fun()"
   问题: 不符合内容与行为分离的原则，不便于维护！
   解决: 在js中动态绑定事件
2、为事件属性赋值一个函数:
    ANY.on事件名=fun; 
    强调: 1、fun后不要加()，因为是回调的一种
          2、fun中的this->ANY 事件绑定到的.前的元素对象
   问题: 一个事件只能绑定一个处理函数，且不能被remove移除
   解决: 用addEventListener
3、addEventListener
   ANY.addEventListener("事件名",fun,captrue)
   ANY.removeEventListener("事件名",fun)

事件模型: Event模型指的是浏览器如何处理发生的事件

DOM: 3个阶段:

1、捕获: 由外向内，记录各级父元素上绑定的相同事件
     addEventListener("事件",fn,capture)
     capture: 是否在捕获阶段提前触发，默认false
2、目标触发: 首选触发目标元素上的事件处理函数
     目标元素: 实际触发事件的元素
3、冒泡: 按照捕获顺序的反向,由内向外，依次触发各级父元素绑定的事件处理函数

IE8: 2个阶段: 没有捕获

attachEvent("on事件名",fn);

事件对象: 当事件发生时，自动创建的，封装所有事件信息的对象

何时: 只要希望操控事件或获得事件相关数据都要用事件对象

DOM: 事件对象默认作为事件处理函数的第一个参数传入
     function 处理函数(e){ 
        ... e//在事件发生时自动获得事件对象 ...
     }
IE8: 在全局window,定义了一个event
     function 处理函数(){
       window.event
     }
兼容: function 处理函数(e){
       e=e||window.event;
     }

操作: 取消冒泡: 停止蔓延

DOM: e.stopPropagation();
IE8: e.cancelBubble=true;
兼容: if(e.stopPropagation)
        e.stopPropagation();
     else
        e.cancelBubble=true;

利用冒泡:

优化: 尽量少的添加事件监听
为什么: 浏览器在事件发生时，会遍历所有注册的事件监听，监听越多，遍历就越慢，网页响应速度就越慢
解决: 如果多个子元素绑定相同的事件时，只需在父元素集中绑定一次，所有子元素共用即可

难题:

1、如何获得目标元素
     this->随冒泡向父元素移动
     解决: e.target 始终保存目标元素，不随冒泡改变
2、如何鉴别目标元素是否想要的
     解决: 在执行正式操作前，判断目标元素的特征

取消事件: 阻止默认行为

何时: 当事件发生后，不希望事件再执行浏览器默认行为时
如何: e.preventDefault();

典型应用：

1.当用a标记作为按钮使用，避免url结尾添加锚点地址，要取消默认行为
2.在表单的onsubmit事件中，进行最后一次验证，如果未通过，就取消默认提交
3.H5做拖拽效果时，都要取消默认

<body>
     <a href="http://www.baidu.com" id="link">百度</a>
<script>
     var link = document.getElementById("link");
     link.addEventListener("click", fn, false);
     function fn(e) {
         e.preventDefault();
         //若用return false; 不起作用
         //若用link.onclick = function();return false可以阻止
     }
</script>
</body>

事件坐标: 事件发生时，鼠标的位置

e.screenX|e.screenY：鼠标指针相对于屏幕左上角的位置

e.x|e.y：
e.clientX|e.clientY：
e.pageX|e.pageY：鼠标指针相对于文档左上角的位置

e.layerX|e.layerY：
e.offsetX|e.offsetY：鼠标指针在当前事件元素内的位置

页面滚动事件: document.body.onscroll

获得页面滚动过的高度: 
    1、document.body.scrollTop
    2、document.documentElement.scrollTop
强调: onscroll中的this指向window!

键盘事件：

方法
    keydown  按下时
    keypress  按下
    keyup  抬起时
属性
    keyCode  键盘码，只有数字和字母对应ASCII码
    charCode  对应ASCII码，只有在keypress中才生效（IE9+）

<body>
  <input type="text">
  <input type="text">
  <input id="t1" type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <inputtype="text">
  <input type="text">
  <input type="text">
  <input type="text">
  <script>
      var inputs = document.body.getElementsByTagName("input");
      for(var i = 0, length = inputs.length; i < length ; i++) {
          var input = inputs[i];
          //回车键的keyCode是13
          if(input.type === "text") {
              //按下回车，让下一个文本框获得焦点
             input.onkeydown = function (e) {
                if(e.keyCode === 13) {
                    //focus() 他触发了onfocus事件
                    this.nextElementSibling.focus();
                }
            }
        }
    }
</script>
</body>

猜你喜欢