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. bootstrap媒体查询

    Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 ...

  2. python每日学习2018/1/11

    A.4 Python 关键字和内置函数 Python包含一系列关键字和内置函数,给变量命名时,知道这些关键字和内置函数很重要. 编程中面临的一个挑战是给变量指定合适的名称,变量名可以是任何东西,只要它 ...

  3. 如何一条sql语句查找表中第二大值

    例1: 一个Customer表,一个字段Value,现请问如何查到Value中第二大的值 select max(value) from Customer where value < (selec ...

  4. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  5. [转]Python的3种格式化字符串方法

    本文转自: 夏日微风Python笔记 传统C语言式 命名参数 位置参数 1. 传统C语言式 和c语言里面的 sprintf 类似,参数格式也一样 title = "world" y ...

  6. Nginx常用功能(5)

    一.反向代理 1.多域名跳转(location) server www.test.com location / { proxy_pass http://192.168.100.100:8080/web ...

  7. 新安装的soapui启动时报错及解决方法

    今天新安装了soapui准备测试一下接口,结果安装成功后启动时报错:The JVM could not be started. The maximum heap size (-Xmx) might b ...

  8. Dora.Interception,为.NET Core度身打造的AOP框架:全新的版本

    Dora.Interception 1.0(Github地址:可以访问GitHub地址:https://github.com/jiangjinnan/Dora)推出有一段时间了,最近花了点时间将它升级 ...

  9. JavaScript中的this(你不知道的JavaScript)

    JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心:随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!所 ...

  10. java的finalize()方法与C++的析构函数

    ---<java编程思想> 读书笔记 --- 2017/3/15 读<java编程思想>读到初始化与清理一章,文中提及java的finalize()方法,联想到了C++的析构函 ...