文档章节

addEventListener 方法在同一个按钮添加两个点击事件。

ChinaKingM
 ChinaKingM
发布于 2016/11/29 10:48
字数 149
阅读 239
收藏 0
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            box-sizing: border-box;
        }
        .bar{
            height: 15px;
            border-radius: 5px;
            width: 300px;
            background-color: #ccc;
            padding: 3px;
        }
        .progress{
            height: 100%;
            width: 0;
            background-color: #007aff;
            border-radius: 5px;
            animation: run 3s 2s 2 forwards;
            -webkit-animation: run 3s 2s 2 forwards;
        }
        @keyframes run {
            to{
                width: 100%;
            }
        }
        @-webkit-keyframes run {
            to{
                width: 100%;
            }
        }
    </style>
    <script>
        window.onload = function(){

            var p=document.getElementsByClassName('progress')[0];
            var r=document.getElementById('result');
            p.addEventListener('animationStart',start)
            p.addEventListener('animationIteration',run)
            p.addEventListener('animationEnd',end)
            p.addEventListener('webkitAnimationStart',start)
            p.addEventListener('webkitAnimationIteration',run)
            p.addEventListener('webkitAnimationEnd',end)
            function  start() {
                r.innerText='动画开始执行'
            }
            function  run() {
                r.innerText='动画重新播放'
            }
            function end() {
                r.innerText='动画执行结束'
            }
        }

    </script>
</head>
<body>
<div class="bar">
    <div class="progress"></div>
</div>
<div id="result"></div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
上一篇: 手机端下拉选项
下一篇: public.js
ChinaKingM
粉丝 1
博文 50
码字总数 5350
作品 0
其它
程序员
私信 提问
JavaScript事件代理

先来看看addEventListener() 方法 addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句...

独孤蝈蝈
2016/10/23
17
0
论如何做好IE和Chrome互殴时的一条好池鱼之事件绑定篇

传统方法: 且看下面代码, function addLoadEvent(func){ var oldload=window.onload; if(typeof window.onload!="function"){ window.onload=func; }else{ window.onload=function(){ old......

红有三Evan
2014/08/26
0
2
彻底弄懂JS事件委托的概念和作用

一、写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的。后面...

xiaobiB
08/18
0
0
javaScript事件(二)事件处理程序

javaScript事件(二)事件处理程序 一、事件 二、事件流 以上内容见:javaScript事件(一)事件流 三、事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouse...

蜗牛奔跑
2015/06/24
0
0
常用事件方法及技巧(六) -- Event(事件)

这个按道理应该放在最开始讲的,我把放到了最后面,却是想做个总结。这篇和后面的两篇,我为大家讲解下事件总纲。总纲这个词是我自己定义的,意思是所有事件的基础。用通俗的话来说,就是其他...

余二五
2017/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
11分钟前
0
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
28分钟前
12
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
30分钟前
1
0
Confluence 6 文档主题合并问答

在 Confluence 官方 前期发布的消息 中,文档主题在 Confluence 6.0 及其后续版本中已经不可用。我们知道你可能对这个有很多好好奇的问题,因此我们在这里设置了一个问答用于帮助你将这个主题...

honeymose
今天
2
0
java框架学习日志-2

上篇文章(java框架学习日志-1)虽然跟着写了例子,也理解为什么这么写,但是有个疑问,为什么叫控制反转?控制的是什么?反转又是什么? 控制其实就是控制对象的创建。 反转与正转对应,正转...

白话
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部