122.尚硅谷_JS基础_键盘事件

事件咱们这块给他说完了，接下来呢，我们来其实一直说的都是鼠标是吧，诶接下来我们来，哎对聊聊键盘是吧，键盘的事件，那键盘啥事件啊，诶就摁是吧，诶键盘也就是摁啊，我们这块来说一下我们这个键盘事件，那这里边说的时候呢，我们来看看吧，这里边直接来看看我们这个文档。键盘事件离线手册javascript这个h do，找到我们这个do，参考直接看这个引问，你像键盘事件呢，我们主要就说两个，一个叫做on on down，还有一个叫做on up啊，On down on up on down什么意思？诶，某个键盘按键被按下吧，Up呢？诶叫做某个键盘按键被松开啊，被松开一个叫按下，一个叫做松开啊，On key down，还有这个on啊，4Q的标签，我们来一个window，点一个load，等于这个function。

我们来说一下这个键盘事件，键盘事件我们主要说两个，一个叫做什么呢？On key down，还有一个我们叫做一个on key up啊on down表示什么呀？我们这个按键被松开，诶这个on k up呢，是我们这个按键，不是按键被按下啊，正要写法按键被按下，这个是我们按键被松开啊，这是两个事件，事件有了，那接下来我们就要看的是我这个事件要绑给谁是吧？诶绑给谁，那这个事件绑给谁呀？诶假如说我有一个div div随便写一个叫一个这个井号，一个直接来个ID，等于个这个BOX1，你说我能不能把事件绑给这个div啊，能不能把事验帮给div啊，来来，我们写一个style，直接来一个这个wise，来一个100个像素，然后一个一个像素，然后background color来一个这个。

保存，然后咱们运行一下，诶，我来想想能不能绑给div，假如我希望什么呀，当我按下按键的时候，在div上按下按键的时候，我要干嘛呀，能变大，哎，那我我要问你了，我怎么算我在div上按下按键了。能算吗？不能算是吧，因为我我能不能选中div div啊选不中，所以注意div这种东西我们都是不能绑定这些什么呀，键盘事件啊键盘事件，所以这里边我们来说键盘事件一般绑定给谁呀？诶键盘事件我们一般呃都会绑定给一些什么呀，一些可以获取到焦点的对象啊，可以获取到焦点对象这个焦点这个概念啊，我们应该还没有没说过是吧，什么叫焦点的来一个input，我们叫一个type，来一个什么呢？Text我一保存，现在我一刷新，这是一个文本框吧，怎么叫获取焦点了，我这一点这光标是不是跟里边闪的呀，现在它就叫获取焦点，我点外边这是不是就没了呀，叫什么呀，叫失去焦点啊失去焦点，所以注意那我们说了，那当我点这，它是不是获取焦点呀，那这时候我一摁按键，是不是它在这就写出东西来了呀，写出东西那。

现在属于什么呀，获取焦点状态，但是我这块一旦输你失去焦点了，我在写东西，这还也没有反应了，诶就没反应了啊，没反应了，所以注意我们这种什么呀，键盘事件一般都会绑定一些可以什么呀，可以获取焦点的这个对象，或者谁的，哎，或者是我们这个document，我们这个文档对象，所以注意你在绑定键盘事件的时候，你要想一下给它绑定键盘事件，它到底有没有意义啊，有没有意义，你像刚才我们的div，你绑定没有任何意义，因为你不能没法去说怎么算在div里边输入啊，因为它也获取不了焦点啊，获取不了节点，所以我们主要就是什么呀，表单项，还有我们这些。Document啊，还有document来，那我们就先来给谁呢？给我们那个document来绑定一个document，点一个on，等于一个function function呢，我直接这来一个这个cancel，点一个log log1什么呢？按键被按下了啊，按键被按下了，我这一保存咱们来看效果F12现在刷新一下，随便摁一个，摁一个A是不是按键没按下来，摁个S是不是又触发一次，你看是不是出了一个二啊，摁一个ad是不是摁一次就触发一次，诶摁一次被触发一次啊叫做一个on key档啊按下的时候被触发啊，按下的时候被触发，然后呢，我们还有一个什么呀，叫做on up document点一个on key up等于一个function，哎，这俩其实是什么呀？它是一对是吧？诶一对来说一下来一个什么呢？cancel.log一个什么呢？哎，按键松开了。

已保存，他们看着啊，我一刷新。

刷新一下，先我这摁一下A。N下S摁下F摁下G是不是都是啊，一对我摁下去以后它就触发，然后松开以后是不是就触发呀，摁下去以后触发我们这个on，当松开的时候触发我们这个on up on，那我先把这on up住了，住了，现在我没有这个松开时间，我一刷新，我一摁它是不是也会触发呀，但是你要注意一个问题啊，你要注意一个问题，现在我这连我这摁着一个键不放啊摁，比如假如说我就摁着A不放，你看什么效果。他在干嘛，是不是一直在触发呀，哎，一直在触发啊，所以这块你要注意，注意什么，对于我们这个on key当来说，如果什么呢？如果一直按着我们这个某个按键不松手啊，则什么呢？则事件会一直触发啊，事件会一直触发，所以你会发现什么呢？我摁着一个A不不松手，它是不是一直在变呀，为什么在变，因为事件一直在触发啊，会连续触发，诶那就像什么呀，像我在这一输入一个东西，摁A不放，它是不是连续出一堆A呀，诶出一堆A啊，它会连续的去触发啊，连续触发好，那这块我们看到了，那我们就来看看啊，你要注意了，虽然我一摁它会连续触发，对吧？那你要看啊，你要注意一点，这块当我第一次出来的时候，它会稍微的卡一下，然后2345次，它会连续的出来，你要看这块儿啊，靠着输出的速度啊，我这一摁。

看出来了吗？第一次稍微卡一下，然后是不是就特别快就出来了，哎，第一次它稍微卡一下，包括我在这输出，我输出一个什么呢？我输出一个A，你看第一次这块能感觉到吗？第一次出来稍微卡顿一下，然后第二次第二第三次是不是就非常快的出来了，诶第一次会稍微的卡一下啊卡一下那这块是为什么，我们来说一下啊，我们说当我们这个on key带on key带连续触发时。

什么呢？我的第一次和这个第二次之间会什么呢？会稍微的什么呀，间隔稍微的长一点啊，稍微长一点，其他的呢？呃，其他的这个会什么呀，会非常的快啊，会非常的快，所以你会发现它是这它是一个什么速度呀？诶是这样先出来一个一，然后稍微停一会儿，然后二三四五六七八九十对吧？诶后边都是特别快的，中间会卡一下，那它为什么有这么一设计，咱们说这东西它是不是重新设计的呀。是不是，诶这肯定是重新设计的是吧，不然不会出现这种情况，你一摁咔是不是卡一下，为什么呀？诶他要防止我们什么呀，误操作，操作什么意思，那你可能你你跟这儿你是不是想按一个A啊，有可能你手稍微重一点，稍微摁的时间稍微长那么一丢丢。

对吧，那这时候如果他特别灵敏的话，你可能敲一个A，咔一下蹦出来三个A，那你这时候还得删去啊三可能你一下一下把三个就给删了，对吧，非常有可能发生误操作，所以他干嘛呢，在第一次和第二次之间干嘛呢？长一点，如果你超过了这个时间了，那我知道了，你不是误操作，你是诚心想输这么多，我就让你干嘛呀，连续出来啊，连续出来，所以注意这个是我们浏览器故意设计的，它是为什么呢？这种设计是为了防止我们什么呀，我们这个误操作的一个发生啊，误操作一个发生，好，这是我们这个on up on，这on down啊on down说完了再看我们这个on up，诶我们来说了，我这on up它会不会连续触发呀，会不会呀，这要连续触发就疯了，是不是封了呀，我这一按就一松开，我这按键是不是一直保持到一个松开状态呀，好，你这玩意儿连续触发是不是没没有啊，还没没有啊，所以注意on k呢，它只。

对，它不会什么呀，连续触发，你松开一次它就是什么呀，触发一次啊，松开一次就触发一次，这就不多说了，好，那这块是两个事件，On key down on key up，我们直接拿这两个实验，其实差不多啊，差不多就是时间不一样，我们就拿一个举例子，然后剩下的我们对比着，对比来说一下，那这块又带来一个问题，你说我知道你摁下了这玩意儿没用是吧，你按下了这事重不重要不重要，我关注的应该是什么呀？你按的是谁吧？哎，我希望我知道你按的啊是谁，那这块怎么知道呢？我希望我按的A，我就知道你按的是A，我按的B，我知道的B，按的C，我就知道按的是C，我希望知道按的是是谁。那咋整啊，问谁呀？问哎，问那个你问的实践对象吧，哎，毫无疑问肯定是得得找这个你问来，咱们把它E为ind请出来，然后invent等于一个event或者一个window，点一个event，然后我们来看看它怎么告诉我的啊，它里边有一个属性叫什么呢？我们来看看吧，往下看一堆属性，什么out key呀。

Control key啊Meta k不管了先啊，有的一个shift key对吧？诶，Out key叫什么呀？Out是否背按一下c key control是否背按一下shift key我们叫做一个shift，是否是按一下，是不是一堆啊，诶包括这个我们先不管它，还有一个叫什么呀，叫做一个key code key什么意思呀？诶按键是吧？诶code呢，编码，诶编码，那key code呢，我们来看看吧，直接来个嘛呢，我们来说一下我们叫什么呢？我们可以通过我们这个key code来干嘛呢？来获取我们这个按键的一个这个编码啊那这块我就不打它打印它了，打印谁呢？打印一个invent，点一个k code啊我这一保存，咱们来看刷新一下，我摁一个A，咔出来一个什么呀，65，哎，A的编码是65B66C67D是不是68呀，然后1234，诶，我们来看一是。

下刚才看一是49，二是53是51，四是52，五是53，零是48，诶他是不是可以给我返回我那个按键的一个编码啊，诶返回我们的按键编码啊，我们来说通过这个key code可以干嘛呢？通过它诶可以判断我们这个哪个按键被按下，那现在假设我想做这么一个，我来判断什么呢？判断一个东西吧，哎，判断一个这个呃叫做一个。什么键，咱们找一个找一个这个外键吧，哎，外是否。是否被按下啊，我要判断这个Y是否被按下，那我怎么判断呀，我是不是先看看这个Y的编码啊，诶直接一打印YY是多少啊，89，那我怎么知道Y有没有摁下呀？诶来一个if我们什么呀，你问点一个K扣的等等于诶等等于八个九，如果你是89，我们证明什么呀，你是不是被按下了呀，被按下了我来一个这个canl，点一个log一个什么呢？我们叫做一个Y被摁下了啊，Y被按下了，我这一保存，咱们现在看效果，我一刷新来一个ABCDEFG是不是都没反应啊，大家都没反应，当我摁一个Y的时候，走，你是不是就Y被按下了，哎，是这么一个效果啊，通过这个k code可以来判断哪个按键被按下了啊，非常简单，当你判断之前，你现在知道什么呀？诶我们这按键的一个编码，实际上它这个就是这个UN编码啊UN编码。

好，接下来我们再往下看啊，往下看再看什么呢？那我这光判断这个Y它不过瘾，我希望什么呢？我希望判断我们这个Y和这个CTRL是否同时被按下啊，Y和CTRL是否同时被按下，那我这样吧，我先看看什么呀，先看看这个CTRL的这个编码吧，诶来我这一保存，现在我一刷新，我给你CTRLCTRL是17，那我要想判断Y和CTRL是否同时问一下我怎么写呀，我一想我这么写行不行，And and，我们invent点一个t code等等于17，诶这么写行不行？

诶，我们来写一个CTRLCTRL和Y都被按下了，行不行啊。刷心来摁Y没反应，按H没反应，CTRLYCTRLYCTRLY，哎呀呀，没反应行不行啊，先按CTRL是吧，先按CTRL先按Y是不是都不行啊，一定要注意啊，我这代码写完了，你就该写，你就该看出来，我这个写的绝对是一个弱智代码，为什么呢？invent.key code等等于89，同时invent.key code等等于17 key扣，因为那点K扣的这是同一个属性啊，诶有没有哪个值它可以既等于89又等于17啊，没有可能吧，这要等于是不是就太扯了，哎，所以注意这个条件永远不可能成立啊，永远不可能成立，所以这个东西它不能这么写啊，不能这么写，所以那你这种情况我们是不是就不能判断了呀？诶，那你要注意了，刚才我们看到了我们有什么呀，是不是还有这么几个属性啊，什么out key c？

True key还有一个什么？哎，这个shift的key吧，哎，Shift的key啊，我们来说一下，除了什么呢？除了我们这个key code，哎，我们这个invent，我们这个事件对象中还什么呢？还提供了我们这个的几个属性，哪几个呢，叫做一个out out key叫什么呢？叫做ctrl control control key，还有一个叫做一个shift key，诶，Shift，诶，那这三个是干嘛的呢？诶，这三个用来判断我们这个out crl和这个shift。

Shift，诶是否被按下，如果什么呢？如果按下则返回处，否则呢，返回false啊返回false，所以你想判断什么呀，你想判断我们这个Y和CTRL是否同时标下，你这么写是不行的，但是你可以怎么写呢？你可以写invent，点一个这个ctrl key啊ctrl key我这个保存咱们来看，这回你再看一刷新，我摁个Y没有任何反应，嗯，其他都没反应，来一个CTRLY走你。是不是就出来了啊，就出来了啊，所以注意你要判断CR out，诶，Shift得单独用这个去判断，它为什么给我们提供这么三个方式，因为ctrl shift还有out，一般我们都是干嘛的呀，是作为功能键使用的呀，都是快捷键，可能多个键同时按它干嘛呢？它给我们提供这么一种方式来单独去判断这三个键啊三个键好，那这个呢，是我们说的一个键盘的一个事件，就这么简单，On大，那on up是不是也也一样啊，只不过它是松开的时候触发的啊，我们就不再单独演示了啊，不来演示了，好，那我们来看这这个事件，现在我是给这个document q绑定的，那我还能干嘛呢？

诶这块呢，注释给他嵌套了，那我能不能给我们这个input绑定一个，诶咱们来试试啊，给input子去绑定一个，那这个呢，我先给他住了，把这do给他不住也行，咱们留着，反正他没反应啊，没反应咱们来试试，我们那什么呀，Input的input的呢，就这一个，咱们好整，我来干嘛呢，来获取我们这个input，直接来一个玩一个这个input，等于一个do，点一个get elements by tIgEr个name，来一个这个in put，但是我们只要第一个对吧？诶只要第一个，然后来一个这个in put，点一个on here down等于什么呢？等一个function，等于function呢，我们这来一个cancel，点一个log log1什么呢？来一个这个，诶按键被按下了，哎，我这一保存，现在我一刷新，咱们看这我在这的输出呢，没反应，我得什么情况呀，我得让它获取。

行焦点吧，然后再输出是不是出来了呀？诶按键被按下了啊，按键被按下了，那这块看着还诶挺好玩的，按键被按下它是不就出来字了呀？诶那你会发现什么呢？当我在引破的里边按按键的时候，我这按键内容是不是会自动在这里边出来呀？诶出来，那我一想，诶那我这么干一件事啊，看着我来什么呢？R t return一个force return force，那这块什么意思呀，是不是取消默认行为啊？诶取消默认行为我们来看效果啊，来，我先把这给它好了，删都删不掉，CTRLL强制刷新一下。

强制刷新一下，然后看这我写一个，我来个A，诶你看按键是不是被按下了呀，但这边有没有东西啊，诶来个B，来个CD，完了空格完了干嘛了，是不是啥也输入不进去了呀，为什么呀，我在这儿是不是取消默认行为了呀？诶默认行为了啊所以这块注意我们说什么呢？我们说哎，在我们这个文本框中输入这个内容属于什么呢？属于我们这个onk档的这个默认行为，如果什么呢？如果在我们这个onk。

当中干嘛呢，取消了什么呀，这个默认行为则什么呢？则我们这个输入的这个内容不会什么呢？不会出现在我们这个文本文本框中啊，不会出现文本框中，所以你这写什么啊，都干嘛呀，都不出来了啊，都不出来这么一个特点啊，这么一个特点，诶那有这个特点了，我现在想做一个事儿，做一什么事呢？诶我希望做这么一个功能，来我们来说一下，诶那我们能不能使我们这什么呢？我们这个文本框中干嘛呢，只能输入，诶这样写吧，不能输入什么呢？不能输入数字，哎在种框中不能输入数字，什么意思呀，在这儿你说我输入个abcd让不让输啊，让输，但是如果你要输12345干嘛呀，不让你输。那这块怎么办？我是判断一下啊，诶，我先来判断用户输的是什么，那怎么来看我来什么呢？先来一个invent对象来一个invent等于一个invent，然后或者是一个window点一个invent，我来先看看什么呀，看看我们这个数字的这个编码，直接来一个这个invent，点一个K扣的保存来看看啊刷新一下，我这摁一下李峰是48，一是49，二是50，以此类推，九是57，所以你会发现我们数字的劈扣了多少。

是不是48~57啊，57，所以这块我们来说一下，我们这个数字呢，呃，数字它的这个K扣是四十四十八到57，诶那我说了，如果你是数字我就不让你输入，那我得先判断它输的是不是数字吧，那我怎么知道个数数字判断吧，If，我们这个invent点一个K扣干嘛呢？大于等于吧，诶大于等于48，然后呢，你问点一个K扣的，诶扣的叫小于等于57吧，这两个什么关系，是不是且呀，哎且啊，你得大于等于48，且呢，你得小于等于57，那就证明你这个键是48~57之间的吧，那是不是证明你输的是个数字，是数字怎么办？

我给你是不是return first呀，如果不是数字我是不是正常走啊，诶这样一保存，你得看什么效果啊，这块我一刷新刷新一下，然后再看我来一个ABCDEFG是不是都行啊，1234567890，我是摁了啊，但是你发现什么了，是是出不来了，诶出不来了为什么？就是因为在你输入输字的时候给它干嘛了，取消默认行为了啊，全默认行为了啊这是一个小的一个功能啊，我们说了这个on，当还有这个on up，好，那这块我们就给它说完了啊，前面事件就两个，一个on key down，还有一个on up，那接下来呢，我们来说一个练习啊，你们来待会自己做一下，先看来一个练习，什么练习呢？非常简单，还是我们这老朋友div井号boxs一带要标签来一个这个井号BOX1，然后来一个Y100个像素，HI100个像。

Background color right是不是还是那红色的div啊，然后来一个什么呢？来一个UT controlr运行是不出来了，诶那现在要做一个什么功能呢？Script的标签十我们div可以根据我们这个什么呀？哎，不同的这个方向键向我们这什么呀，不同的这个方向移动，这句话能听懂吧？哎，我们说如果什么呀，左是不是就按左键，Div是不是向向左移啊，诶向左移这这东西应该不用写了是吧？都是废话是吧？诶按右键我们这个div向右移啊，按下呢就向下下延，向向下移啊按上呢就向上移，这块我就不再写了啊按左键向左，诶按左键向左移，按右键向右移。

按上键向上移，按这个下键向下移啊，以此类推，想这个东西我们要去怎么做，先说我想让div移动，我要怎么办。哎，我是不是我要左右移，是不是修改left呀，上下移，我是不是修改top呀，所以这道题比较简单，你只需要根据什么呀，根据它按的方向键不同来修改我们这个div的什么呀，Life的或者是套啊或者是套好来思考一下这个东西啊，不难啊不难。