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目录下.使用 ...
随机推荐
- raspbian修改swap分区为硬盘上的分区
一直以为raspbian的swap分区和平常装系统时候的swap分区是一样的,最近用u盘插在树莓派上运行后发现这个交换分区和我想象中不一样. 百度后发现它是一个文件挂上去的.直接搞把! pi@rasp ...
- Django中的表关系实现及操作
表关系的实现 预备知识 ORM的正向操作和反向操作: 1.正向操作:一个模型中定义了一个外键,通过该模型对该外键操作的操作叫做正向操作. 2.反向操作:被外键所关联的模型,通过该模型对外键所在模型 ...
- spring boot参数验证
必须要知道 简述 JSR303/JSR-349,hibernate validation,spring validation 之间的关系 JSR303 是一项标准,JSR-349 是其的升级版本,添加 ...
- BZOJ 4392 卡牌游戏
Description 奶牛贝茜是卡牌游戏的狂热爱好者, 但是令人吃惊的, 她缺乏对手. 不幸的是, 任何牧 群里的其他牛都不是好对手. 他们实在是太差了 , 实际上, 他们玩卡牌游戏时会遵循一种完全 ...
- vim 的初始配置
我是一个vim爱好者,项目开发过程中,大量地使用vim作为编辑工具. 今天刚开箱了一台新的 CentOS7, 现将Vim安装后的一些基本配置作一下记录. 使用配置模板 vim安装完之后,大多数配置都是 ...
- MySQL的索引原理（图解）
数据库的索引原理 0.什么是索引 索引是一种特殊的文件(InnoDB数据表上的索引是表空间的一个组成部分),它们包含着对数据表里所有记录的引用指针.更通俗的说,数据库索引好比是一本书前面的目录,能 ...
- RF分层封装
1.如何管理用例? (1).在ride工具中分层管理用例(案例层.元素层.流程层),提高效率 (2).偶尔运行下,保证脚本能正常跑动 2.用例分层操作 案例层:需要加载流程层.txt资源和Seleni ...
- RF页面断言
title should be(断言title与预期指定的title内容相等): should be equal (断言某个字符串与预期指定的字符串相等) should not be equal ( ...
- HTTP使用get，post方式连接
在项目中使用了http的get和post方式连接,发送传输数据: public static String doGet(String httpUrl) { HttpURLConnection conn ...
- Spring 框架基础(04)：AOP切面编程概念，几种实现方式演示
本文源码:GitHub·点这里 || GitEE·点这里 一.AOP基础简介 1.切面编程简介 AOP全称:Aspect Oriented Programming,面向切面编程.通过预编译方式和运行期 ...