js中事件的3要素

  • 事件源
  • 事件
  • 事件处理程序

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#demo {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="demo"></div>
<button id="btn">改变宽度</button>
<script>
/*要操作先找人*/
var demo = document.getElementById("demo"); //获得id为demo的div盒子给demo
var btn = document.getElementById("btn"); // 获得按钮
/*事件三要素*/
/*事件源.事件 = fucntion(){}*/
btn.onclick = function(){
console.log(this); // this表示btn
demo.style.width = "400px";
}
</script>
</body>
</html>

[js]js中事件的3要素的更多相关文章

  1. JS中事件代理与委托

    在javasript中delegate这个词经常出现,看字面的意思,代理.委托.那么它究竟在什么样的情况下使用?它的原理又是什么?在各种框架中,也经常能看到delegate相关的接口.这些接口又有什么 ...

  2. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  3. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  4. 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件

    在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件  当触发事件时候 会把当前的dom传给该方法

  5. js中事件三阶段

    js中事件三阶段 先贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. Vue.js 2.x中事件总线(EvevntBus)及element-ui中全屏loading的使用

    事件总线(Event Bus)可以在vue项目的index.js文件中创建,也可以在一个独立的.vue文件中创建.使用时,在各个子组件中引入该组件即可. 项目中的全屏loading较多时,可以在根组件 ...

  7. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  8. IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以

    IOS的UIWebView中JS点击事件,需要加入cursor:pointer;属性才可以. Android的WebView可以支持外链样式,js文件:IOS则需要改为内嵌样式和JS文件.

  9. 对JS中事件委托的理解

    什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...

随机推荐

  1. mongodb配置文件解说(转载)

    启动方式 ./bin/mongod -f mongodb.conf 会看到 about to fork child process, waiting until server is ready for ...

  2. maven私服不能重复部署解决

    1.报错 Return code is: 400, ReasonPhrase: Repository does not allow updating assets: maven-releases. 2 ...

  3. 搭建hbase1.2.5完全分布式集群

    简介 有一段时间,没写博客了,因为公司开发分布式调用链追踪系统,用到hbase,在这里记录一下搭建过程 1.集群如下: ip 主机名 角色 192.168.6.130 node1.jacky.com ...

  4. stm32f0 学习

    http://blog.csdn.net/mrlixirong/article/category/5842873

  5. 手动安装mysql

    需要在本机(mac)上装个mysql,看到压缩版的体积最小,结果进入了手工安装的坑(正常有界面可以安装,但安装目录将是/usr/local/mysql),既然入了坑就填上吧. 1.解压到自己选择的目录 ...

  6. [JVM] IDEA集成VisualVM

    VisualVM是集成命令行JDK工具和轻量级分析功能的可视化工具. 参考: https://blog.csdn.net/qq_22741461/article/details/80451675 ht ...

  7. 消息中间件系列三:使用RabbitMq原生Java客户端进行消息通信(消费者(接收方)自动确认模式、消费者(接收方)自行确认模式、生产者(发送方)确认模式)

    准备工作: 1)安装RabbitMQ,参考文章:消息中间件系列二:RabbitMQ入门(基本概念.RabbitMQ的安装和运行) 2.)分别新建名为OriginalRabbitMQProducer和O ...

  8. badgeview

    https://github.com/AlexLiuSheng/BadgeView include: compile 'com.allenliu.badgeview:library:1.1.1'(ne ...

  9. Excel数据与DateTable数据的转换

    public class ExcelHelper : IDisposable { private string fileName = null; //文件名 private IWorkbook wor ...

  10. vs启动出错(chenlu-1):参数“basePath”不能是相对路径

    参数“basePath”不能是相对路径 原因: 1.调试路径下没有exe文件.没有生成exe文件. 2.项目属性->配置属性->调试->命令中的参数被设置为相对路径.