js 关于 DOM事件的操作

一、JavaScript的组成

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

二、事件

JS是以事件驱动为核心的一门语言。

    事件的三要素  ：事件源、事件、事件驱动程序

于是我们可以总结出：谁引发的后续事件，谁就是事件源。

总结如下：

  • 事件源：引发后续事件的html标签。

  • 事件：js已经定义好了（见下图）。

  • 事件驱动程序：对样式和html的操作。也就是DOM。

常见的事件如下

  

1、获取事件源的方式（DOM节点的获取）

 

2、绑定事件的方式

 方式一：直接绑定匿名函数

 

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>
方式二 :先定义函数,在绑定
<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getElementById("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }

方式三  行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

3、事件驱动程序

<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="box" ></div>

<script type="text/javascript">
    var oDiv = document.getElementById("box");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    oDiv.onclick = function () {
        oDiv.style.width = "200px";   //属性值要写引号
        oDiv.style.height = "200px";
        oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color
    }
</script>

注意事项:

在js 中,写属性值时,要用引号.

在js写属性名时,是backgroundColor

onload 事件

<script type="text/javascript">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>
js的加载和html 是同步的,因此如果使用元素在先定义元素之前,容易报错,我们阔以把代码放进 onload里,就能保证这段代码最后执行.
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

 

posted @ 2018-09-27 17:42  团子emma  阅读(203)  评论(0)    收藏  举报