JavaScript事件高级绑定
js 进行事件绑定,其中一种不常见的写法是:
<div id="father" style="width: 300px; height: 200px; background-color: red;">
<div id="son" style="width: 150px; height: 100px; background-color: blue"></div>
</div> <script>
var fa=document.getElementById('father');
fa.addEventListener('click',function () {
console.log('123');
},false);
var son=document.getElementById('son');
son.addEventListener('click',function () {
console.log('abc');
},false); </script>
点击 son 区域的时候,console出的内容为 ‘abc’ ,‘123’ 。当false改变为 true 时,console出的内容为 ‘123’ , ‘abc’ 。即:
false 代表为冒泡模型;true 代表捕捉模型!
JavaScript事件高级绑定的更多相关文章
- JavaScript事件属性绑定带参数的函数
JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...
- 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- JavaScript 事件代理绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- javaScript事件绑定
事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...
- JavaScript之事件的绑定与移除
对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
- JavaScript事件的委派与事件的绑定
事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...
随机推荐
- Java学习笔记20---内部类之对成员内部类的补充说明(一)
上篇文章--笔记19简要介绍了成员内部类.局部内部类和匿名内部类,下面对成员内部类再补充一些内容. 主要有以下6点: 1.成员内部类不可以有静态成员,成员变量为static final时除外 2.外部 ...
- [异常解决] 奇巧淫技——VirtualBox中的linux无显示启动,并在win7上远程控制
楼主是资深技术宅(癖),由于感觉手上的老笔记本太卡,遂狠心买了个性能至强的主机同时配了个投影仪(满足躺着打代码的意淫场景).但是体验了大概一个月发现还是坐着打代码舒服,但是如下图坐着打代码总是要抬头看 ...
- python3之内置函数
1.abs() 取数字的绝对值 >>> print(abs(-28)) 28 >>> print(abs(-2.34)) 2.34 >>> pri ...
- 初学Vue之数量加减
效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList&qu ...
- Spring MVC 详解之废话少说
<陈翔六点半之废话少说>.... Spring WEB MVC 的请求流程: Spring WEB MVC架构: 开始创建.配置gradle项目 1.在gralde项目中,选择SDK 和框 ...
- java struts学习-拦截器
引言: Struts2拦截器,每个拦截器类只有一个对象实例,即采用单例模式,所有引用这个拦截器的Action都共享这一拦截器类的实例,因此,在拦截器中如果使用类变量,要注意同步问题. • ...
- java实现 比较两个文本相似度-- java 中文版 simHash 实现 ,
比较两个文本的相似度 这里采用 simHash 算法 ; 分词是 基于 http://hanlp.linrunsoft.com/ 的开源 中文分词包 来实现分词 ; 实现效果图: 直接上源码: htt ...
- 洛谷 P1598 垂直柱状图【字符串+模拟】
P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...
- jqgrid 分页 (基于ashx)
1:数据库表创建并往中插入200000条数据: 复制代码 CREATE TABLE [dbo].[T_School]( [ID] [int] IDENTITY(1,1) NOT NULL, [Scho ...
- SSH中后台传到前台一个信息集合,tr td中怎么进行排列,类似在一个div里排列书籍
总觉得描述问题不对,这里详细说一下,就是把下面图片变成排列整齐,一行四个,多出来的两个排到下一行. 我问过群里的,给的答案都有些简介:1:后台排好了,前台循环出来: 2:前台直接循环,多出来的加< ...