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"> ...
随机推荐
- tensorflow核心概念和原理介绍
关于 TensorFlow TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库. 节点(Nodes)在图中表示数学操作,图中的线(edges)则表示 ...
- Mac 安装python ,anaconda。彻底卸载anaconda的方法
To uninstall Anaconda open a terminal window and remove the entire anaconda install directory: rm -r ...
- 如何在一个项目中同时包含mvc建站、webapi接口
项目做得多了..就会发现有些小项目不想建太多的项目..现在思明在这里和大家分享一下如果再一个项目中同时包含mvc建站以及实现webapi接口 1.新建项目 aps.net web 应用程序 2 新建模 ...
- 数据结构-栈(应用篇)之快速排序法-C和C++的实现
一.原理解析 快速排序法: 基本思路是,从第一个元素开始,把所有比它大的元素放在它后面,把所有比它小的元素放前面.然后划分它前面和后面的所有元素,分别再做快速排序,直到无法再划分为止. 在以下程序案例 ...
- ConstraintLayout知识记录
一.准备工作 1. 确保SDK Tools已经下载了ContraintLayout的支持库. 2. gradle中增加对ConstraintLayout的依赖. compile 'com.andr ...
- 七牛php-sdk使用-文档处理
所用到的七牛文档转换服务,主要是:ppt文件转为pdf文件,pdf文件转图片(png). 描述一下需求:上传PPT或者PDF文件到七牛,最终转换为图片.文件上传部分的功能已经讲过了,这里说一下转换处理 ...
- Android基础_ContentProvider组件
一.了解Contentprovider组件 1.1Contentprovider是数据的提供者,Android四大组件之一,程序之间数据共享的接口 1.2activity系统中对数据的访问限制十分严格 ...
- 使用Anaconda搭建TensorFlow-GPU环境
前言: 对于深度学习来说,各种框架torch,caffe,keras,mxnet,tensorflow,pandapanda环境要求各一,如果我们在一台服务器上部署了较多的这样的框架,那么各种莫名的冲 ...
- CSS颜色渐变
一. Webkit浏览器 (1) 第一种写法: background:-webkit-gradient(linear ,10% 10%,100% 100%, color-stop(0.14,rgb(2 ...
- asp.net core使用Swashbuckle.AspNetCore(swagger)生成接口文档
asp.net core中使用Swashbuckle.AspNetCore(swagger)生成接口文档 Swashbuckle.AspNetCore:swagger的asp.net core实现 项 ...