专栏首页Vincent-yuan前端学习(46)~事件简介

前端学习(46)~事件简介

事件简介

事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。

事件的三要素

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

总结如下:

  • 事件源:引发后续事件的html标签。
  • 事件:js已经定义好了(见下图)。
  • 事件驱动程序:对样式和html的操作。也就是DOM。

也就是说,我们可以在事件对应的属性中写一些js代码,当事件被触发时,这些代码将会执行。

代码书写步骤如下:(重要)

  • (1)获取事件源:document.getElementById(“box”); // 类似于Android里面的findViewById
  • (2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
  • (3)书写事件驱动程序:关于DOM的操作。

最简单的代码举例:(点击box1,然后弹框)

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

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

</body>

下面针对这事件的三要素,进行分别介绍。

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

获取事件源的常见方式如下:

var div1 = document.getElementById("box1");      //方式一:通过id获取单个标签

var arr1 = document.getElementsByTagName("div");     //方式二:通过 标签名 获得 标签数组,所以有s

var arr2 = document.getElementsByClassName("hehe");  //方式三:通过 类名 获得 标签数组,所以有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>

注意上方代码的注释。绑定的时候,是写fn,不是写fn()。fn代表的是整个函数,而fn()代表的是返回值。

方式三:行内绑定

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

<script type="text/javascript">

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

</script>

注意第一行代码,绑定时,是写的"fn()",不是写的"fn"。因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串。

3、事件驱动程序

我们在上面是拿alert举例,不仅如此,我们还可以操作标签的属性和样式。举例如下:

点击鼠标时,原本粉色的div变大了,背景变红:

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

<body>

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

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

上方代码的注意事项:

  • 在js里写属性值时,要用引号
  • 在js里写属性名时,是backgroundColor,不是CSS里面的background-color

onload事件

当页面加载(文本和图片)完毕的时候,触发onload事件。

举例:

<script type="text/javascript">
    window.onload = function () {
        console.log("smyhvae");  //等页面加载完毕时,打印字符串
    }
</script>

有一点我们要知道:js的加载是和html同步加载的。因此,如果使用元素在定义元素之前,容易报错。这个时候,onload事件就能派上用场了,我们可以把使用元素的代码放在onload里,就能保证这段代码是最后执行。

建议是:整个页面上所有元素加载完毕再执行js内容。所以,window.onload可以预防使用标签在定义标签之前。

事件举例:京东顶部广告栏

当鼠标点击右上角的X时,关掉整个广告栏,这就要用到事件。

代码实现如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .top-banner {
            background-color: pink;
            height: 80px;
        }
        .w {
            width: 1210px;
            margin: 10px auto;
            position: relative;
        }
        img {
            display: block;
            width: 1210px;
            height: 80px;
            background-color: blue;
        }
        a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: #000;
            text-decoration: none;
            width: 20px;
            height: 20px;
            font: 700 14px/20px "simsum";
            text-align: center;
        }
        .hide {
            display: none!important;
        }
    </style>
</head>
<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="" alt=""/>
            <a href="#" id="closeBanner">×</a>
        </div>
    </div>


<script>
    //需求:点击案例,隐藏盒子。
    //思路:点击a链接,让top-banner这个盒子隐藏起来(加隐藏类名)。

    //1.获取事件源和相关元素
    var closeBanner = document.getElementById("closeBanner");
    var topBanner = document.getElementById("topBanner");
    //2.绑定事件
    closeBanner.onclick = function () {
        //3.书写事件驱动程序
        //类控制
//        topBanner.className += " hide"; //保留原类名,添加新类名
        topBanner.className = "hide";//替换旧类名(方式一)
//        topBanner.style.display = "none"; //方式二:与上一行代码的效果相同
    }

</script>
</body>
</html>

注意最后一行代码,这种方式会替换旧类名,意思是,不管之前的类名叫什么,都会被修改。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端学习(49)~offset相关属性和匀速动画(含轮播图实现)

    offsetWidth 和 offsetHight:获取元素的宽高 + padding + border,不包括margin。如下:

    Vincent-yuan
  • 前端学习(21)~css学习:如何让一个元素水平垂直居中?

    如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多。

    Vincent-yuan
  • 前端学习(4)~html5详解(二)

    在HTML5的规范中,我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启拖拽的。

    Vincent-yuan
  • Java——static关键字总结(含义、定义属性或方法、使用时机)

    static关键字,主要描述全局的概念,利用该属性可以定义属性和方法,但是90%情况下很少直接编写static。

    Winter_world
  • [重拾CSS]一道面试题来看伪元素、包含块和高度坍塌

    前几天某个群友在群里问了一道面试题,就是关于一个自适应的正方形布局的困惑,先贴上代码。我其实很长一段时间没有写 CSS 了,对于里面的一些细节也比较模糊了,因此...

    秋风的笔记
  • Python编程从入门到实践之类|第10天

    面向对象编程是最有效的软件编写方法之一。在面向对象编程中,你编写表示现实世界中的事物和情景的类,并基于这些类来创建对象。编写类时,你定义一大类对象都有的通用行为...

    你好我是森林
  • kafka可靠性?

    kafka最初是被LinkedIn设计用来处理log的分布式消息系统,因此它的着眼点不在数据的安全性(log偶尔丢几条无所谓),换句话说kafka并不能完全保证...

    技术从心
  • Sass-学习笔记【基础篇】

    xing.org1^
  • js原生模态登录框

    用户7873631
  • 巧用flashback database实现灵活的数据回滚(r5笔记第16天)

    之前写了一篇博文分享了使用flashback database的特性来在测试环境中避免重复导入大批量的数据,造成时间和存储空间的浪费。http://blog.i...

    jeanron100

扫码关注云+社区

领取腾讯云代金券