关于DOM的事件操作

一.javascript 的组成

  ECMAScript:JavaScript 的语法标准,包括变量.表达式,运算符,函数.if语句,for语句

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

  BOM:浏览器对象模型,操作浏览器部分功能的API,比如让浏览器自动滚动

二.事件

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

事件三要素:事件源,事件,事件驱动程序(非常重要)

  事件源:引发后续事件的html标签

  事件:js已经定义好了

  事件驱动程序: 对样式和html的操作,也就是DOM

代码书写步骤如下:

  1.获取事件源:document.getElementById("box")

  2.绑定事件:事件源box,事件onlick=function()  {事件驱动程序};

  3.书写事件驱动程序:关于DOM的操作

<script type ="text/javascript">
            1获取事件源
        var div = document.getElementById("box1");
            2 绑定事件
        div.onclick= function() {
            3 书写事件驱动程序
        alert("我是弹出来的内容");
</script>

常见的事件如下:

 

 三要素的详细解说

1.获取事件源的方式(DOM节点的获取)

  常见的方式如下:

    var div1 = document.getElementById("box1");       #通过id获得单个标签

    var  arr1 = document.getElementsByTagName("div1")   #通过标签名获得标签数组

    var arr2 = document.getElementsByclassName("呵呵")  #通过类名获得标签组

    后两个里面的element都是有s的

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("我是弹出的内容");
    }
</script>

  行内绑定

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

<script type="text/javascript">

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

</script>

 

事件驱动程序

  

<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>

 

posted @ 2018-09-26 17:34  RootEvils  阅读(200)  评论(0编辑  收藏  举报