始建七个足以上下左右平移的新民主主义革命方块,如鹏网学习笔记

时间: 2019-12-09阅读: 102标签: 事件

所用到的知识点

  • margin是外边距
  • onload事件会在页面或图像加载完成后立即执行
    body绑定onload方法可以确保js代码能够在页面加载完body标签之后就执行onload事件。

不然页面加载是自顶向下加载,例如我们在第1-10行定义一个script标签,里面的使用了$("#map"),而我们第11行是<div id="map">,这样就不会执行script标签里面与$("#map")相关的内容,因为在执行1-10行的代码的时候$("#map")没有找到对应的jQuery对象,因此只有其余的代码才得到执行。
js函数定义会在js代码加载时就全部被加载,所以比如我们在script标签前5行调用show函数,在script标签的第6行才开始定义show函数,那么是可以的。

  • div.style.top = 10 是修改变量div的样式,使得它距离浏览器顶部10像素的距离(默认单位就是像素px)

我们把div.style.top设置为40,50之类的不会生效,因为它接收的应该是字符串,比如“40px”这样,而上面的10是特殊情况,我们应该每次都写成字符串。

  • document.onkeydown = function(e){}第一个参数是事件对象本身,可以任意命名,不一定为e。DOM的事件对象默认就是第一个自带参数,但是IE浏览器的事件对象是window.event,为了兼容,一般我们都var e = e || window.event;

  • js键盘事件的keyCode属性与ASCII编码无关,有独立的对照关系,我们用到keyCode值有下面4个:

keyCode值 对应按键
37 Left
38 Up
39 Right
40 Down
  • div.style.top=(parseInt(div.style.top)-20)+"px"这是因为div.style.top的值字符串,先转换为数值进行运算,最后还得转换回字符串(与字符串用+运算符连接就行了),

前面也讲过了div.style.top的值应该是字符串。所以我们写成div.style.top ="200px";生效,但是写成div.style.top = 200;不生效

  • appendChild()方法作用是插入一个子节点到当前对象里面的末尾。

我们在例子中给body添加子节点,也可以document.getElementById("myList").appendChild(newListItem);适用于其他标签,比如往ul标签里面添加li子节点。

  • 移动的时候,应该是物体的边长+margin的距离,所以边长为19px,但是我们在移动的时候距离变化是20px

完成,代码传送门:https://github.com/xiaohuacc/snake/blob/index001/index001.html

DOM笔记
一、DOM简介
  Document Object Model 文档对象模型
  DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点
  DOM API 编程接口 可以用来操作页面的任意一部分内容
  js+DOM编程的思想:由js基本语法控制程序的执行逻辑,由DOM API进行元素的查找获取,进而再对元素进行增删改等操作

前提

  学习DOM,除开学习设计思想外,更多的是学习DOM API的用法

其实只有 body、frame、iframe、img、link、script、style 这些标签才有onload事件,而div、p等标签是没有的。

二、document对象
  document对象,
    是Windows对象的一个属性,
    表示整个HTML页面,是DOM的核心对象,
    是连接JavaScript和DOM的桥梁,使得我们可以在JavaScript环境中操作页面内容,
    提供了查找获取元素节点的方法,所以document是DOM的编程入口,
    此外还提供了创建新节点的方法

但如果我们还是想在div append到DOM时做一些事情该怎么办呢?有人会说那就在append到DOM的代码后面加不就行了,但这样会每个append地方后面都得一一写上,好麻烦。

三、document对象获取对象的方法
  1,getElementById(String) 返回 Element 根据元素的id属性值获取元素

例如

  2,getElementsByTagName(String) 返回 NodeList数组 根据元素的标签名获取元素

div p我有一只小毛驴,我从来也不骑。/p/div

  3,getElementsByName(String) 返回 NodeList数组 根据元素的name属性值获取元素

假设我想在上面内容加载后,弹出“我是小毛驴”提示框。

    nodeList.length   包含的元素个数

借花献佛

    nodeList.item(index)    获取指定索引位置的元素

我还是想用onload事件处理,我们也知道哪些标签是支持,那么就可以把代码改成:

    注意:NodeList是动态更新的,即如果删除的元素也在NodeList里面,那么也同时从NodeList里面删除

div p我有一只小毛驴,我从来也不骑。/p style onload="alert('我是小毛驴')"/style/div

四、document创建新元素的方法

这样借用style标签,只要div append到DOM,就可模拟触发onload事件。

  document.creatElement(tagName) 根据元素标签名称创建元素节点

五、document添加新元素的方法

  1,先创建要添加的元素
    var element = document.createElement(tagName)

  2,获取要添加元素的节点

    var element = document.getElementById(String)

  3,使用元素的方法appendChild(node)方法进行添加

六、Element操作元素的属性

  有两种方式操作元素的属性

    1,直接使用element.属性名 :
      var 变量名 = element.属性名;//获取属性值
      element.属性名 = 属性值; //给属性赋值

      注意:
        a,因为class是关键字,所以操作class属性时使用className代替
        b,这种方式只能操作HTML标准规定的属性,不能操作自定义属性
        c,在js中,操作checkbox、radio的checked属性,select的selected属性值时,使用true或FALSE,表单元素的disable属性也是如此

    2,另外三种操作属性,且可操作自定义属性
      a,var 变量名 = getAttribute("属性名");   获取属性值
      b,removeAttribute("属性名");    删除指定属性,没有返回值
      c,setAttribute("属性名",“新属性值”);    修改/添加属性

七、Element操作元素的子节点
  子节点包括子元素和元素文本内容

  element.getElementsByTagName() 根据子元素的标签名获取其内部的子元素

  element.innerHTML("要写入的HTML语句"); 以字符串的形式在该子节点内部插入HTML语句

  element.insertBefore(newNode,node); 在子节点内部,在指定子节点前插入新子节点

  element.appendChild(newNode); 在最后追加子节点

  element.removeChild(); 删除指定的子节点

八、操作样式属性

  两种方式:
    1, element.style CSSStyleDeclaration类型的对象

      使用 element.style.属性名 的方式可以直接操作某个样式属性。

      如:element.style.backgroundColor="gray";

        注意:CSS中样式属性使用“-”连接两个单词,js中使用后面的单词首字母大写的方式连接!!

    2, element.className = "另一个className"; 效果:空字符串可以实现删除,可以实现指向另一个类,病通过CSS控制效果的切换

九、DOM事件机制
  当浏览器状态改变、用户操作时都会出发一些事件。如:点击了一个按钮,出发了按钮点击的时间,按钮称为事件源

  当一个时间被触发时,浏览器就会创建一个event事件对象,这个时间对象包含和此时间相关的 各种信息,如点击时间的时间对象包含点击文字的信息,可供编程者使用

  如果希望当一个时间发生时针对这个时间做一些处理,就可以给该时间注册一个事件处理函数,时间触发时,该函数会被调用

  常见的事件有以下几类:
    1,窗体事件
      页面加载完成事件
      load 页面加载完成时触发(window对象为事件源)
      <script type="text/javascript">

        window.onload=function(){
        //只有页面加载完成,才可确保id为div01的元素被获取到
        var element = document.getElementById("div01");
        alert(element);
        }

      </script>

      注意:load是事件的名称,onload是元素的属性,用来给元素注册事件处理函数

    2,鼠标事件
      1,
        onclick、ondblclick 鼠标单击、双击时触发
        示例代码:
        <script type="text/javascript">
          window.onload=function(){
            getElementById("div01").onclick=function(){
              alert("点到我了");
            }
            getElementById("div02").ondblclick=function(){
              alert("双击到了");
            }
          }
        </script>

        onmouseover、onmouseout    鼠标指针经过或者移出元素时触发的事件

        onmousemove     鼠标指针移动时触发(进入元素后)

        onmousedown、onmouseup     鼠标按键按下、弹起时触发(进入元素后)

    2,鼠标事件的event对象包含如下信息:
      button 点击的那个鼠标按键(0、1、2)
      altKey、ctrlKey、shiftKey    点击时是否同时按下键盘的alt、ctrl、或者shift按键
      clientX、clientY    鼠标指针的窗口坐标
      screenX、screenY    鼠标指针的屏幕坐标

      示例代码:
      <script type="javascript">
        window.onload=function(){
            getElementById("div01").onmousedown=function(){
              alert(event.button);//打印出当前事件中鼠标按下的是哪一个按键
              alert(event.altKey+event.ctrlKey+event.shiftKey);//打印出当前事件中鼠标按下时是否按了相应的按键
            }
        }
      </script>

    3,键盘事件

    4,焦点事件

    5,页面加载完成事件

      onload 页面加载完成时触发(window对象为事件源)
      示例代码:
      <script type="text/javascript">
        window.onload=function(){
          var element = document.getElementById("div01");
          alert(element);
        }
      </script>

   处理事件的两种方式

    1,通过DOM方式把时间处理函数赋值给事件属性(称为注册事件处理函数)
    示例代码:
    <script type="text/javascript">
      window.onload=function(){
        document.getElementById("div01").onclick=function(){
          alert("这是注册事件处理函数的方式");
        }
      }
    </script>

    2,直接在HTML元素标签的事件属性上写要执行的代码
      示例代码:
      <div onclick="alert('这是直接在元素标签的事件属性上写执行方法的方式');"></div>

    第一种处理方式的优先级大于第二种!!!!!

    注意:

        如果有个自定义函数fun1,
        按照第一种方式的写法为 element.onclick=fun1;//注意是将fun1这个函数的对象(不能带括号),赋值给onclick
        按照第二种方式的写法为 onclick=fun1();//在元素的标签里写上函数的调用

十、this的用法

  示例代码:
    <script type="javascript">
      function(){
        alert(this);
      }
      window.onload=function(){
        var obj = {"fun1",fun1};
        var btn = document.getElementById("btn");
        btn.onclick=fun1;

        window.fun1();//打印出window对象
        obj.fun1();//打印出Object对象
        btn.onclick();//打印出button对象
      }
    </script>

    总结:如果this在函数fun1内,函数fun1以哪个对象的属性值的身份去执行,this就表示哪个对象

    其他情况如果不容易判断的话就实际测试一下:     

    示例代码:
      <input type="button" onclick="alert(this)"/>//打印出button对象
      <input type="button" onclick="fun1()"/>//打印出window对象

十一、给一个事件注册多个事件处理函数
  1,注册事件处理函数的方式会覆盖直接编写处理代码的方式,而且同时注册的多个处理函数也会发生覆盖,
    这就导致一个事件发生时我们只能做“一件事情”

  2,为了可以给一个事件注册多个事件处理函数,DOM提供了另外一种注册方式:
    addEventListener("事件名称",处理函数);
    示例代码:
    <script type="javascript">
      div.addEventListener("click",function(){
        alert("第三种处理函数方式")
      });
    </script>

    特点:不会发生覆盖,可以同时注册相同的事件

    注意:多次注册同一个函数,效果只有一次

  3,删除一个处理函数

    如果希望将来可以删除某个注册的处理函数,就应该拿到该处理函数的引用。

    removeEventListener(事件名称, 处理函数);

    示例代码:
    <script type="javascript">
      var fun1=function(){
        alert("第三种处理函数方式");
      };
      div.removeEventListener("click",fun1});
    </script>

十二、事件冒泡

  1,由于HTML元素可以嵌套,就不可避免的出现当用户执行一个动作,如点击时,会有多个元素触发点击事件。
    为了方便管理,不至于混乱,DOM提供了事件冒泡机制。

    事件冒泡:当若干嵌套的元素“同时”被触发某个事件时,最内层元素的事件最先被触发,事件依次向外传递。
    示例代码:
    <script type="javascript">
      window.onload=function(){
        var div01 = document.getElementById("div01");
        var div02 = document.getElementById("div02");
        var div03 = document.getElementById("div03");
        div01.onclick=function(){
          alert("div01");
        }
        div02.onclick=function(){
          alert("div02");
        }
        div03.onclick=function(){
          alert("div03");
          div03.stopProgagation();//取消事件冒泡
        }
        //当点击最里面的div03时,外层的div02和div01都会触发事件,这就是事件冒泡
      }
    </script>

  2,如果某刻希望取消该事件的冒泡,可以使用event.stopProgagation();

十三、键盘事件
  keydown 键盘按键被按下

  keyup 键盘按键被弹起

  event事件对象的属性:

  event.keyCode 被按下的按键的整数编码

十四、取消某些事件的浏览器默认动作

  对于某些元素的特点事件,浏览器会有一个默认的动作,如超链接触发点击事件时页面会跳转、表单提交事件被触发时变淡数据会被提交到服务器、键盘按下在输入框输入字符等

  DOM提供了两种方式来取消浏览器的默认动作:
    1,在我们自己注册的处理函数中执行event.preventDefault();
    2,return false;

  注意:取消事件的浏览器默认动作和取消事件冒泡是不同的概念

十五、焦点事件
  focus    元素获得焦点
  blur    元素失去焦点

十六、表单事件
  select input(text)、textarea里的文本被选中时触发

  change input(text)、textarea的值改变时触发

  submit 表单提交时触发(真正把数据提交到服务器前触发)

十七、获得一个元素的坐标的写法

  <script type="javascript">
    var x = div02.offsetLeft;
    var y = div02.offsetTop;

    var parent = div02.offsetParent;

    while(parent){
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent parent.offsetParent;
    }
  </script>

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:始建七个足以上下左右平移的新民主主义革命方块,如鹏网学习笔记

相关阅读