1.常见的键盘事件

1.1 键盘事件

以下通过代码的形式来表达，这三种键盘事件,我们使用事件监听的方式触发事件

        // 常用的键盘事件        //1. keyup 按键弹起的时候触发         document.addEventListener('keyup', function() {            console.log('我弹起了');        })        //3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊        document.addEventListener('keypress', function() {                console.log('我按下了press');        })        //2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊        document.addEventListener('keydown', function() {                console.log('我按下了down');        })        // 4. 三个事件的执行顺序  keydown -- keypress -- keyup

注意一下他们之间的区别

1.2 键盘事件的对象

键盘事件的属性，主要是KeyCode，放回该键的ASCII值，注意啊这个事件对象e
实例代码：

        // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值        document.addEventListener('keyup', function(e) {            console.log('up:' + e.keyCode);            // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键            if (e.keyCode === 65) {                alert('您按下的a键');            } else {                alert('您没有按下a键')            }        })        document.addEventListener('keypress', function(e) {            // console.log(e);            console.log('press:' + e.keyCode);        })

2.BOM

2.1 基础知识知识

BOM是浏览器对象模型，BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。兼容性比较差。

DOM的顶级对象是document，BOM 顶级对象是window

2.2 BOM对象的组成部分

它是顶级对象，有两重角色，

js访问浏览器接口的一个接口
全局对象，所有定义在其中定义的东西，都会变成它的属性和方法，调用的时候可以省去window.
它自带一个特殊属性：window.name

2.3 window对象的常见事件

接下来，我们来讲一下它的常见事件，

页面（窗口）加载事件，有了它我们就可以把script标签放到前面去了。他有两种

//第一种window.onload = function(){}或者window.addEventLisstener("load",function(){});// 第二种document.addEventListener('DOMcontentLoad',function(){})//他们的区别，第一种是在页面全部加载完全之后调用，第二种仅DOM加载完全之后调用，不包括土拍你 样式表等加载完毕。IE9以上才支持，有兼容性问题，//第二种比较常用。交互效果比较流畅

调整创建大小事件

winidow.onresize = function(){}window.addEventListner('resize',function(){});

我们经常用它完成一些相应式布局

    // 注册页面加载事件        window.addEventListener('load', function() {            var div = document.querySelector('div');        	// 注册调整窗口大小事件            window.addEventListener('resize', function() {                // window.innerWidth 获取窗口大小                console.log('变化了');                if (window.innerWidth <= 800) {                    div.style.display = 'none';                } else {                    div.style.display = 'block';                }            })        })

2.4 定时器（两种）

这个非常重要！！！有两种，

window.setTimeout(调用函数，延迟事件（毫秒计ms）)，其中哈，这个传入的函数也叫回调函数window.setInterval()也是一样的

代码示例：

使用定时器

    <script>//    1.第一个定时器        // 回调函数是一个匿名函数         setTimeout(function() {             console.log('时间到了');         }, 2000);        function callback() {            console.log('爆炸了');        }		// 回调函数是一个有名函数        var timer1 = setTimeout(callback, 3000);        var timer2 = setTimeout(callback, 5000);//    2.第二个定时器，闹钟定时器，意思就和闹钟一样，隔一段事件响一下       // . setInterval         setInterval(function() {            console.log('继续输出');        }, 1000);    </script>

拿掉定时器

<!-- clearTimeout()就完事了， -->  <button>点击停止定时器</button>    <script>        var btn = document.querySelector('button');		// 开启定时器        var timer = setTimeout(function() {            console.log('爆炸了');        }, 5000);		// 给按钮注册单击事件        btn.addEventListener('click', function() {            // 停止定时器            clearTimeout(timer);        })    </script>

2.5 this指向问题

现阶段我们需要理解的就是在普通函数里面this指向window。
在方法中，指向调用者

2.6 location对象

location对象，可以解析，地址栏里面的一些url参数，这个在后期开发很重要！

关于http还有URl请百度，一些吧
这里是location对象的属性，还有常见的方法

href和search很重要！！！

代码示例

# 1.事件到达自动跳转页面  <button>点击</button>    <div></div>    <script>        var btn = document.querySelector('button');        var div = document.querySelector('div');        btn.addEventListener('click', function() {            // console.log(location.href);            location.href = 'http://www.itcast.cn';        })        var timer = 5;        setInterval(function() {            if (timer == 0) {                location.href = 'http://www.itcast.cn';            } else {                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';                timer--;            }        }, 1000);    </script># 2. 从地址中拿参数    <div></div>	<script>        console.log(location.search); // ?uname=andy        // 1.先去掉？  substr('起始的位置'，截取几个字符);        var params = location.search.substr(1); // uname=andy        console.log(params);        // 2. 利用=把字符串分割为数组 split('=');        var arr = params.split('=');        console.log(arr); // ["uname", "ANDY"]        var div = document.querySelector('div');        // 3.把数据写入div中        div.innerHTML = arr[1] + '欢迎您';    </script>

2.7 navigator对象

这个包含浏览器的所有信息

属性太多太多了，常见的常用的有哪些，userAgent,这个里面包含了很多信息，你可以去翻阅文档

代码实例-判断用户拿什么访问的网站，从而调用不同的地址去访问

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {    window.location.href = "";     //手机 } else {    window.location.href = "";     //电脑 }

2.8 history对象

在这里，仅仅是一些简要的说明，

3.JS执行的机制，还有js的线程问题！

js的任务有分两种

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是：	在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是：	不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

异步任务有？

普通的时间，资源加载load ,定时器，还有回调函数，当然了还有一些，你可以去MDN文档查阅

执行顺序，
先同步，再异步。对于异步任务的执行顺序，还得看实际的代码。去分析。
但是有一点是可以确定的，在同步任务的队列中，执行完同步任务，js会回去看任务队列里面的异步任务，如果有，就拿到执行栈中去执行。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。