js中的事件绑定的三种方式
1 直接在html标签中绑定
<button onclick = "show()"></button>
注意当你引用的js代码是包裹在window.onload中的形式的时候,show()是会报没有定义的错误,原因在于window.onload是在
页面全部加载完之后再去解析加载里面的内容。而button的点击事件在解析button的时候没有被定义。
2 用js的对象进行绑定事件
<body>
<buttonid="btn1">点击1</button>
</body>
<script>
window.onload =function(){
console.log("onload事件执行...");
var oBtn = document.getElementById('btn1');
oBtn.onclick =function(){
console.log('btn1的点击事件被触发...');
}
}
</script>
3 用事件监听的方式
<script>
window.onload =function(){
console.log('onload执行...');
var oBtn = document.getElementById('btn1');
oBtn.addEventListener('click',function(){
console.log('btn1的点击监听事件被触发');
})
}
</script>
4 事件监听的捕获和冒泡方式
addEventListener(‘触发事件’,’执行函数’,boolean),boolean默认为false
添加事件监听的第三个参数,flase:冒泡 ,true:捕获;两者区别在于,冒泡触发是从内向外的,捕获事件是从外向内的,点击事件的顺序是从外到内,在从内到外,给事件设置不同的事件监听方式使他在不同的阶段执行
<div id ='div1'>
<div id="div2">
<button id ='btn1'>点击1</button>
<button id ='btn2'>点击2</button>
</div>
</div>
<script>
window.onload =function(){
console.log('onload执行...');
document.getElementById('btn1').addEventListener('click',function(){
console.log('btn1的点击监听事件被触发');
},false);
document.getElementById('btn2').addEventListener('click',function(){
console.log('btn2的点击监听事件被触发');
},true);
document.getElementById('div1').addEventListener('click',function(){
console.log('div1的点击监听事件被触发');
},false);
document.getElementById('div2').addEventListener('click',function(){
console.log('div2的点击监听事件被触发');
},true);
}
</script>
5 阻止事件冒泡
通过e.stopPropagation();阻止冒泡
document.getElementById('btn1').addEventListener('click',function(e){
e.stopPropagation();
console.log('btn1的点击监听事件被触发');
},false);
js中的事件绑定的三种方式的更多相关文章
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- JavaScript中事件绑定的三种方式
JavaScript使得网页与用户友好交互,在使用 js 进行时间绑定的时候有三种绑定方式. 第一种:初学者以及普通写法 <div id="dom0"> <inp ...
- JS事件绑定的三种方式比较
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
- [转]javascript指定事件处理程序包括三种方式:
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- 在Tomcat中部署web项目的三种方式
搬瓦工搭建SS教程 SSR免费节点:http://www.xiaokeli.me 在这里介绍在Tomcat中部署web项目的三种方式: 1.部署解包的webapp目录 2.打包的war文件 3.Man ...
- Tomcat中部署web应用的三种方式
Tomcat中部署web应用的三种方式(静态部署) 第一种,针对war或解压后的war,最为常用的是直接操作webapp目录,将完整的war包或者web应用直接放到webapp目录下.使用 ...
随机推荐
- classpath:类路径
classpath:可以用于web.xml中获取spring springmvc配置文件的位置 用于sprnig配置文件中获取mapper的位置 classpath:可以获取到java目录下的,res ...
- DataTableHelper.cs 将DataTable转换为List,将List转换为DataTable的实现类
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 构建gitlab+Jenkins+harbor+kubernetes的DevOps持续集成持续部署环境
构建gitlab+Jenkins+harbor+kubernetes的DevOps持续集成持续部署环境 整个环境的结构图. 一.准备工作 gitlab和harbor我是安装在kubernetes集群外 ...
- mac专业视频剪辑软件 Final Cut Pro 10.4.6破解版
Final Cut Pro简称FCP,它是 Mac平台上最好的视频剪辑软件,可用来视频剪辑.后期特效等.可编辑从标清到4K的各种分辨率视频,ColorSync管理的色彩流水线则可保证全片色彩的一致性. ...
- 路由器静态IP的配置及其备份静态路由缺省路由
静态路由时管理员手动配置并维护的路由.静态路由配置简单,被广泛应用于网络中.静态路由还可以实现负载均衡和路由备份.学习掌握好静态路由的配置是很重要的. 如下图, 首先进入路由器的命令视图,(sys) ...
- nginx::基于Nginx+nginx-rtmp-module+ffmpeg搭建rtmp、hls流媒体服务器
待续 ffmpeg -re -i "/home/bk/hello.mp4" -vcodec libx264 -vprofile baseline -acodec aac -ar 4 ...
- [Abp vNext 源码分析] - 12. 后台作业与后台工作者
一.简要说明 文章信息: 基于的 ABP vNext 版本:1.0.0 创作日期:2019 年 10 月 24 日晚 更新日期:暂无 ABP vNext 提供了后台工作者和后台作业的支持,基本实现与原 ...
- tomcat+Apache介绍
tomcat不是一个完整意义上的Jave EE服务器,它甚至都没有提供对哪怕是一个主要Java EE API的实现:但由于遵守apache开源协议,tomcat却又为众多的java应用程序服务器嵌入自 ...
- Docker学习3-简单shell脚本安装mysql5.7与docker小技巧
前言 玩过Windows中的 .bat 的小伙伴是不是觉得很有意思呢,github中一键推送.同步拉取等等操作,哈哈,当然shell脚本也是很类似,可以运行一个脚本就可以自动给我们部署好环境啦!但是这 ...
- 05 Node.js学习笔记之发送文件数据
这章学习在NodeJs中如何将Html文件发送到客户端上,以及定义Content-Type内容类型 //1.载入http和fs模块 var http=require("http") ...