文档章节

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

ChinaKingM
 ChinaKingM
发布于 2016/11/29 10:48
字数 149
阅读 236
收藏 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>

© 著作权归作者所有

共有 人打赏支持
ChinaKingM
粉丝 1
博文 49
码字总数 5320
作品 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
addEventListener(主流)和attachEvent(IE678)介绍

1、addEventListener()主流浏览器 addEventListener() 方法用于向指定元素添加事件句柄,使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 element.addEvent...

zgjxyszh的博客
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《看图轻松理解数据结构与算法系列》导引贴

最近学习数据结构,遇到一个很喜欢的博主,他的文章图文并茂,理解起来很容易。特此开贴记录,方便反复阅读。 博主主页 https://juejin.im/user/57c3970f79bc440063e58518/posts?sort=popul...

科陆李明
42分钟前
1
0
20.27 分发系统介绍~ 20.30 expect脚本传递参数

分发系统介绍分发系统-expect讲解(也就是一个分发的脚本)场景:业务越来越大,网站app,后端,编程语言是php,所以就需要配置lamp或者lnmp,最好还需要吧代码上传到服务器上;但是因...

洗香香
56分钟前
2
0
设计一个百万级的消息推送系统

前言 首先迟到的祝大家中秋快乐。 最近一周多没有更新了。其实我一直想憋一个大招,分享一些大家感兴趣的干货。 鉴于最近我个人的工作内容,于是利用这三天小长假憋了一个出来(其实是玩了两...

crossoverJie
今天
2
0
软件架构:5种你应该知道的模式

Singleton(单例模式)、仓储模式(repository)、工厂模式(factory)、建造者模式(builder)、装饰模式(decorator)……大概每个上课听讲的程序员都不会陌生——软件的设计模式为我们提供...

好雨云帮
今天
3
0
OSChina 周二乱弹 —— 这只是一笔金钱交易

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小小编辑:推荐歌曲《暮春秋色》- 窦唯 / 译乐队 《暮春秋色》- 窦唯 / 译乐队 手机党少年们想听歌,请使劲儿戳(这里) @我没有抓狂:跨服聊...

小小编辑
今天
1K
19

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部