文档章节

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

ChinaKingM
 ChinaKingM
发布于 2016/11/29 10:48
字数 149
阅读 234
收藏 0
点赞 0
评论 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
博文 47
码字总数 5112
作品 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
javaScript事件(二)事件处理程序

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

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

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

余二五
2017/11/09
0
0
attachEvent 与addEventListener到底有什么区别呢?

attachEvent 与addEventListener到底有什么区别呢?总结如下: 一、适应的浏览器版本不同 attachEvent方法适用于IE addEventListener方法适用于FF 二、针对的事件不同 attachEvent中的事件带...

柒月-小妖精
2013/11/20
0
0
addEventListener(主流)和attachEvent(IE678)介绍

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

zgjxyszh的博客
2017/12/14
0
0
如何使用PhoneGap程序将AdMob广告嵌入到你的HTML5 iOS游戏中

如果你没有AdMob账户,先注册一个AdMob账户。 点击“Monetize new app”按钮。 如果它是一个新的应用程序,你仍然要发布,选择“Add your app manually”选项卡,命名你的应用程序,在这种情...

bbk122
2016/02/26
44
0
JS-DOM2级封装练习题--点击登录弹出登录对话框

Document-DOM2级封装练习题

鋒o丫头
2016/09/20
0
0
quick lua下自定义事件处理

Quick-Cocos2d-x中的事件机制在官方的文档中已经讲解得很清楚了,查看这里。 这些方法能处理绝大多数的事件,但如果要实现自定义的事件(例如我们自己实现一个类,对该类添加自定义的事件处理...

80后小子
2015/01/29
0
0
前端常见JS问题总结

Genius only means hard-working all one's life. 20. Call 和 Apply 的区别 语法: function.call(thisObj [, arg1[, arg2[, [, ...argN]]]]); function.apply(thisObj [, argArray] ); 定......

Neuro_annie
2017/09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sap netweaver developer studio安装svn插件

问题 我现在在Sap的IDE(netweaver developer studio)上面安装svn插件。 步骤 确定IDE使用的eclipse版本 Help→About SAP NetWeaver Developer Studio→Installation Details→Features→F...

亚林瓜子
10分钟前
0
0
Spring Cloud云服务架构 - commonservice-config配置服务搭建

1. 介绍 Spring Cloud Config为分布式系统中的外部配置提供服务器和客户端支持。使用Config Server,您可以在所有环境中管理应用程序的外部属性。客户端和服务器上的概念映射与Spring Enviro...

itcloud
11分钟前
1
0
大数据开发学习的内容介绍,成都大数据培训机构哪里好?

大数据开发培训已经成为了越来越多人的选择,大数据开发工程师也是各公司争相争夺的金领人才之一了,在当今科技发展非常迅速的社会里,越来越多人把职业规划投向了大数据开发。这里为大家整理...

加米谷大数据
15分钟前
2
0
函数

函数 函数是Python中最主要也是最重要的代码组织和复用手段。作为最重要的原则,如果你要重复使用相同或非常类似的代码,就需要写一个函数。通过给函数起一个名字,还可以提高代码的可读性。...

火力全開
17分钟前
0
0
gulp-webserverf启动服务,局域网无法访问

如题,gulp-server启动的服务,只能本机访问,局域网通过ip无法访问; 启动的其它项目,均可以访问成功; 网上资源,很多说什么防火墙之类的问题,都无果; 只需要给启动服务添加参数即可, ...

littleFaye
19分钟前
0
0
RabbitMQ实战:5种模式和示例

应用RabbitMQ的5种队列 一、简单队列 P:消息的生产者 C:消息的消费者 红色:队列 生产者实现思路: 创建连接工厂ConnectionFactory,设置服务地址127.0.0.1,端口号5672,设置用户名、密码...

spinachgit
20分钟前
0
0
mysql常见报错标号对应原因以及处理方法

mysql常见报错标号以及对应解决方法 报错标号 报错现象 解决方法 原因 1449 Cause: java.sql.SQLException: The user specified as a definer ('authplat_dev'@'%') does not exist 在控制台...

ChinaHYF
22分钟前
0
0
Java 监控系统技术选型

(1)操作系统监控 Sigar oshi (2)Tomcat监控 JMX 日志 (3)Oracle监控 日志 直连SQL查询 基于Druid连接池 (4)拓扑图 jtopo http://www.jtopo.com/demo/statictis.html...

cccyb
23分钟前
1
0
解决IDEA中moduel配置了maven依赖可是依然不能使用依赖中的类

POM.xml中明明配置了依赖,也开启了maven的 auto-import 下面的刷新maven也没用: 直到使用下面的解决办法才使依赖生效: IDEA打开右侧 maven projects 点击顶部的M图表(看下图) 出现如下对...

颖辉小居
24分钟前
0
0
Nginx proxy pass路由转发简单用法

一,在nginx中配置proxy_pass时的加不加/的问题要注意proxy_pass后的url最后的/当加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理走如果没有/,则会把匹配的...

binhu
24分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部