智能社JS学习笔记（五）

最新推荐文章于 2018-07-28 21:11:42 发布

mirror29

最新推荐文章于 2018-07-28 21:11:42 发布

阅读量636

点赞数

分类专栏： Javasript 文章标签：智能社

本文链接：https://blog.csdn.net/mirror29/article/details/80635428

版权

Javasript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS事件基础

——给整个页面添加事件

加在document上

——事件对象（event）

clientX 鼠标点击横坐标；clientY 鼠标点击纵坐标。

event写法仅兼容IE6-8，故一般采用（ev）方法，给函数带个参数。

上为获取事件对象的兼容性写法。

——事件流

概念

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM2级事件流”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

两种事件模型

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

1.事件冒泡

IE的事件流叫做事件冒泡(event bubbling)，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）（目标节点）接收，然后逐级向上传播到较为不具体的节点（文档）——根节点（document）。

当事件在某一DOM元素被触发，向父节点、祖先节点冒泡时，每遇到依附有该事件类型处理器的节点都会触发事件处理程序。

在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在IE中可以通过设置事件对象的cancelBubble属性为true。

如果不终止冒泡，事件将一直通过DOM冒泡直至到达文档根节点document.

2.事件捕获

事件捕获的思想是不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。

事件的处理将从DOM层次的根节点开始，从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获。

如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。

事件到达目标元素后，它会接着通过DOM节点再进行冒泡。

举个栗子
以简单的HTML页面为例，单击<div>元素会按照下图顺序触发事件
事件流

在DOM事件流中，实际的目标<div>元素在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生，事件又传播回文档。

再总结一下：事件冒泡和事件捕获：事件冒泡是由目标节点一直往父节点、祖先节点直到被终止，否则会一直冒泡到文档对象模型的根节点document;而事件捕获则完全相反，事件捕获由根节点开始，从所有祖先元素一直往下传递到具体的目标节点。

兼容性：

Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。即：在这些浏览器中，有两次机会可以在目标对象上操作事件。
Opera、Firefox、Chrome和Safari都支持DOM事件流；IE不支持DOM事件流、只支持事件冒泡。
在DOM中，文本节点也触发事件、而IE中则不会

事件冒泡：事件会跟随其层级一直往父级上传递，一直到document；

取消事件冒泡的方法：oEvent.cancelBubble = true；

div跟随页面滑动，client通常都与scroll配合使用

让一串div跟着前一个div走，采用反循环

——事件类型

事件类型有：
1.window事件
onload-完成加载
onunload-用户退出页面
onresize-窗口或框架被重新调整大小
onselect-文本被选中
onscroll-滚动带滚动条的元素中的内容
onabort-图像加载被中断

2.鼠标事件
onclick-对象被点击
ondbclick-双击
onmousedown-鼠标按键被按下
onmousemove-鼠标被移动
onmouseup-鼠标按键被松开
onmouseover-鼠标移到某元素之上
onmouseout-鼠标从某元素移开
oncontextmenu-鼠标点击右键
onmousewheel-鼠标滚轮

3.键盘事件
onkeydown-某键盘按键被按下
onkeyup-某键盘按键被松开
onkeypress-某键盘按键被按下并松开

4.表单事件
onsubmit-表单被提交
onreset-表单被重置
onchange-域中内容被修改
onfocus-元素获得焦点
onblur-元素失去焦点

oninput-输入

每个按键有自己对应的数字(keyCode)。

     alert(oEvent.keyCode）

事件中级

——默认行为

什么是默认行为：
我的理解是：事件发生时浏览器默认的处理程序
阻止默认行为-阻止默认事件
普通写法return false;//既阻止了冒泡，也阻止了默认行为
-例1：阻止默认右键菜单

document.oncontextmenu=function(){
  return false;
};

-例2.只能输入字母的输入框

    var oTxt=document.getElementById('txt1');
        oTxt.onkeydown=function(ev){
            var e=ev||event;
        if((e.keyCode>90||e.keyCode<65)&&e.keyCode!=8){
                return false;
            }

        };

最后是一个实践-

磁性吸附

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽-磁性吸附</title>
    <style type="text/css">
    *{margin:0;padding: 0;}
    #div1{
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oDiv=document.getElementById('div1');

            oDiv.onmousedown=function(ev){
                var e=ev||event;
                var disX=e.clientX-oDiv.offsetLeft;
                var disY=e.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var e=ev||event;
                    var l=e.clientX-disX;
                    var t=e.clientY-disY;
                    if (l<50) {
                        l=0;
                    }
                    if (l>document.documentElement.clientWidth-oDiv.offsetWidth-50) {
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                    if (t<50) {
                        t=0;
                    }
                    if (t>document.documentElement.clientHeight-oDiv.offsetHeight-50) {
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                    oDiv.style.left=l+'px';
                    oDiv.style.top=t+'px';

                };
                document.onmouseup=function(){
                document.onmousemove='';
                document.onmouseup='';
                };
                return false;
            };

        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>