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目录下.使用 ...
随机推荐
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- ef core实现软删除
很多web程序一般的偶不会设计真的物理删除了. 基本上都是在在数据库加一个标记,就得当作已经删除了.同时在查询的时候,过滤已经标记删除的数据 ef core实现软删除是非常简单的,直接在OnModel ...
- python编程基础之二十五
匿名函数:不用def 定义的函数,没有函数名 lambda只是一个表达式,函数体比def简单的多 lambda的函数体不再是代码块 lambda只有一行,增加运行效率 lambda [参数1][参数2 ...
- BZOJ - 2783 树
数列 提交文件:sequence.pas/c/cpp 输入文件: sequence.in 输出文件: sequence.out 问题描述: 把一个正整数分成一列连续的正整数之和.这个数列必须包含至少两 ...
- Jenkins部署（基于Linux）
1.安装JDK 我不列出来了,自行百度 java -version 2.安装tomcat (1)创建目录tomcat8 (2)导入tomcat文件到tomcat8目录中并解压 (3)启动tomcat ...
- call，apply和bind详解
一.call和apply call和apply其实是同一个东西,区别只有参数不同,call是apply的语法糖,所以就放在一起说了,这两个方法都是定义在函数对象的原型上的(Function.proto ...
- ArraryList源码解读
先由一道题引发思考: ArrayList list = new ArrayList(20);中的list扩充几次() A 0 B 1 C 2 D 3 答案:A 直接翻看 jd ...
- Dubbo+Zookeeper(一)Zookeeper初识
前面花了一段时间去学习SpringCloud的相关知识,主要是理解微服务的概念并使用SpringCloud的一系列组件实现微服务落地.学习这些组件本身是简单的,跟着操作一遍基本就会了,这也得益于Spr ...
- ElasticSearch Bulk API
做一个简单的记录,以便自己后续查找 一.环境要求 ElasticSearch 7.3.0 Kibana 7.3.0 二.详情 ElasticSearch 的 Bulk API 可以批量进行索引或者删除 ...
- Spring 源码阅读之 深入理解 finishBeanFactoryInitialization
源码入口 上篇博文中我们看到了将Spring环境中的 BeanPostProcessor找出来,添加到BeanFactory中的beanPostProcessors中,统一维护,本片博文继续往下拓展, ...