一名前端工程师的自学之路!Js篇(02-26更新)

18年的第一个月,我是要在bug的海洋里遨游了,大家是怎么样的呢~ 哈哈, 好了接下来,开始更新了。

事件流

当触发某个事件时(某个事件发生了),从子元素向父级元素触发 或 从父级元素向子元素触发的过程 ,这个过程 称为事件流

事件流有两种模式:

事件冒泡:从子元素向父级元素触发 small --- big ---body --- document -- window

事件捕获:从父级元素向子元素触发 window --- document --- body --- big --- small

事件冒泡

当子元素触发某个事件时,同样的事件回向父级元素触发,这个过程称之为事件冒泡

阻止事件冒泡

兼容写法:

e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

事件绑定

事件绑定: 如何为元素添加一个事件

1、在标签上写事件名称

2、通过 对象.事件 = function(){ .... } ,写在script标签内部的

3、同过 addEventListener() 方法

事件监听

通过 addEventListener 方法为元素添加事件 称为事件的监听

事件监听好处:

可以为同一个元素添加多个同样事件

为同一个元素添加多个同样事件时,执行顺序从上到下顺序执行。

事件监听用法:

对象.addEventListener("事件",function(){},true/false) --- 高版本浏览器

说明:

第一个参数: 监听的事件 这里的事件没有on

第二个参数: 事件处理程序

第三个参数: 是一个布尔值 true表示 事件的捕获 false 表示事件的冒泡 (默认是false)

对象.attachEvent("事件",事件处理程序) ---- 低版本浏览器

说明:

第一个参数: 监听的事件 这里的事件有on

第二个参数: 事件处理程序

冒泡和捕获的执行顺序

当同一个元素既有事件冒泡和事件捕获时,先执行捕获 ; 后执行冒泡

事件委托

委托:让别人去做

事件委托:把某个事件委托给别人去做

委托的好处:

当某些元素具有同样的事件时,为了提高程序的执行效率,可以把这些元素的事件加到他们的父级元素上。

委托实现方式:

1、 父级元素.事件 = function(){ ... }

2、 通过事件监听方法 addEventListener 实现

父级元素.addEventListener("事件",function(){ .... })

委托实现时,获取事件源的属性: e.target || e.srcElement

委托实现原理: 利用事件冒泡的机制,将某些元素的事件添加到父级元素上

委托对事件的限制: 不是所有的事件都可以实现委托,例如下面的事件一般不需要委托 (onclick一般用委托实现的比较多)

onload onfocus onblur ....

注意的问题

button标签 在 form中相当于 submit按钮,会刷新页面

超链接

阻止超链接的跳转功能

超链接

超链接

json对象

json全称:javascript object notation

中文含义: javascript 对象表示法

定义:json是一种轻量级的数据交换对象

作用: 存储数据

json对象定义:

var j = { }

{} 里面数据的组成格式: 键值对 , 键和值之间用冒号,每一个键值对之间用 逗号 间隔, 所有的键必须用 双引号引起来。

键对应的值 可以是任意类型

例如:

var j = { "name": "小明" , "age":18 , "tel":"13999999999" }

json对象的操作:

赋值:

定义时直接赋值

动态为json对象赋值 j.addr = "beijing";

取值:

json对象.键名

json对象["键名"]

json对象的遍历 : for...in

欢迎大家持续关注。号内有多个专题,小程序(持续更新中),Javascript(持续更新),Vue(视频)等学习资源。觉得有收获的可以收藏关注,欢迎骚扰,一起学习,共同进步。

我的小程序,自律更自由,如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。

一只喜欢锻炼的程序猿,嘿嘿。

你都看到这了,不点个关注就过分了哈~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容