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事件高级绑定的更多相关文章

  1. JavaScript事件属性绑定带参数的函数

    JavaScript中在对事件进行绑定的时候,往往是element.onclick=event;这种形式,这样使用的话则会出现无法传参数.因此我们可以使用function(){}匿名函数将事件包含其中 ...

  2. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  3. JavaScript 事件代理绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  5. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  6. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  7. JavaScript之事件的绑定与移除

    对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...

  8. 2014年辛星解读Javascript之DOM之事件及其绑定

    我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...

  9. JavaScript事件的委派与事件的绑定

    事件的委派 在很多需求中,通常元素是动态创建添加到一个父元素中的,这时候我们点击新增的元素是没有反应的 <script type="text/javascript"> ...

随机推荐

  1. Java学习笔记9(面向对象二:this、继承、抽象类)

    就近原则: 类中的方法中的变量和成员变量重名时,调用类的方法时候,生效的是方法中的变量,如果方法中没有定义变量,才会去成员变量中寻找 于是,提出了this关键字,为了区分重名问题 public cla ...

  2. 深入理解ES6之—数据解构

    一 对象解构 对象解构语法在赋值语句的左侧使用了对象字面量 let node = { type: true, name: false } //既声明又赋值 let { type, name } = n ...

  3. 【转载】ipcs与Linux共享内存

    一.共享内存相关知识 所谓共享内存,就是多个进程间共同地使用同一段物理内存空间,它是通过将同一段物理内存映射到不同进程的 虚拟空间来实现的.由于映射到不同进程的虚拟空间中,不同进程可以直接使用,不需要 ...

  4. FreeMarker处理json

    在后台返回一个json结构时,在ftl处理方式如下 <#assign json="${text}"?eval /> ${json.test} 说明:json为接收的值, ...

  5. jdk1.8新特性 : 接口中可以有普通方法(非静态方法)和静态方法 , 颠覆了之前我的理解 : 接口中只能有共有常量和抽象方法的概念,后面必须要加一句jdk1.7和1..7之前

    看到jdk某些接口中存在default方法,于是... http://shaomeng95.iteye.com/blog/998820    为什么接口只能是公有常量? public interfac ...

  6. django中数据库操作——in操作符

    django一对多关系中,为了实现按照一端查询多端,之前都是用extra操作符,经过查看官方文档还有in这个操作符,用这个实现更简单.直接上代码: 根据查询条件模糊查询所有符合条件的机架列表,然后根据 ...

  7. Postman基本使用——get、post请求、断言、环境变量

      Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 它提供功能强大的 Web API & HTTP 请求调试. 它能够发送任何类型的HTTP 请求 (GET, ...

  8. CTF---Web入门第十题 Once More

    Once More分值:10 来源: iFurySt 难度:易 参与人数:4782人 Get Flag:2123人 答题人数:2166人 解题通过率:98% 啊拉?又是php审计.已经想吐了. hin ...

  9. 线性表的链式存储结构的实现及其应用(C/C++实现)

    存档----------- #include <iostream.h> typedef char ElemType; #include "LinkList.h" voi ...

  10. NYOJ 题目77 开灯问题(简单模拟)

    开灯问题 时间限制:3000 ms  |            内存限制:65535 KB 难度:1           描述 有n盏灯,编号为1~n,第1个人把所有灯打开,第2个人按下所有编号为2 ...