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目录下.使用 ...
随机推荐
- 做高逼格程序员之说走就走的「Windows」
简介:随着移动固态硬盘越来越便宜,网上逐渐出来一个黑科技.Windows To GO见名知意.简单来说就是在U盘或者是移动固态硬盘上安装Windows系统.达到即插即用. WTG 简介 Windows ...
- MyBatis详解 一篇就够啦
第1章MyBatis框架配置文件详解 1.1 typeHandlers类型转换器 每当MyBatis 设置参数到PreparedStatement 或者从ResultSet 结果集中取得值时,就会使用 ...
- laravel学习之旅
前言:之前写了二篇YII2.0的基本mvc操作,所以,打算laravel也来这一下 *安装现在一般都用composer安装,这里就不讲述了* 一.熟悉laravel (1)如果看到下面这个页面,就说明 ...
- 安装VMworkstation和Centos虚拟机
1.安装VMware workstation. 2.下一步. 3.可以选择安装位置,下面选项不选. 4.这两个选项不需要选. 5.下一步 6.安装 7. 8.点击许可证输入密钥,密钥在网上搜,然后就完 ...
- SystemVerilog Assertion 设计、调试、测试总结（2）
上一篇博客主要写了SVA的基本语法(详细),这一篇主要写SVA语法总结,以及如何查看SVA波形等. 断言assertion被放在verilog设计中,方便在仿真时查看异常情况.当异常出现时,断言会报警 ...
- 不吹不黑也不撕，我们就简简单单谈谈Vue
Vue在近两年中得到了快速的发展,17年初开始,市场上对Vue开发者的需求量越来越大,北京在招的前端职位中40%的岗位对Vue技能有要求,在杭州,虽然React仍然是主力框架,但是Vue使用的比例也在 ...
- GSS3 - Can you answer these queries III
题意翻译 nnn 个数, qqq 次操作 操作0 x y把 AxA_xAx 修改为 yyy 操作1 l r询问区间 [l,r][l, r][l,r] 的最大子段和 感谢 @Edgration 提供的 ...
- webpack4.0入门总结
1. 安装webpack: // 初始化.安装webpack以及webpack-clinpm init npm install --save-dev webpack webpack-cli 2.创建配 ...
- 在npm上发布自己的vue组件库（使用npm install 或者 CDN的方式引用）
一.npm publish发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm i ...
- java实现,使用opencv合成全景图,前端使用krpano展示
这周花三天做了一demo,算上之前的,怎么也有五天,上一篇是opencv介绍,以及定义native方法,通过本地图片路径传参,底层调用Opencv图像库合成,有兴趣的可以看看,这篇重点在于krpano ...