事件DOM Event

更多事件请查询h3c htmldom参考手册 event

onclick() ：当点击时

onfocus() ：获得焦点时；当点击某个区域时触发，如点击输入框

onblur() ：失去焦点时

onmouseover 鼠标经过时,触发

onload事件是当网页加载完后发挥作用；注意如果加载外网的图片也要加载完之后才生效

onsubmit() ：提交事件，点击提交按钮的时候触发；阻止提交要return

使用检查表单提交数据是否合法，直接在浏览器内完成，提交到服务器远浪费资源

行为结构样式分离

行为结构样式分离即是把行为和样式分开不写在一条语句中，如上图是合在一起。样式分离则把CSS写成内联样式或者外联样式

换个角度来看 onclick也可以看做div的一个属性，因为写在div里面

this指向调用者，如php中

有时候你仅仅开发html，CSS是被另外的人进行写的，因此你不知道太多CSS的具体样式.

事件对象 duixiangshijain.html

事件发生的瞬间，发生的位置，时间，鼠标点击键位，触发的节点等信息，被打包成一个对象，此对象系统自动传递给事件函数的第一个参数（即是你调用的函数）

target 事件属性可返回事件的目标节点，比如某个表格

实战：碰不到的美女

事件委托

把事件的处理委托给上级进行处理，关键属性target属性

实战五子棋

正则表达式验证邮箱

^ : 表示从字符串开始的地方就验证

$ : 表示结束检测

/w : 匹配所有的数字和字母以及下划线

利用正则寻找邮箱

exec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

高级

函数嵌套：分析的时候从外到内分析。执行从内到外找

具体步骤:

0: 函数运行前的1瞬间, 生成 Active Object (活动对象),下称AO

1.1 函数声明的形参,形成AO的属性,值全是undefined,

1.2 接收实参,形成AO相应的属性的值

2: 分析变量声明! 如 var age,

如果AO上还没有age属性,则添加AO属性,值是undefined

如果AO上已经有age属性,则不操作；变量赋值是在执行期执行

3: 分析函数声明,如 function foo() {},

则把函数赋给AO.foo属性

注: 如果此前foo属性已存在,则被覆盖成函数

先在里层寻找该参数，如果没有再一直往外找，直到找到为止

如果有多个相同的值，去最近的；注意函数的嵌套里层的函数需要被调用才能执行行

var是在函数的上下文中声明变量，

如果没有加var只是一个赋值操作，

函数之外的范围就被称作window了，也就是全局

console.log(d); //表示在控制台输出d变量

一旦执行到某个地方有错后面的代码不再执行即是直接退出程序，一般会在控制台输出错误信息

arguments

是函数运行时形成的实参列表，是一个对象，类似数组对象。不是数组。索引从0开始

arguments.length 获取实参的个数。每个函数都有自身的arguments，不能被外部引用

callee作用是代表当前运行的函数，在匿名函数的时没名字还要进行递归这是就能使用

如 n + t(n-1) à n + arguments.callee(n-1);

typeof

函数运行其内,关键的三个对象

AO ---> 本函数AO上没有某属性,则继续去外层函数的AO上找,直到全局对象. 叫做作用域链

arguments ---> 每个函数有自己的callee,但不向外层接着找arguments的相关属性,即不形成链

this

1:作为普通函数来调用时,

this的值指向->window,相当它

准确的说,this为null,但被解释成window

在ECMASCRIPT5标准中, 如果this为null,则解释成undefine*/

2: 作为对象的方法来调用

this指向方法的调用者,即该对象。作为方法调用时,

this指向其调用那一刻的调用者,即母体对象。不管被调用函数,声明时属于方法,还是函数

3:函数作为构造函数调用时

JS没有类的概念，常见对象是用构造函数来完成的，或者直接使用json格式来写对象

new Dog发生了以下几个步骤

系统创建空对象 à 把函数的this指向空对象 à 执行函数 à 返回该对象

4：函数通过call（对象，参数）

t函数的this指向当前对象；然后运行t函数

闭包问题

闭包维护一个别人污染不到的变量

1:在大部分的语言中,t1被调用执行,则申请内存

并把其局部变量,push入栈!

t1函数执行完毕,内部的局部变量,随着函数的退出而销毁

因此, age = 20的局部变量,依靠已经消失了.

在js中, age = 20这个变量,却被t2捕捉,

即使t1执行完毕,通过t2,依然能访问该变量

这种情况---返回的函数,并非孤立的函数,甚至把其周围的变量环境,

形成了一封闭的"环境包",共同返回, 所以叫"闭包"

----一句话概括-----函数的作用域取决于声明时,而不取决于调用时

JS对象的特点

在js中,有对象,没有类(但有构造函数), JS中的对象,不依赖于类而存在,

支持任意添加和删除属性, 方法和属性不必区分.

JS封装

通过闭包来完成js面向对象的私有属性与封装

关于JS继承与原型链的问题

每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。

老虎先在自己的对象找爬树方法，没有，再去原型中找（原型从cat函数返回的对象中克隆得到）发现有则调用。如果没有就继续往上一级原型找

原型链：对象à原型à原型原型àObject对象àNull

所以只要修改上游的原型就会影响下游，如Object.prototype.sing = ‘’；

还能直接修改属性，tiger.prototype.bark = function() {alert(‘我是老虎！’);}

每个对象,都有一个__proto__指向其原型对象,如hnhu对象有一个__proto__指向其原型对象。原型对象也是对象故也有__proto__ 指向其原型对象

console.log(hnhu);得到

原型冒充与复制继承

好处：不会影响原型链，下游不影响

原型冒充

在用Tiger造对象时,在Tiger影响空对象前,先用要继承的函数即是由Cat函数实施影响

因此,最终得到的对象,是由Cat和Tiger两者共同作用过的对象（具有Cat对象的特性）

复制继承

多态模拟

多态传实参的时候必须为对应的对象类型，变继承之后，父类作为形参，只要传子类也可，多态

绑定事件

绑定事件的方式

1、直接写在html标签中：几乎所有浏览器都支持，但是不简洁没分离，效率低

2、 addEventListener 进行绑定

参数解析：

1: 绑在哪个事件上? click,load,change,blur,focus,mouseover,mouseup.等(没on)

2: 绑定什么函数---自定义事件函数

3: 什么方式监听执行事件函数? 捕捉,冒泡?

详解第三个参数

第三个参数默认为false，表示冒泡模型，即是多个触发事件的时候执行顺序是从里层开始执行到外层

true，表示捕抓模型，

如： 3个div,从大到小，分别命名为china,bj,hd，并添加点击事件

图解原因

红色为捕抓从最大的找要执行的事件；绿色为冒泡

经验之把经常重复的语句封装到一个方法

事件停止 removeEventListener

实战三级联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">

<head>

<title>新建网页</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="description" content="" />

</head>

<body>

    <select name="" id="pro">

        <option value="-1">请选择</option>

        <option value="0">广东</option>

        <option value="1">江苏</option>

    </select>

    <select name="" id="ct" ></select>

    <select name="" id="cty"></select>

</body>

<script>

    var area = [

                ['广州','珠海'],

                ['南京','苏州']

    ];

    var area2 =  [

                [['花都','番禺'],['香洲','斗门']],

                [['江宁','栖霞'],['吴中','吴江']]

    ];

    var dprovince = document.getElementById('pro');

    var dcity = document.getElementById('ct');

    var dcounty = document.getElementById('cty');

    dprovince.onchange = function(){

        //注意放在里面每次初始化清空

        var opt = '';

        if (this.value == '-1'){

            darea.innerHTML = opt;

            //dcounty.innerHTML = opt;

        }

        var len = area[dprovince.value].length;

        for (var i = 0; i < len ; i++){

            opt = opt + '<option value ="' + i + '">' + area[this.value][i] + '</option>';

        }

        dcity.innerHTML = opt;

        var opt2 = '';

        var len2 = area2[this.value][0].length;

        for (var i = 0; i < len2 ; i++){

            opt2 = opt2 + '<option value ="' + i + '">' + area2[this.value][0][i] + '</option>';

        }

        dcounty.innerHTML = opt2;

    }

        //

        dcity.onclick = function (){

            var opt2;

            var len2 = area2[dprovince.value][dcity.value].length;

            for (var i = 0; i < len2 ; i++){

                opt2 = opt2 + '<option value ="' + i + '">' + area2[dprovince.value][dcity.value][i] + '</option>';

            }

            dcounty.innerHTML = opt2;

        }

</script>

</html>

因为多了个空格导致获取的value值有问题，然而我用了一个下午排错，日了狗，空格真的很难找出错误，所以以后变成不必要的空格别用

头像修改

this作用是表示当前函数执行所在的标签对象

JS基础（下）的更多相关文章

js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首 ...
js 基础
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
JS基础（超级简单）
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
JS基础知识总结
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
js基础知识总结（2016.11.1）
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
Three.js基础
Three.js基础探寻一 Three.js基础探寻一 1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...
Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...

随机推荐

通过总线机制实现自动刷新客户端配置(Consul,Spring Cloud Config,Spring Cloud Bus)
通过总线机制实现自动刷新客户端配置方案示意图利用Git服务的webhook通知功能,在每次更新配置之后,Git服务器会用POST方式调用配置中心的/actuator/bus-refresh接口,配 ...
java_第一年_JavaWeb（14）
EL :EL表达式主要用于获取数据.执行运算.获取对象.调用java方法: 获取数据语法:"${标识符}" 会调用pageContext.findAttribute方法,从pag ...
【洛谷p3958】奶酪
奶酪[题目链接] 题前废话不知道说啥了啊qwq(越来越沉默寡言) 好了看题: SOLUTION: 思路的话,大概是搜索,然后大概广搜??? 但是我们今天写深搜(也是听xcg大佬讲了以后的整理博) 首先 ...
十二、支持向量机(Support Vector Machines)
12.1 优化目标参考视频: 12 - 1 - Optimization Objective (15 min).mkv 到目前为止,你已经见过一系列不同的学习算法.在监督学习中,许多学习算法的性能都 ...
Codeforces Manthan, Codefest 19 (open for everyone, rated, Div. 1 + Div. 2)
传送门 A. XORinacci 手玩三四项发现序列就是 $a,b,a\ xor\ b,a,b,...$,直接输出即可 #include<iostream> #include<cst ...
P3188 [HNOI2007]梦幻岛宝珠
传送门注意到 $a,b$ 不大考虑对每一个 $a*2^b$ 的 $b$ 分别背包设 $f[i][j]$ 表示只考虑 $b=i$ 的物品时,容量为 $j= \sum a$ 的最大价值这个就是普通 ...
ofbiz idea 启动
1.下载gradle并安装到本地 2.idea引入gradle 3.gradle右键选择refresh,项目会重新编译并加载gradle的task 4.可以再编译一下 5.没问题的话打开,jar ap ...
javascript（DOM）实例
JavaScript学习笔记 JS补充笔记实例之跑马灯,函数创建.通过ID获取标签及内部的值,字符串的获取与拼接.定时器的使用使用定时器实现在console中打印内容 Dom选择器使用与调试记录 ...
ffmpeg的中文文档
1. 概要 ffmpeg [global_options] {[input_file_options] -i INPUT_FILE} ... {[output_file_options] OUTPUT ...
python面向对象---用函数实现面向对象原理
类的定义:一个抽象的概念,保存一些共有的属性和特征 #对象:对象代表具体事物的特征功能,是类的实例 #面向对象程序设计通过函数实现面向对象设计 def dog(name,type,gender): ...

JS基础（下）