事件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环境下运行 ...

随机推荐

Codeforces 979D (STL set)(不用Trie简单AC)
题面: 传送门题目大意: 给定一个空集合,有两种操作: 一种是往集合中插入一个元素x,一种是给三个数x,k,s,问集合中是否存在v,使得gcd(x,v)%k==0,且x+v<=s若存在多个满足 ...
HCL AppScan Standard 9.0.3.13
https://pan.baidu.com/s/1mh97vyJdWy1CmF589jZJhQ 网盘密码: q31g / 压缩密码:shungg.cn http://www.shungg.cn/pos ...
年月日联动select下拉菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
【JAVA】Java 异常中e的getMessage()和toString()方法的异同
参考链接 CSDN: Java 异常中e的getMessage()和toString()方法的异同示例代码1: public class TestInfo { private static ...
vue - 过滤器filter的基本使用
1.全局过滤器输出: 过滤器可以多次来调用输出: 2.私有过滤器 <!DOCTYPE html> <html lang="en"> <head&g ...
File基本操作
File (1)File是文件和目录路径名的抽象表示.IO流操作中大部分都是对文件的操作,因此Java就提供了File类供我们来操作文件. (2)构造方法根据一个路径得到一个File对象 ...
解析安装mysql
大多数人在结束咱们前面学习的基础知识的时候,其实一脸懵逼,不过我们已经开始步入了另一个新的高度,针对基础知识还是必须巩固针对性的进行补充,可以分模块总结:比如基础知识的数据结构---->函数-- ...
使用GDB调试产生多进程的程序
如果一个进程fork了多个进程,这时使用GBD工具对程序进行调试会如何呢? 实际上,GDB 没有对多进程程序调试提供直接支持.例如,使用GDB调试某个进程,如果该进程fork了子进程,GDB会继续调试 ...
java 简单工厂&抽象工厂
工厂模式:就是提供一个实例化对象的接口,让子类去决定实现哪个具体对象 1:简单工厂 public abstract class Person { } public class XiaoLi exten ...
【leetcode】449. Serialize and Deserialize BST
题目如下: Serialization is the process of converting a data structure or object into a sequence of bits ...

JS基础（下）