JS DOM笔记（包含一些其他笔记主要是DOM）_disabled="disabled" autocomplete="off-CSDN博客

本文链接：https://blog.csdn.net/m0_49378755/article/details/120399406

CSS

文本

text-transform：none； 默认。定义带有小写字母和大写字母的标准的文本。

**text-transform：capitalize ；**文本中的每个单词以大写字母开头。

**text-transform：uppercase ；**定义仅有大写字母。

text-transform：lowercase； 定义无大写字母，仅有小写字母。

**text-transform：inherit ；**规定应该从父元素继承 text-transform 属性的值。

letter-spacing: 1em; 字母与字母之间的间隔

word-spacing 单词之间的间距

font-style: normal | italic | oblique 正常倾斜斜体

font-variant : normal | small-caps 小写字母变成小型大写字母

text-decoration : underline | overline | line-through | blink | none 下划线上划线贯穿线闪烁（有兼容性）

禁止文本域输入disabled=“disabled”

<textarea id="matchingResult" class="textbox" disabled="disabled"></textarea>

autocomplete=“off” input 不提示

outline:none; input 外边框

常用

objs[i].checked=true的意思就是该input元素的checked的值是true，就是该input被选中
objs[i].checked=false的意思就是该input元素的checked的值是false，就是该input不被选中

ss.οnclick=function(){} 提示只要是用点的地方都可以换成[] 例如： ss[“onclick”]=function(){}

名称.length

prompt() 可以输入值得弹窗

.offsetHeight 获取当前元素的高

document.write(“内容”) 向浏览器输入内容

alert()

var a=new Date().getDay(); 获取星期返回值（0-6）

arguments[] 如果函数中没有写接收的名称可以用argumens[]接收

typeof() 可以打印查看变量的类型

console.log(); 打印在控制台中

.nodeType 查看节点类型

toLocaleUpperCase 将字符串中所有的字母字符都将被转换为大写的，同时适应宿主环境的当前区域设置。

.toUpperCase 将字符串中的所有字母都被转化为大写字母。

.toLocaleLowerCase 将字符串所有的字母字符都被转换为小写，同时考虑到宿主环境的当前区域设置。

.toLowerCase 将字符串中的字母被转换为小写字母。

filter

let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
// item 值, index 当前值的下标, array整个数组
a.filter((item, index, array) => {
    console.log(item, index, array)
})

for in 和 for of 的区别

1.循环数组

区别一：for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。

const arr = [1,2,3,4]
 
// for ... in
for (const key in arr){
    console.log(key) // 输出 0,1,2,3
}
 
// for ... of
for (const key of arr){
    console.log(key) // 输出 1,2,3,4
}

2.循环对象

区别二：for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array

const object = { name: 'lx', age: 23 }
// for ... in
for (const key in object) {
    console.log(key) // 输出 name,age
    console.log(object[key]) // 输出 lx,23
}

// for ... of
for (const key of object) {
    console.log(key) // 报错 Uncaught TypeError: object is not iterable
}

3.数组对象

const list = [{ name: 'lx' }, { age: 23 }]
for (const val of list) {
    console.log(val) // 输出{ name: 'lx' }, { age: 23 }
    for (const key in val) {
        console.log(val[key]) // 输出 lx,23
    }
}

js 判断数据类型的几种方法

//  object
    console.log(typeof null)
    console.log(typeof {})
    console.log(typeof [])
    console.log(typeof new Date())

// number
    console.log(typeof NaN)
    console.log(typeof 3)

// function
    console.log(typeof function () { })
    console.log(typeof Object)
    console.log(typeof Number)
    console.log(typeof String)

// undefined
	console.log(typeof undefined)

判断js中的数据类型有一下几种方法：

typeof
instanceof
constructor
prototype
$.type()/jquery.type()

var a = "iamstring.";
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name="22";};　

//1、最常见的判断方法：typeof
alert(typeof a)  ------------> string
alert(typeof b)  ------------> number
alert(typeof c)  ------------> object
alert(typeof d)  ------------> object
alert(typeof e)  ------------> function
alert(typeof f)  ------------> function

//其中typeof返回的类型都是字符串形式，需注意，例如：
alert(typeof a == "string") -------------> true
alert(typeof a == String) ---------------> false
//另外typeof 可以判断function的类型；在判断除Object类型的对象时比较方便。

//2、判断已知对象类型的方法： instanceof
alert(c instanceof Array) ---------------> true
alert(d instanceof Date)
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
alert(c instanceof Array) ---------------> true
alert(d instanceof Date)
alert(f instanceof Function) ------------> true
alert(f instanceof function) ------------> false
//注意：instanceof 后面一定要是对象类型，并且大小写不能错，该方法适合一些条件选择或分支。

//3、根据对象的constructor判断： constructor
alert(c.constructor === Array) ----------> true
alert(d.constructor === Date) -----------> true
alert(e.constructor === Function) -------> true
//注意： constructor 在类继承时会出错

//4、通用但很繁琐的方法： prototype
alert(Object.prototype.toString.call(a) === ‘[object String]') -------> true;
alert(Object.prototype.toString.call(b) === ‘[object Number]') -------> true;
alert(Object.prototype.toString.call(c) === ‘[object Array]') -------> true;
alert(Object.prototype.toString.call(d) === ‘[object Date]') -------> true;
alert(Object.prototype.toString.call(e) === ‘[object Function]') -------> true;
alert(Object.prototype.toString.call(f) === ‘[object Function]') -------> true;
//大小写不能写错，比较麻烦，但胜在通用。

//5、无敌万能的方法：jquery.type()
//如果对象是undefined或null，则返回相应的“undefined”或“null”。
jQuery.type( undefined ) === "undefined"
jQuery.type() === "undefined"
jQuery.type( window.notDefined ) === "undefined"
jQuery.type( null ) === "null"

jQuery.type( true ) === "boolean"
jQuery.type( 3 ) === "number"
jQuery.type( "test" ) === "string"
jQuery.type( function(){} ) === "function"
jQuery.type( [] ) === "array"
jQuery.type( new Date() ) === "date"
jQuery.type( new Error() ) === "error" // as of jQuery 1.9
jQuery.type( /test/ ) === "regexp"
//其他一切都将返回它的类型“object”。
//通常情况下用typeof 判断就可以了，遇到预知Object类型的情况可以选用instanceof或constructor方法,实在没辙就使用$.type()方法。

获取宽高

元素尺寸属性	说明
clientWidth	获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
clientHeight	获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域
offsetWidth	元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度
offsetHeight	元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度
scrollWidth	当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域
scrollHeight	当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域

set类型数据

set数据不能重复

方法

new Set()	创建新的 Set 对象。
add()	向 Set 添加新元素。
clear()	从 Set 中删除所有元素。
delete()	删除由其值指定的元素。
entries()	返回 Set 对象中值的数组。
has()	如果值存在则返回 true。
forEach()	为每个元素调用回调。
keys()	返回 Set 对象中值的数组。
values()	与 keys() 相同。
size	返回元素计数。

// 创建 Set
const letters = new Set();
// 向 Set 添加一些值
letters.add("a");
letters.add("b");
letters.add("c");

// 创建新的 Set
const letters = new Set(["a","b","c"]);
typeof letters;      // 返回 object。
letters instanceof Set;  // 返回 true

特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

1.+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
2.undefined 与 undefined 是恒等的，所以不重复；
3.NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

常见用法

// 转为数组
const set =  new Set(['welcome',  'you','!']); 
console.log(set);                              //   Set(3) { 'welcome', 'you', '!' }
console.log(Array.from(set))                   // [ 'welcome', 'you', '!' ]
console.log([...set])                          // [ 'welcome', 'you', '!' ]


// 循环遍历
let mySet = new Set([1, 2, 3]);
 for(let item of mySet) {
    console.log(item);
 }
 // 1
 // 2
 // 3
 
 // 返回键名
 for(let item of mySet.keys()) {
   console.log(item); 
 }
 // 1
 // 2
 // 3
  
 // 返回键值
 for(let item of mySet.values()) {
   console.log(item); 
 }
 // 1
 // 2
 // 3
 
 // mySet 键名=键值
 // 返回键值对
 for(let item of mySet.entries()){
   console.log(item); 
 }
 // [1, 1] 
 // [2, 2]
 // [3, 3]

map类型数据

常见用法

var map1=new Map();
//插入
map1.set("1","1");
map1.set("2","2");
//取值
map1.get("1");
//是否包含
map1.has("1")
//删除
map1.delete("1");


const m=new Map([["key1","val1"],["key2","val2"],["key3","val3"]]);
console.log([...m])   //[["key1","val1"],["key2","val2"],["key3","val3"]]
console.log(Array.from(m))   //[["key1","val1"],["key2","val2"],["key3","val3"]]



const m=new Map([["key1","val1"],["key2","val2"],["key3","val3"]]);
m.forEach((val,key)=>{
    alert(`${key}->${val}`)
});
//key1->val1
//key2->val2
//key3->val3



const m=new Map([["key1","val1"],["key2","val2"],["key3","val3"]]);
for (let key of m.keys()){
  alert(key) ;
}
//key1
//key2
//ket3

for (let key of m.values()){
  alert(key) ;
}
//value1
//value2
//value3

防抖与节流

// 防抖
function fangDou(fn, time) {
    let setTime = null;
    return function () {
        if (setTime !== null) { clearTimeout(setTime) }
        setTime = setTimeout(() => {
            fn.call(this)
        }, time);
    }
}

// 节流
function jieLiu(fn, time) {
    let timeout = null;
    return function () {
        if (!timeout) {
            timeout = setTimeout(() => {
                fn.call(this)
                timeout = null
            }, time);
        }
    }
}

查看对象上是否有该属性hasOwnProperty

let obj = {
    name:'张睿',
    age:18,
    eat:{
        eatname:'面条',
        water:{
            watername:'农夫山泉'
        }
    }
}
console.log(obj.hasOwnProperty('name')) //true
console.log(obj.hasOwnProperty('age'))  //true
console.log(obj.hasOwnProperty('eat'))  //true
console.log(obj.hasOwnProperty('eatname'))  //false
console.log(obj.hasOwnProperty('water'))  //false
console.log(obj.hasOwnProperty('watername'))  //false
console.log(obj.eat.hasOwnProperty('eatname'))  //true
console.log(obj.eat.hasOwnProperty('water'))  //true
console.log(obj.eat.hasOwnProperty('watername'))  //false
console.log(obj.eat.water.hasOwnProperty('watername'))  //true

数值

Number() 强制转换为number
parseInt() 把字符串转换为number 如72px，会提取为72 ab67，会返回NaN
parseFloat() 转换为浮点型如7.21px 结果：7.12 4.21.21aa 结果：4.21
Math.ceil() 向上取整。正数：有小数，舍弃小数，整数就加1。负数：就舍弃小数部分，取整数部分
Math.floor() 向下取整。正数：舍弃小数，只要整数部分。负数：有小数，舍弃小数，整数减1
Math.abs() 取绝对值。正数就是本身，负数取反
Math.round() 四舍五入。正数：第一位小数大于5，则整数加1，反之取整数。负数：第一位小数大于5，则取整数，反之整数减1

var a=-4.1;
alert(Math.ceil(a)) //弹框值-4

var a=4.1;
alert(Math.ceil(a)) //弹框值5

var b=-4.9;
alert(Math.floor(b)) //弹框值-5

var b=4.9;
alert(Math.floor(b)) //弹框值4

var c=-4.5;
alert(Math.round(c)) //弹框值-4

var c=4.5;
alert(Math.round(c)) //弹框值5

var d=-7;
alert(Math.abs(d)) //弹框值7

数组

Push(“输入添加内容”) 从数组最后一项开始添加可以添加多个用逗号隔开

Pop() 删除数组最后一个数据

Unshift() 从数组开头开始添加内容

Shift() 删除数组的第一位

数组名.join() 把数组名的所有数据转换为字符串默认使用逗号隔开如果是join(“”)是连在一起的，（“-”）是把每个元素用-隔开

数组名.resever() 用于颠倒数组的数据

数组名.sort() 排序默认是按字符串排序数字排序需要加function 例如：数组名.sort(function (a,b){return a-b});升序 b-a降序

数组名.slice(a,b); 显示数组中某一段的数据。a代表的是开始的下标b代表的是结束的下标

数组名.splice() 数组的删除，插入，替换例如：a.splice(2,2) 表示从a[2]开始删除两项如果第二项为零则不删除 splice(1,0,’m’,9) 表示在a[1]的前面添加’m’和9 （1,2,4,5）表示把a[1],a[2]的内容替换为4和5

数组名.indexOf(5) 查找5在数组的位置（下标），indexOf(5,4)表示从a[4]开始查找5的位置查找不到返回 -1 还有lastindexOf() 从末尾开始查找

 // 不会影响原数组
        let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
        // item 值, index 当前值的下标, array整个数组
        let b = a.filter((item, index, array) => {
            console.log(item, index, array)
        })

forEach

 // 没有返回值   不能写break;
        let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

        a.forEach((item) => {
            console.log(item)
        })

map

// 不会影响原数组
        let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

        let b = a.map((item, key) => {
            return item + "xx"
        })

        console.log(a)
        console.log(b)

字符串

变量名.toString()

charAt() 查找指定位置的值，如：a=”abcde”; a.charAt(2) 结果为：c 如果没有找到返回为：空

charCodeAt() 查找指定位置的值的编码，如：a=”abcde”; a.charAt(2) 结果为：“c的编码” 如果没有找到返回为：空

slice() 截取字符串的内容 (2,5) 截取的是 a[2]到a[4] 例如var a=”abcdefghij”; a.slice(1,3) a=”bc” a.slice(-6,7) 等价于（字符长度+负数，7）结果为 a=”efg” (-9,-2) 相当于 (1,8)

substring() 和slice 一样只不过会把负数转换为0，系统会把数值较小的值当做开头

substr() 和slice一样不过她的第二个值是截取位数，如果第一位是负数则会用总数+负数来计算，第二个如果是负数什么也截取不到

split() 将字符串转换为数组前提是内容有分隔符，如2021\06\05 b=a.split(“\”); b=[‘2021’,’06’,’05’]; 但是不会改变原来的值

replace() 替换字符串的某些值如 a=”ab,cd.f” b=a.replace(‘,’ , ’c’) b=”abcd,f” 只能替换第一个出现的且不会更改原来的值

toUpperCase() 将字符串转换为大写不会改变原值

toLowerCase 将将字符串转换为小写不会改变原值

数值类操作

Math.min(); 取最小值

Math.max(); 取最大值

Math.ceil(); 向上取整

Math.floor(); 取整。舍弃小数点后的数字

Math.round(); 四舍不入

Math.abs(); 取绝对值

Math.random(); 返回大于等于0小于1的一个随机数。

       var random=Math.random();
       console.log(random);
       // 生成一个n到m之间的随机整数
       function getRandom(n,m){
          var choise=m-n+1;  // 随机整数的个数
          return Math.floor(Math.random()*choise+n);
       }
       var random1=getRandom(2,6);
       var random2=getRandom(10,88);

DATA

用之前必须创建对象 var today=new Date();

getMonth() 返回值为 0-11 0表示1月。

getDay() 返回值为0-6 0表示星期日。

getTime() 返回日期的毫秒数表示的是从1970年1月1日 00:00:00开始到现在的时间的毫秒数

// 创建一个日期时间对象
let today = new Date()
const weeks = ["日", "一", "二", "三", "四", "五", "六"]
let year = today.getFullYear()
let month = today.getMonth() + 1
let day = today.getDate()
let week = today.getDay()
let hours = today.getHours()
let minutes = today.getMinutes()
let seconds = today.getSeconds()
let times = today.getTime()
let TZ = `${year}年${month}月${day}日, ${hours}:${minutes}:${seconds} 星期${weeks[week]}，时间戳：${times}`
console.log(TZ)  //2022年9月18日, 18:50:25 星期日，时间戳：1663498225086

        // 创建一个日期时间对象
        var today=new Date();
        //today.setFullYear(2017);
        //today.setMonth(15);
        //console.log(today.getFullYear());
        //  50天之后是星期
        // 第一种做法
        //today.setDate(today.getDate()+50);
        //console.log(today.getDay());
        // 第二种做法
        var weeks=["日","一","二","三","四","五","六"];
        var year=today.getFullYear();
        var month=today.getMonth();
        var day=today.getDate();
        // 创建了一个目标日期对象,年,月,日,时,分,秒
        var temp=new Date(year+1,month,day);
        console.log("50天后的今天是："+temp.getFullYear()+'-'+(temp.getMonth()+1)+'-'+temp.getDate()+'-'+'星期'+weeks[temp.getDay()]);

错误调试与处理

		function getUserInput(msg){
			var input=prompt(msg);
			var parsed=parseInt(input);
			if(parsed!=parsed){//parsed为NaN
				return input;
			}else{
				return parsed;
			}
		}
		function multiple(a,b){
			if((typeof a!="number")||(typeof b!="number")){
				throw new Error("arguments should all be number!");
			}
			return a*b;
		}
		var c;
		var a=getUserInput("请输入一个数");
		var b=getUserInput("请再输入一个数");
		try {
			c=multiple(a,b);
			alert("它们的乘积是"+c);
		}catch(e){
			alert("请输入两个数字");
		}
		try {//如果内部的代码抛出错误，则代码直接跳入catch块运行，且把
			//错误对象赋值给catch括号内的变量
			var x=null;
			console.log(x.foo);
		}catch(e){
			console.log(e);
		}finally{
			//做一些请理性的工作
			//finally块是一定会执行的
		}
		function foo(){
			try{
				throw new Error();
			}catch(e){
				return 1;
			}finally{
				return 2;
			}
		}
		foo();
		function bar(){
			try {
				if(
			}catch(e){

			}finally{
				
			}
		}

DOM

document.getElenmentById('‘box’) 通过id得到元素节点，注意不要加‘#’。如果页面上有多个id为box的他只能得到第一个

getElementsByTagName() 通过标签名得到节点数组

getElementsByClassName(‘aaa’); 通过类名得到节点数组不要写点

querySelector(‘#box .aa’); 通过选择器得到元素，如果有相同的只能获取第一个，注意得加上 #或者. 。例如：

    <div id="box">
        <p>我是段落</p>
        <p class="spec para">我是段落</p>
        <p>我是段落</p>
    </div>
    <script>
        var the_p = document.querySelector('#box p:nth-child(1)');
        console.log(the_p);
    </script>

querySelectorAll(‘#a li’); 通过选择器得到符合要求的所有的元素成为数组。

节点类型

.nodeType 查看节点类型

nodeType值	节点类型
1	元素节点，例如和
3	文字节点
8	注释节点
9	document节点
10	DTD节点

延迟运行

在测试DOM代码时，通常JS代码一定要写到HTML节点的后面，否则JS无法找到相应的HTML节点
可以使用window.οnlοad=function(){}事件，使页面加载完毕后，在执行指定的代码

节点的关系（重要）

关系	考虑所有节点	只考虑元素节点
父节点	parentNode	children
子节点	childNodes	同
第一个子节点	firstChild	firstElementChild
最后一个子节点	lastChild	lastElementChild
前一个兄弟节点	previousSibling	previousElementEibling
后一个兄弟节点	nextSlblIng	nextElementSibling

<div id="box">
        <p>我是段落A</p>
        <p id="para">我是段落B</p>
        <p>我是段落C</p>
</div>

    <script>
        var box = document.getElementById('box');
        var para = document.getElementById('para');

        // 所有子节点
        console.log(box.childNodes);
        // 所有的元素子节点（IE9开始兼容）
        console.log(box.children);
        
        // 第一个子节点
        console.log(box.firstChild);
        console.log(box.firstChild.nodeType);
        // 第一个元素子节点（IE9开始兼容）
        console.log(box.firstElementChild);
        
        // 最后一个子节点
        console.log(box.lastChild);
        console.log(box.lastChild.nodeType);
        // 最后一个元素子节点（IE9开始兼容）
        console.log(box.lastElementChild);

        // 父节点
        console.log(para.parentNode);
        
        // 前一个兄弟节点
        console.log(para.previousSibling);
        // 前一个元素兄弟节点（IE9开始兼容）
        console.log(para.previousElementSibling);
        
        // 后一个兄弟节点
        console.log(para.nextSibling);
        // 后一个元素兄弟节点（IE9开始兼容）
        console.log(para.nextElementSibling);
    </script>

封装常用函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p id="fpara">我是段落fpara</p>
        我是文本
        <!-- 我是注释 -->
        <p id="para">
            我是段落para
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </p>
        <p>我是段落</p>
        <p>我是段落</p>
        <p>我是段落</p>
    </div>

    <script>
        var box = document.getElementById('box');
        var para = document.getElementById('para');
        var fpara = document.getElementById('fpara');

        // 封装一个函数，这个函数可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
        function getChildren(node) {
            // 结果数组
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
            // 如果是1，就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }

        console.log(getChildren(box));
        console.log(getChildren(para));

        // 封装一个函数，这个函数可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            // 使用while语句
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }

                // 让o成为它的前一个节点
                o = o.previousSibling;
            }
            return null;
        }

        console.log(getElementPrevSibling(para));
        console.log(getElementPrevSibling(fpara));

        // 封装第三个函数，这个函数可以返回元素的所有元素兄弟节点
        function getAllElementSibling(node) {
            // 前面的元素兄弟节点
            var prevs = [];
            // 后面的元素兄弟节点
            var nexts = [];
            
            var o = node;
            // 遍历node的前面的节点
            while(o.previousSibling != null) {
                if(o.previousSibling.nodeType == 1){
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }

            o = node;

            // 遍历node的后面的节点
            while(o.nextSibling != null) {
                if(o.nextSibling.nodeType == 1){
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            // 将两个数组进行合并，然后返回
            return prevs.concat(nexts);
        }

        console.log(getAllElementSibling(para));
    </script>
</body>

</html>

节点获取body

document.body

改变元素节点的内容

.innerHTML

.innerText

<div id="box"></div>

    <script>
        var oBox = document.getElementById('box');
        
		// 会在div里面显示 列表的样式
        oBox.innerHTML = '慕课网';
        oBox.innerHTML = '<ul><li>牛奶</li><li>咖啡</li></ul>';
		
		//原样输出
        oBox.innerText = '慕课网';
        oBox.innerText = '<ul><li>牛奶</li><li>咖啡</li></ul>';
    </script>

改变元素节点样式

节点名称.CSS样式=’ '; 注意CSS样式要写成驼峰式，一定要写单位；图片一定要写url()

<div class="box" id="box">
        你好
    </div>

    <script>
        var oBox = document.getElementById('box');

        oBox.style.backgroundColor = 'rgb(100, 200, 123)';
        oBox.style.backgroundColor = '#f80';

        oBox.style.backgroundImage = 'url(https://www.imooc.com/static/img/index/logo-recommended.png)';
        oBox.style.backgroundSize = 'contain';

        oBox.style.fontSize = '50px';

改变元素节点的标准HTML属性

标准的直接打点就可以如：oImag.src=‘images/2.jpg’;

<img src="images/1.jpg" id="pic">
    <a href="http://www.baidu.com" id="link">
        去百度
    </a>

    <script>
        var oPic = document.getElementById('pic');
        var oLink = document.getElementById('link');

        oPic.src = 'images/2.jpg';
        
        oLink.href = 'http://www.imooc.com';
        oLink.innerText = '去慕课网';
    </script>

改变元素节点的非标准HTML属性

节点名称.setAttribute(‘data-n’,10); 就会在指定的元素内出现 data-n=“10” 。

节点名称.getAttribute(‘data-n’); 会获取data-n的值

<div id="box"></div>

    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);
        
        var n = box.getAttribute('data-n');
        alert(n);
    </script>

创建节点

document.createElement(‘p’); 创建节点给指定位置添加
标签成为“孤儿节点” 还得让孤儿节点上树，有两种方法 ↓
父节点.appendChild(孤儿节点); 上树就会在父节点里面创建指定元素，会在父节点的最后位置添加
父节点.insertBefore(孤儿节点,标杆节点); 他会在标杆节点的前面创建此孤儿节点

	<div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox =document.getElementById('box');
        var oPs = oBox.getElementsByTagName('p');

        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        
        // 上树
        oBox.appendChild(oP);
        oBox.insertBefore(oP, oPs[0]);
    </script>

移动节点

原理一个节点不能同时位于DOM树的两个位置

<div id="box1">
        <p id="para">我是段落</p>
    </div>

    <div id="box2">
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
        <p>我是box2的原有p标签</p>
    </div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');

        box2.appendChild(para);
        box2.insertBefore(para, ps_inbox2[0]);
    </script

删除节点

父节点.removeChild(要删除字节点);

节点不能主动删除自己，必须由父级删除它。

<div id="box">
        <p>我是p节点0</p>
        <p>我是p节点1</p>
        <p>我是p节点2</p>
    </div>
    
    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];

        box.removeChild(the_first_p);
    </script>

克隆节点

cloneNode(); 克隆出的节点是“孤儿节点” 还得需要appendChild()或者insertBefore(); oBox.appendChild(oP); oBox.insertBefore(oP, oPs[0]);

var 孤儿节点=老节点.cloneNode();

var 孤儿节点=老节点.cloneNode(true);

参数是一个布尔值，表示是否采用深度克隆：如果为true，则该节点的所有后代节点也都会被克隆，如果为false，则只克隆改节点本身。

<div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可乐</li>
        </ul>
    </div>

    <div id="box2"></div>

    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];

        // 克隆节点
        var new_ul = theul.cloneNode(true);
        box2.appendChild(new_ul);
    </script>

DOM事件

鼠标事件

onload：页面加载完成之后立即触发

onclick：鼠标点击时触发

onmouseover：鼠标滑过时触发

onmouseout：鼠标离开时触发

onfocus：获得焦点时触发

onblur：失去焦点时触发

onchange：域的内容改变时发生

onsubmit 表单中的确认按钮被点击时发生是添加到form上使用的不是在表单按钮上添加

onmousedown 鼠标按钮在元素上按下时触发

onmousemove 在鼠标指针移动时发生

onmouseup 在元素上松开鼠标按钮时触发

onresize 当调整浏览器窗口大小时触发

onscroll 拖动滚动条时触发

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .btn{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<input type="button" value="弹 出" onclick="alert('我是按钮')">
	<!--鼠标划过按钮时调用mouseoverFn的函数-->
	<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
	<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
	<script>
        function mouseoverFn(btn,bgColor){
        	// 鼠标划过按钮时，按钮的背景变为红色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }
	</script>
</body>
</html>

DOM0级事件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .btn{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
        .unbtn{width:140px;height:30px;line-height: 30px;background:#666;
       	color:#ccc;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<div class="btn" id="an">锁定</div>
    <script>
        var zong=document.getElementById('an');
        // 第一种方法
        // zong.οnclick=function(){
        //     if (this.innerHTML=='锁定') {
        //         this.className='unbtn';
        //         this.innerHTML='解锁';
        //     } else {
        //         this.className='btn';
        //         this.innerHTML='锁定';
        //     }
        // }

        // 第二种方法   切记调用的时候不能加 “ () ” 加了的话 他会自动执行
        // function ab(){
        //     if (this.innerHTML=='锁定') {
        //         this.className='unbtn';
        //         this.innerHTML='解锁';
        //     } else {
        //         this.className='btn';
        //         this.innerHTML='锁定';
        //     }
        var ab=function(){
        if (this.innerHTML=='锁定') {
            this.className='unbtn';
            this.innerHTML='解锁';
        } else {
            this.className='btn';
            this.innerHTML='锁定';
        }
        }
        zong.onclick=ab;
    </script>
</body>
</html>

onload 页面加载完时触发

window.οnlοad=function(){}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
	   // 页面加载时执行，unload页面卸载
       window.onload=function(){
       	 // 获取box
       	 var box=document.getElementById("box");
       	 var clicked=function(){
       	 	  alert('我被点击了');
       	 }
       	 box.onclick=clicked;
       }
	</script>
</head>
<body>
	<div id="box">这是一个DIV</div>
</body>
</html>

onfocus 获取焦点事件

onblur 失去焦点事件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box{
       	  padding:50px;
       }
       .left,.tip{
       	  float:left;
       }
       .left{margin-right:10px;}
       .tip{display:none;font-size:14px;}
	</style>
	<script>
       window.onload=function(){
       	  // 获取文本框和提示框
       	  var phone=document.getElementById("phone"),
              tip=document.getElementById("tip");
          // 给文本框绑定激活的事件
          phone.onfocus=function(){
          	  // 让tip显示出来
          	  tip.style.display='block';
          }
          // 给文本框绑定失去焦点的事件
          phone.onblur=function(){
             // 获取文本框的值,value用于获取表单元素的值
             var phoneVal=this.value;
             // 判断手机号码是否是11位的数字
             // 如果输入正确，则显示对号图标，否则显示错号图标
             if(phoneVal.length==11 && isNaN(phoneVal)==false){
                tip.innerHTML='<img src="img/right.png">';
             }else{
             	tip.innerHTML='<img src="img/error.png">';
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		<div class="left">
			<input type="text" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="tip" id="tip">
           请输入有效的手机号码
		</div>
	</div>
</body>
</html>

onchange 域的内容发生改变事件，一般作用域select或checkbox或radio

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">	
	<title>Document</title>
	<script>
       // 页面加载
       window.onload=init;

       // 初始化
       function init(){
          // 获取下拉菜单
          var menu=document.getElementById("menu");
          // 给菜单绑定change事件,一般作用域select或checkbox或radio
          menu.onchange=function(){
             // 获取当前选中的值
             //var bgcolor=this.value;
             var bgcolor=menu.options[menu.selectedIndex].value;
             // 如果bgcolor为空，则下面的脚本将不执行
             // if(bgcolor=="")return;
             // 设置body的背景色
             // 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色
             if(bgcolor==""){
                document.body.style.background="#fff";
             }else{
             	document.body.style.background=bgcolor;
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		请选择您喜欢的背景色：
		<select name="" id="menu">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#0f0">绿色</option>
			<option value="#00f">蓝色</option>
			<option value="#ff0">黄色</option>
			<option value="#ccc">灰色</option>
		</select>
	</div>
</body>
</html>

onmousedown 鼠标按下事件

onmousemove 鼠标移动

onmouseup 鼠标松开

onclick 点击

window.onresize 浏览器窗口尺寸发生改变

onscroll 拖动滚动条

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
	</style>
</head>
<body>
	<div class="box" id="box">
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
	</div>
	<script>
       var box=document.getElementById("box");
       // 绑定按下的事件
       box.onmousedown=function(){
       	  console.log("我被按下了");
       }
       // 绑定移动的事件
       box.onmousemove=function(){
       	  console.log("我被移动了");
       }
       // 绑定松开的事件
       box.onmouseup=function(){
       	  console.log("我被松开了");
       }
       // 绑定点击的事件
       box.onclick=function(){
       	  console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.onresize=function(){
       	  console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.onscroll=function(){
       	  console.log("我被拖动了");
       }
       box.onscroll=function(){
       	  console.log("我是DIV的滚动条");
       }
	</script>
</body>
</html>

键盘事件与KeyCode属性

onkeydown 在用户下一个键盘按键时发生

onkeypress 在按下键盘时发生（只会响应字母与数字符号）

onkeyup 在键盘按键被松开时发生

keyCode 返回onkeypress、onkeydown 或 onkeyup 事件触发的键的值得字符代码，或键的代码。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .text span{font-weight:bold;color:#f00;}
       em{font-style:normal;}
       b{font-weight:normal;}
	</style>
</head>
<body>
	<div>
		<p class="text">
			<b id="showcount">您还可以输入</b>
			<span id="totalbox"><em id="count">30</em>/30</span>
		</p>
		<div class="input">
			<textarea name="" id="text" cols="70" rows="4"></textarea>
		</div>
	</div>
	<script>
	   // 获取文本框及其他元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
	   // 绑定键盘事件
	   document.onkeyup=function(){
	   	  // 获取文本框值的长度
	   	  var len=text.value.length;
	   	  // 计算可输入的剩余字符
	   	  var allow=total-len;
	   	  var overflow=len-total;
	   	  // 如果allow小于0
	   	  if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
	   	  }else{
	   	  	  showcount.innerHTML='您还可以输入';
	   	  	  totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
	   	  }
	   }
	</script>
</body>
</html>

keyCode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     
</head>
<body>
    <div id="a"></div>
    <script>
        var a=document.getElementById('a');
        window.onkeydown=function (b){
            // console.log(a.keyCode);
            a.innerHTML=b.keyCode;
        }
    </script>
</body>
</html>

输入文本字数提醒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function (){
            var shang=document.getElementById('a');
            var xia=document.getElementById('b');
            var ziShu=30;

            // 键盘事件要用document 
            document.onkeyup=function(){
                // 获取文本框中的字数
                var shu=shang.value.length;
                // 得到当前还可以输入的字数
                var hou=ziShu-shu;
                // 此处做一个判断如果小于零 则用Math.abs(变量名)求它的绝对值
                if (hou>=0) {
                    xia.innerHTML='你还可以输入<span>'+hou+'</span>个字';
                } else {
                    // 此代码是让超过30字往后就不显示了，获取值——>转为字符创——>截取前30位。
                    // var zhi =shang.value;
                    // var zhi=zhi.toString();
                    // shang.value=zhi.substr(0,ziShu);

                    xia.innerHTML='你已经超过了<span>'+Math.abs(hou)+'</span>个字';
                    
                }
                
            }
            
        }
    </script>
</head>
<body>
    <textarea id="a" cols="30" rows="10" placeholder="请输入30个字不要超过"></textarea>
    <div id="b">你还可以输入<span>30</span>个字</div>
</body>
</html>

BOM

BOM 对象：

window
navigator
screen
history
location
document
event

用window声明全局变量和全局方法

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
       var age=15;
       function sayAge(){
       	  alert('我'+window.age);
       }
       // 声明一个全局变量
       window.username="marry";   // var username="marry";
       // 声明一个全局方法
       window.sayName=function(){
       	  alert("我是"+this.username);
       }
       //sayAge();
       //window.sayName();

	</script>
</body>
</html>

带有OK和取消按钮的对话框

confirm(“此处输入提示信息”)

功能：显示一个带有指定消息和OK及取消按钮的对话框

返回值：如果用户点击确定按钮，则confirm（）返回true

如果用户点击取消按钮，则confirm（）返回false

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="box">
		<span>iphone6s</span>
		<input type="button" value="删除" id="btn">
	</div>
	<script>

       // confirm()
       // 获取按钮,绑定事件
       var btn=document.getElementById("btn");
       btn.onclick=function(){
       	   // 弹出确认对话框，可以用 \n  来进行换行
       	   var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
       	   if(result){
              document.getElementById("box").style.display="none";
       	   }
       }

	</script>
</body>
</html>

可以输入文字的对话框

window.prompt(“text,defaultText")

text：要在对话框中显示的纯文本（而不是HTML格式的文本）

defaultText：默认的输入文本

返回值：如果用户单击提示框的取消按钮，则返回null

如果用户单击确认按钮，则返回输入字段当前显示的文本

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
       // 弹出输入框
       var message=prompt("请输入您的星座","天蝎座");
       console.log(message);
	</script>
</body>
</html>

浏览器打开关闭事件

window.open(pageURL,name,parameters)

pageURL：子窗口路径

name：子窗口句柄。

parameters ：窗口参数(各参数用逗号分隔)

width=400 窗口宽度
height=200 高度
left=0 窗口X坐标位置
top=0 窗口Y坐标位置
toolbar=no 是否显示工具栏
menubar=no 是否显示菜单栏
scrollbars=no 是都显示滚动条
location=no 是否显示地址字段
status=no 是否添加状态栏

window.close()

关闭浏览器窗口

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>open</title>
</head>
<body>
	<input type="button" value="退 出" id="quit">
	<script>
       window.onload = function(){
       	  // 打开子窗口，显示newwindow.html
       	  window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
       	  var quit = document.getElementById("quit");
       	  // 点击关闭当前窗口
       	  quit.onclick = function(){
       	  	  window.close("newwindow.html");
       	  }
       }
	</script>
</body>
</html>

定时器

超时调用

setTimeout(code,millisec)

功能：在指定的毫秒数后调用函数或计算表达式参数说明：

code：要调用的函数或要执行的JavaScript代码串
millisec：在执行代码前需等待的毫秒数

说明：setTimeout（）只执行code一次。如果要多次调用，请使用setInterval（）或者让code自身再次调用setTimeout（）

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
      // 不建议这样写
       //setTimeout("alert('hello')",4000);
      

      setTimeout(function(){
         alert('hello');
      },4000);

       var fnCall=function(){
       	  alert("hello");
       }
       setTimeout(fnCall,5000);
	</script>
</body>
</html>

clearTimeout(id_of_settimeout)

功能：取消由setTimeout（）方法设置的timeout

参数说明：id_of_settimeout ：由setTimeout（）返回的ID

值，该值标识要取消的延迟执行代码块

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000)

       clearTimeout(timeout1);
        
	</script>
</body>
</html>

间歇调用

setInterval(code,millisec)

功能：每隔指定的时间执行一次代码

code：要调用的函数或要执行的代码串。
millisec：周期性执行或调用code之间的时间间隔，以毫秒计

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
        //每隔1秒打印一次您好
       var intervalId=setInterval(function(){
           console.log("您好");
        },1000)

        // 10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);
        
        
	</script>
</body>
</html>

location对象

location 对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航的功能,它既是 window对象的属
性,也是 document对象的属性

location.href 返回当前加载页面的完整URL 说明: location.href与window.location href 等价

location.hash 返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串。

location.host 返回服务器名称和端口号（如果有）

location.hostname 返回不带端口号的服务器名称

location.pathname 返回URL中的目录和（或）文件名

location.port 返回URL中指定的端口号，如果没有返回空字符串

location.protocol 返回页面使用协议

location.search 返回URL的查询字符串。这个字符串以问号开头。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="返回顶部">
	<script>
       // console.log(location.href);
       // console.log(location.hash);
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
	</script>
</body>
</html>

location.href=‘需要跳转的页面’ 等价于 window.location=‘对话框.html’

location.replace(“需要跳转的页面”);

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="刷新" id="reload">
	<script>
      var shi=setTimeout(function(){
            // 会有历史记录产生可以回退
            // location.href='对话框.html';
            // window.location='对话框.html';

            // 使用replace不会生成历史记录
            location.replace("对话框.html");
        },2000);
        // clearTimeout(shi);
		
        //刷新
         document.getElementById("reload").onclick=function(){
            //  有true是从服务器加载，没有true空白可能是从缓存加载
         	 location.reload(true);
         }
	</script>
</body>
</html>

history对象

history对象保存了用户在浏览器中访问页面的历史记录

history.back() 回到历史记录的上一步。相当于使用了history.go(-1) -1表示回退一步 -2 表示后退历史记录的两步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=jiaZai;
        function jiaZai(){
            var a=document.getElementById('a');
            var b=document.getElementById('b');
            function aa(){
                // 方法一
                history.back();
                // 方法二
                // history.go(-1);
            }
            function bb(){
                history.go(-2);
            }
            a.onclick=aa;
            b.onclick=bb;
        }
    </script>
</head>
<body>
    <input id="a" type="button" style="cursor: pointer;" value="回退1步">
    <input id="b" type="button" style="cursor: pointer;" value="回退2步">
</body>
</html>

history.forward() 回到历史记录的下一步相当于history.go(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=jiaZai;
        function jiaZai(){
            var a=document.getElementById('a');
            var b=document.getElementById('b');
            function aa(){
                // 方法一
                history.forward();
                // 方法二
                // history.go(1);
            }
            function bb(){
                history.go(2);
            }
            a.onclick=aa;
            b.onclick=bb;
        }
    </script>
</head>
<body>
    <input id="a" type="button" style="cursor: pointer;" value="前进1步">
    <input id="b" type="button" style="cursor: pointer;" value="回退2步">
</body>
</html>

screen 对象属性

screen.availWidth 返回可用的屏幕宽度

screen.availHeight 返回可用的屏幕高度

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>screen</title>
</head>
<body>
	<script>
        console.log("页面宽："+screen.availWidth);
        console.log("页面高："+screen.availHeight);

        console.log("pageWidth:"+window.innerWidth);
        console.log("pageHeight:"+window.innerHeight);
	</script>
</body>
</html>

navigator 对象

var userAgentInfo = navigator.userAgent

用来识别浏览器名称、版本、引擎以及操作系统等信息的内容

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Navigator</title>
</head>
<body>
	<script>
       //console.log(navigator.userAgent);
       // 判断浏览器
       function getBrowser(){
           var explorer = navigator.userAgent,browser;

           if(explorer.indexOf("MSIE")>-1){
              browser = "IE";
           }else if(explorer.indexOf("Chrome")>-1){
              browser = "Chrome";
           }else if(explorer.indexOf("Opera")>-1){
              browser = "Opera";
           }else if(explorer.indexOf("Safari")>-1){
              browser = "Safari";
           }
           return browser;
       }

       var browser = getBrowser();
       console.log("您当前使用的浏览器是："+browser);

       
       // 判断终端
       function isPc(){
          var userAgentInfo = navigator.userAgent,
              Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
              flag = true,i;
              console.log(userAgentInfo);
           for(i=0;i<Agents.length;i++){
              if(userAgentInfo.indexOf(Agents[i])>-1){
                 flag = false;
                 break;
              }
           }
           return flag;
       }
       var isPcs = isPc();
       console.log(isPcs);
	</script>
</body>
</html>

JS事件

document.body.scrollTop; 获去导航条距离顶部的距离

DOM2 高级事件

addEventListener() 三个参数事件类型函数冒泡还是捕获
removeEventListener(‘click’,dom2); 解绑事件

三种绑定方法

*1、html中定义 html中写js代码，强耦合，不利于复用代码 xxx

*2、DOM0级事件，事件对象的属性添加绑定事件，松耦合，html与js代码分离了，缺点：就是有且只能绑定一个事件类型

*3、DOM2级事件，通过 addEventListener函数绑定事件，

* 优点：松耦合、绑定多个事件，事件捕获和事件冒泡

IE8及其以下浏览器仅支持一次添加解绑方式：

attachEvent(“onclick”, cl); 绑定事件
detachEvent(“onclick”, cl); 解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="a()">点击事件</button>
    <button id="a1">DOM0级事件绑定</button>
    <button id="a2">DOM2级事件绑定</button>

    <script>
        // 第一种
        function a(){
            alert("我被点击了！");
        }

        // 第二种
        var dom0=function (){
            alert("DOM0级绑定事件");
        }
        var a1=document.getElementById("a1");
        a1.onclick=dom0;

        // 第三种
        var dom2=function (){
            alert("DOM2级绑定事件");
        }
        var a2=document.getElementById("a2");
        // 第三个参数默认是false
       a2.addEventListener("click",function (){
           alert("DOM2级绑定事件");
       },false);


    </script>

</body>
</html>

解绑事件

<button id="a2">DOM2级事件解绑</button>

    <script>
        var a2=document.getElementById("a2");
        var dom2=function (){
            alert("DOM2级绑定事件");
        }
        // 使用的时候不要用匿名函数
        a2.addEventListener('click',dom2);

    //    事件解绑
        a2.removeEventListener('click',dom2);
    </script>

IE事件处理程序

指的是 IE8及以下的浏览器所采用的 dom级绑定事件

<button id="myBtn">按钮</button>
		<script type="text/javascript">
			//html属性添加事件
			//DOM0级事件绑定     兼容所有浏览器
			//DOM2级事件绑定  addEventListener:Chrome firefox IE9等     attachEvent： IE8及IE8以下的浏览器
			var btn = document.getElementById("myBtn");
			var cl = function() {
				alert("Clicked");
			}
			
            btn.attachEvent("onclick", cl);

			//绑定多个事件类型，归于DOM2级事件
			/* btn.attachEvent("onclick",function(){
				alert("二 Clicked");
			}); */

			//解除绑定
			btn.detachEvent("onclick", cl);


            // 匿名函数中this指向的是window
			//this指向window
			btn.attachEvent("onclick",function () { 
                alert(this === window);  //返回true
             });
			
		</script>

跨浏览器事件处理程序

兼容所有浏览器用一个方法可以解决 IE8及以下还有其他高级的浏览器的绑定事件

<button id="myBtn">点击我</button>
		<script type="text/javascript">
			var DOM2 = {
                // 三个参数 第一个节点 第二个事件类型 第三个函数
				addshijian:function(element,type,handler){
					//绑定事件
					//Chrome Firefox IE9等     addEventListener 
					//IE8及IE8以下的浏览器     attachEvent 
					if(element.addEventListener){     //判断当前浏览器是否支持addEventListener如果支持返回true
						element.addEventListener(type,handler,false);
					}else if (element.attachEvent) {
						element.attachEvent("on"+ type,handler);
					} else{
						element["on"+type] = handler 
					}
				},
				removeshijian: function(element,type,handler){
					//移除事件
					//Chrome Firefox IE9等      
					//IE8及IE8以下的浏览器     
					if(element.removeEventListener){
						element.removeEventListener(type,handler,false);
					}else if (element.detachEvent) {
						element.detachEvent("on"+type,handler);
					} else{
						element["on"+type] = handler
					}
				}
			}

			var btn = document.getElementById("myBtn");
			var handler = function(){
				alert("Clicked");
			}

			DOM2.addshijian(btn,"click",handler);
		    // DOM2.removeshijian(btn,"click",handler);
		</script>

事件冒泡和事件捕获

false 冒泡（默认，可以省略不写） true 捕获

冒泡：事件对象沿DOM树向上传播只对直系产生作用先执行儿子元素

addEventListener("click",function (){
           alert("DOM2级绑定事件");
      });

捕获：事件对象沿DOM树向下传播

事件委托

原理是利用了事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <ul id="fu">
        <li id="one">item1</li>
        <li id="two">item2</li>
        <li id="three">item3</li>
        <li id="four">item4</li>
        <li id="five">item5</li>
    </ul>
    <script>
        // 事件委托的原理就是事件冒泡
        var fu=document.getElementById("fu");
        fu.addEventListener("click",function (event){
            if(event.target.id=="one"){
                alert(1);
            }else if(event.target.id=="two"){
                alert(2);
            }else if(event.target.id=="three"){
                alert(3);
            }else if(event.target.id=="four"){
                alert(4);
            }else{
                alert(5);
            }
        },false);

    </script>
</body>
</html>

event 对象属性与方法

event.type 返回当前的事件类型如click

event.target 返回的是节点点击的谁就返回的谁

event.currentTarget 事件绑定的谁就返回谁

event.preventDefault() 阻止默认行为例如阻止链接的跳转

event.stopPropagation() 阻止事件的冒泡或捕获

event.clientY pageY screenY

clientY 就是指浏览器顶部到鼠标的位置，不计算滚动轴的距离
pageY 就是指浏览器顶部到鼠标位置，但是它计算滚动轴的距离
screenY 就是指屏幕顶部到鼠标位置

演示：

event.type 返回当前的事件类型如click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evenr常用属性与方法</title>
</head>
<body>
    <button id="btn">点击我</button>
    <button id="btn2">点击+鼠标移出</button>
    <script>
        var mybtn=document.getElementById("btn");
        mybtn.addEventListener("click",function(event){
            /* 放回当前的事件类型 */
            alert(event.type);    
        });

        var mybtn2=document.getElementById("btn2");
        function dian(event){
            if(event.type=="click"){
                alert("我是点击触发的弹窗");
            }else if(event.type=="mouseout"){
                alert("我是鼠标移出触发的弹窗");
            }
        }
        mybtn2.addEventListener('click',dian);
        mybtn2.addEventListener('mouseout',dian);
    </script>
</body>
</html>

event.target 返回的是节点点击的谁就返回的谁

event.currentTarget 事件绑定的谁就返回谁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evenr常用属性与方法</title>
</head>
<body>
    <ul id="parent">
        <li id="child">儿子</li>
    </ul>
    <script>
            // target和currentTarget
			var parent = document.getElementById("parent");
			// var parent = document.getElementById("child");
			parent.addEventListener("click", function(event) {

				/* 点击儿子，事件是在父亲上面
				target 点击谁谁就是target， 事件源
				currentTarget   事件绑定在谁身上，就是指向谁 */
				console.log(event.target) 
				console.log(event.currentTarget) 
			})
    </script>
</body>
</html>

event.preventDefault() 阻止默认行为例如阻止链接的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evenr常用属性与方法</title>
</head>
<body>
    <a id="a" href="http://www.baidu.com">跳转链接默认跳转到百度</a>
    <script>
        //event.preventDefault 阻止默认行为 会阻止a链接跳转
			var a = document.getElementById("a");
			a.addEventListener("click",function(event){
                event.preventDefault();
                alert(11);
			});

    </script>
</body>
</html>

event.stopPropagation() 阻止事件的冒泡或捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evenr常用属性与方法</title>
</head>
<body>
    <ul id="parent">
        <li id="child">儿子</li>
    </ul>
    <script>
        //event.stopPropagation     阻止事件冒泡或者捕获
			var parent = document.getElementById("parent");
			parent.addEventListener("click",function(){
				alert("parent")
			})
			child.addEventListener("click",function(event ){
				alert("child");
				event.stopPropagation();
			})
    </script>
</body>
</html>

clientY pageY screenY
clientY就是指浏览器顶部底边到鼠标的位置，不计算滚动轴的距离
pageY就是指浏览器顶部底边到鼠标位置，但是它计算滚动轴的距离
screenY就是指屏幕顶部到鼠标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evenr常用属性与方法</title>
    <style>
        #gaodu{
            height:2000px;
            background:lightgreen;
        }
    </style>
</head>
<body>
    <div id="gaodu"></div>
    <script>
            //clientY   pageY   screenY
			//clientY就是指浏览器顶部底边到鼠标的位置，不计算滚动轴的距离
			//pageY就是指浏览器顶部底边到鼠标位置，但是它计算滚动轴的距离
			//screenY就是指屏幕顶部到鼠标位置
			var gaodu = document.getElementById("gaodu");
			gaodu.addEventListener("click",function(event){
				alert("clientY:"+event.clientY+"; pageY:"+event.pageY+";  screenY:"+event.screenY);
			})
    </script>
</body>
</html>

IE8 及其以下版本的 event属性方法

event.type 返回当前的事件类型如click

event.returnValue = false 阻止默认行为同preventDefault()

event.cancelBubble = true 取消事件冒泡同stopPropagation

srcElement 同target 返回的是节点点击的谁就返回的谁

Event对象跨浏览器兼容写法

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Event对象跨浏览器兼容写法</title>
	</head>

	<body>
		<div id="parent">
			<div id="child">点击我</div>
		</div>
		<a href="http://www.baidu.com" id="a">跳转链接</a>
		<script type="text/javascript">
			//Event addEventListener chrome firefox  IE9  event.target   preventDefault    stopPropagation
			//Event attachEvent  IE8系列的     event.srcElement     returnValue    cancelBubble 
			var EventUtil = {
				addHandler: function(element, type, handler) {

					//绑定事件
					//Chrome Firefox IE9等     addEventListener 
					//IE8及IE8以下的浏览器     attachEvent 
					if(element.addEventListener) {
						element.addEventListener(type, handler, false);
					} else if(element.attachEvent) {
						element.attachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler
					}
					
				},
				removeHandler: function(element, type, handler) {

					//移除事件
					//Chrome Firefox IE9等      
					//IE8及IE8以下的浏览器     
					if(element.removeEventListener) {
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent) {
						element.detachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler
					}

				},
				getTarget: function(event) {

					return event.target || event.srcElement;

				},
				preventDefault: function(event) {

					if(event.preventDefault) {
						event.preventDefault();
					} else {
						event.returnValue = false;
					}

				},
				stopPropagation: function(event) {

					if(event.stopPropagation) {
						event.stopPropagation()
					} else {
						event.cancelBubble = true;
					}
				}

			}
			
			var parent = document.getElementById("parent");
			EventUtil.addHandler(parent, "click", function(event) {
				alert("parent被触发了")	
			})
			
			var child = document.getElementById("child");
			EventUtil.addHandler(child, "click", function(event) {
				//alert(111) 
				alert("child被触发了")	
				var target = EventUtil.getTarget(event);
				console.log(target);
				//阻止事件冒泡
				EventUtil.stopPropagation(event)
			})

			var a = document.getElementById("a");
			EventUtil.addHandler(a, "click", function(event) {
				EventUtil.preventDefault(event);	
			})
		</script>
	</body>

</html>

常用事件

兼容性代码：

var EventUtil = {
				addHandler: function(element, type, handler) {
					//绑定事件
					//Chrome Firefox IE9等     addEventListener 
					//IE8及IE8以下的浏览器     attachEvent 
					if(element.addEventListener) {
						element.addEventListener(type, handler, false);
					} else if(element.attachEvent) {
						element.attachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler
					}
				},
				removeHandler: function(element, type, handler) {
					//移除事件
					//Chrome Firefox IE9等      
					//IE8及IE8以下的浏览器     
					if(element.removeEventListener) {
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent) {
						element.detachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler
					}
				},
				getTarget: function(event) {
					return event.target || event.srcElement;
				},
				preventDefault: function(event) {
					if(event.preventDefault) {
						event.preventDefault();
					} else {
						event.returnValue = false;
					}
				},
				stopPropagation: function(event) {
					if(event.stopPropagation) {
						event.stopPropagation()
					} else {
						event.cancelBubble = true;
					}
				}
			}

UI事件

load 当页面完全加载后在window上面触发

unload事件用户从一个页面切换到另一个页面 window触发

resize事件窗口发生变化

scroll事件. 主要针对新旧浏览器，滚动条事件

用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件类型</title>
		<style>
			body {
				height: 1000px;
			}
			
			input {
				width: 300px;
				height: 50px;
			}
			
			div {
				padding: 20px 0;
				background: #666;
			}
			
			#myDiv {
				width: 500px;
				height: 500px;
				background: lightgreen;
			}
		</style>
	</head>

	<body>
		<input id="input" type="" name="" />
		<div id="div">
			<button id="myBtn">点击我</button>
		</div>
		<div id="myDiv"></div>
		<!--<script type="text/javascript" src="jquery.js"></script>-->
		<script type="text/javascript">
			
			// UI事件
			// 1、load
			//当页面完全加载后在window上面触发
			EventUtil.addHandler(window, "load", function(e) {
			alert("Loaded!");
			});
			// img标签加载完毕
			//var image = document.getElementById("img");
			//EventUtil.addHandler(image, "load", function(e) {
			//alert("图片加载完毕    ");
			//})
			//image.src = "1.png";

			// 图片预加载
			//var image = new Image();
			//EventUtil.addHandler(image, "load", function(event){
			//	alert("Image loaded!");
			//});
			//image.src = "smile.png";

			// js动态加载完毕
			//var script = document.createElement("script");
			//EventUtil.addHandler(script, "load", function(event){
			//alert("js Loaded");
			//});
			//script.src = "jquery.js";
			//document.body.appendChild(script);

			// css动态加载完毕
			//var link = document.createElement("link");
			//link.type = "text/css";
			//link.rel = "stylesheet";
			//EventUtil.addHandler(link, "load", function(event){
			//alert("css Loaded");
			//});
			//link.href = "example.css";
			//document.getElementsByTagName("head")[0].appendChild(link);

			// unload事件 用户从一个页面切换到另一个页面
			//EventUtil.addHandler(window, "unload", function(event){
			//alert("Unloaded");
			//});

			// resize事件
			//EventUtil.addHandler(window, "resize", function(event){
			//alert("Resized");
			//});

			// scroll事件.  主要针对新旧浏览器
			//EventUtil.addHandler(window, "scroll", function(event){
			//alert(111)
			//}); 
		</script>
	</body>

</html>

焦点事件

blur 元素失去焦点的时候触发

focus 不支持冒泡，获取焦点

focusin 同 focus 一样元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等

focuout 同 blur一样元素失去焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等

DOMFocusIn 元素获取焦点的时候触发

DOMFocuOut 元素失去焦点的时候触发

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件类型</title>
		<style>
			body {
				height: 1000px;
			}
			
			input {
				width: 300px;
				height: 50px;
			}
			
			div {
				padding: 20px 0;
				background: #666;
			}
			
			#myDiv {
				width: 500px;
				height: 500px;
				background: lightgreen;
			}
		</style>
	</head>

	<body>
		<input id="input" type="" name="" />
		<div id="div">
			<button id="myBtn">点击我</button>
		</div>
		<div id="myDiv"></div>
		<!--<script type="text/javascript" src="jquery.js"></script>-->
		<script type="text/javascript">
			

			// 焦点事件
			//1、blur
			var input = document.getElementById("input");
			//EventUtil.addHandler(input, "blur", function(event){
			//alert("元素失去焦点的时候触发");
			//}); 
			//2、focus  不支持冒泡，获取焦点
			//EventUtil.addHandler(input, "focus", function(event){
			//console.log("元素获取焦点的时候触发");
			//}); 

			//3、 focusin 同focus一样
			//EventUtil.addHandler(input, "focusin", function(event){
			//console.log("元素获取焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等");
			//});
			//4、 focuout 同blur一样
			//EventUtil.addHandler(input, "focuout", function(event){
			//console.log("元素失去焦点的时候触发,支持事件浏览器是IE5.5+,Safari5.1+，chrome等");
			//});

			//EventUtil.addHandler(input, "DOMFocusIn", function(event){
			//alert("元素获取焦点的时候触发");
			//});
			//EventUtil.addHandler(input, "DOMFocuOut", function(event){
			//alert("元素失去焦点的时候触发");
			//});

		</script>
	</body>

</html>

鼠标事件

click

dblclick 双击

mousedown 鼠标按下

mouseup 鼠标松开

mousemove 鼠标移动

mouseout 离开目标元素的时候执行离开目标元素或者其子元素的时候执行

mouseover 进入目标元素的时候执行进入目标元素或者其子元素的时候执行

mouseenter 只能进入目标元素时候才去触发只能进入目标元素时候才去触发

mouseleave 只能离开目标元素时候才去触发只能离开目标元素时候才去触发

mousedown：

区分浏览器
event.button == 0 鼠标左键
event.button == 1 鼠标中键
event.button == 2 鼠标右键

IE8派系
event.button == 0 没有按下按钮
event.button == 1 按下主鼠标按钮
event.button == 2 按下次鼠标按钮
event.button == 3 按下同时按下主、次鼠标按钮
event.button == 4 按下中间鼠标按钮

演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件类型</title>
		<style>
			body {
				height: 1000px;
			}
			
			input {
				width: 300px;
				height: 50px;
			}
			
			div {
				padding: 20px 0;
				background: #666;
			}
			
			#myDiv {
				width: 500px;
				height: 500px;
				background: lightgreen;
			}
		</style>
	</head>

	<body>
		<input id="input" type="" name="" />
		<div id="div">
			<button id="myBtn">点击我</button>
		</div>
		<div id="myDiv"></div>
		<!--<script type="text/javascript" src="jquery.js"></script>-->
		<script type="text/javascript">
			

			//鼠标事件
			var myBtn = document.getElementById("myBtn");
			//EventUtil.addHandler(myBtn, "click", function(event){

			//})
			//EventUtil.addHandler(myBtn, "dblclick", function(event){
			//alert(111111)
			//})
			//鼠标按下时候触发的事件
			//EventUtil.addHandler(myBtn, "mousedown", function(event){
			//alert("mousedown");
			//console.log(event.button)   //区分浏览器
			//console.log("mousedown")
			//})
			//EventUtil.addHandler(myBtn, "mouseup", function(event){
			//console.log("mouseup")
			//})

			//mousedown+mouseup=click

			//EventUtil.addHandler(myBtn, "mousemove", function(event){
			//console.log("mousemove")
			//})
			//			//离开目标元素的时候执行
			//			EventUtil.addHandler(myBtn, "mouseout", function(event){
			//				console.log("mouseout")
			//			})
			//			//进入目标元素的时候执行
			//			EventUtil.addHandler(myBtn, "mouseover", function(event){
			//				console.log("mouseover")
			//			})
			//			//只能进入目标元素时候才去触发
			//			EventUtil.addHandler(myBtn, "mouseenter", function(event){
			//				console.log("mouseenter")
			//			})
			//			//只能离开目标元素时候才去触发
			//			EventUtil.addHandler(myBtn, "mouseleave", function(event){
			//				console.log("mouseleave ")
			//			}) 
			//			var div = document.getElementById("div");
			//			//离开目标元素或者其子元素的时候执行
			//			EventUtil.addHandler(div, "mouseout", function(event){
			//				console.log("mouseout")
			//			})
			//			//进入目标元素或者其子元素的时候执行
			//			EventUtil.addHandler(div, "mouseover", function(event){
			//				console.log("mouseover")
			//			})
			//			//只能进入目标元素时候才去触发
			//			EventUtil.addHandler(div, "mouseenter", function(event){
			//				console.log("mouseenter")
			//			})
			//			//只能离开目标元素时候才去触发
			//			EventUtil.addHandler(div, "mouseleave", function(event){
			//				console.log("mouseleave ")
			//			}) 
			//			var div = document.getElementById("myDiv");
			//			EventUtil.addHandler(div, "click", function(event) {
			//				var keys = new Array();
			//				if(event.shiftKey) {
			//					keys.push("shift");
			//				}
			//				if(event.ctrlKey) {
			//					keys.push("ctrl");
			//				}
			//				if(event.altKey) {
			//					keys.push("alt");
			//				}
			//				if(event.metaKey) {
			//					keys.push("meta");
			//				}
			//				console.log("keys:" + keys.join(","));
			//			});
			EventUtil.addHandler(myBtn, "mousedown", function(event) {
				console.log("mousedown");
				console.log(event.button) //区分浏览器
				// event.button == 0 鼠标左键
				//event.button == 1 鼠标中键
				//event.button == 2 鼠标右键
				
				//IE8派系
				// event.button == 0 没有按下按钮
				//event.button == 1 按下主鼠标按钮
				//event.button == 2 按下次鼠标按钮
				//event.button == 3 按下同时按下主、次鼠标按钮
				//event.button == 4 按下中间鼠标按钮
			})
		</script>
	</body>

</html>

响应式原理

// 消息发布于订阅
let FD = {
    container: {},
    dingYue: function (fdName, fn) {
        (this.container[fdName] || (this.container[fdName] = [])).push(fn)
    },
    faBu: function (fdName, val) {
        let fns = this.container[fdName]
        if (!fns || fns.length == 0) {
            return false
        }
        fns.forEach(fn => {
            fn(val)
        });
    }
}

// 数据劫持
let dataJC = function ({ fdName, obj, name, selector }) {

    let value = "",
        el = document.querySelector(selector)

    Object.defineProperty(obj, name, {
        get() {
            console.log("获取值")
            return value
        },
        set(val) {
            console.log("设置值")
            value = val
            // 发布消息
            FD.faBu(fdName, val)
        }
    })
    // 订阅消息
    FD.dingYue(fdName, function (val) {
        el.innerText = val
    })
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
    <script src="./响应式.js"></script>
</head>

<body>
    响应式:<div id="test"></div>

    <script>
        let obj = {}
        dataJC({
            fdName: "view-1",
            obj,
            name: "one",
            selector: "#test"
        })

    </script>
</body>

</html>