DOM（学习笔记二）

2019独角兽企业重金招聘Python工程师标准>>>

1.事件监听

•     事件就是用户的某个行为，能够触发一个函数
•     DOM0级事件绑定（DOM02级事件绑定）

       1) oDiv.onclick = function (){         // 事件监听
            alert("本宝宝想吃苹果！！！");
        }

       2)oDiv.onclick = fn;   // 不能加括号

          function fn () {
            alert("本宝宝想吃苹果！！！");
        }

•     函数什么时候被执行？

       1）显示去调用fn；

       2）事件发生后可以执行函数

•     常见的事件

              onclick   // 单击

              onmouseover // 鼠标悬浮

              onmouseout   // 鼠标离开

              ondblclick     // 鼠标双击

              onfocus    // 得到焦点

              onblur   // 失去焦点

              onmouseup  // 鼠标松开

             onmousedown  // 鼠标按下

2.事件三要素

  1）事件源（谁身上发生了行为）

  2）什么行为（比如单击鼠标，双击鼠标，鼠标放上去）

  3）事件处理程序（行为发生后怎么处理）事件源.事件=事件处理（一般是函数）

       <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>

    <div class="box" id="box1"></div>
    <script type="text/javascript">
        var oDiv = document.getElementById("box1");
        oDiv.onclick = function (){         // 事件监听
            alert("本宝宝想吃苹果！！！");
        }

        oDiv.onmouseover = function () {
            oDiv.style.backgroundColor = 'red';
        }
        oDiv.onmouseout = function () {
            oDiv.style.backgroundColor = 'blue';
        }
    </script>

 

由于js从上往下一遍解析一边执行，所以执行函数位于文档结构之前，可能获取不到元素对象，为了防止页面崩溃，将用到onload事件，在文档加载之后再执行函数，可以获取到页面上的元素id。

window.onload = function () {}   // 文档加载完执行函数（延迟加载）

作业：1.上下左右...八个方向移动图片

           2.调节背景颜色（用户点击+-,或者输入RGB值）

           作业2参照下面链接：  https://my.oschina.net/u/3785555/blog/1794591 

 

复习

1.找元素

2.更改html属性

    点语法   oDiv.style.fontSize    // css的语法在js中变成驼峰式

    setAttribute()..,getAtttribute()..   // 自定义属性也可以

3.更改css样式

   oDiv.style.fontSize = '40px';

4.事件（监听）

  window.onload = function(){}  // 文档（html页面）加载完之后，执行的函数

转载于:https://my.oschina.net/korabear/blog/1793575