2021-12-11

十五、焦点事件&键盘事件

 1. 焦点事件

onfocus =>获得焦点事件         onblur=>失去焦点事件

   

   

   

   

   

   

        账号:

       

   

   

        密码:

       

   

   

网页显示为：

   

   

   

   

   

   

       

       

           

• 卡布奇洛

           

• 巧克力

           

• 咖啡

           

• 蛋糕

           

• 饼干

       

   

   

网页显示为：

(1).拖动框效果

dom.offsetLeft =>获取元素的默认左边距dom.offsetTop =>获取元素的默认上边距

window.innerWidth=>视口宽度      window.innerHeight=> 视口高度

dom.offsetWidth =>获取元素可见宽度(width+border+padding)

dom.offsetHeight => 获取元素可见高度(height+border+padding)

e.pageX=>鼠标指针到X轴坐标e.pageY=>鼠标指针到Y轴坐标

   

   

   

   

   

   

       

           

                我是标题

               

X

           

       

   

   

网页显示为：

(2).右键菜单

e.target=>获取具体的元素   

e.preventDefault()=>阻止默认行为    比如：阻止超链接跳转，阻止右键点击事件

   

   

   

   

   

   

       

           

• 添加学生

           

• 查询学生

           

• 修改学生

           

• 删除学生

       

   

   

网页显示为：

(3).选项卡

classList.remove() => 移除样式          classList.add() => 添加样式

   

   

   

   

   

   

       

           

• 奔驰

           

• 宝马

           

• 奥迪

           

• 大众

       

       

           

•                 梅赛德斯-奔驰（Mercedes-Benz）是世界闻名的豪华汽车品牌。1886年1月，

                  卡尔·本茨发明了世界上第一辆三轮汽车，获得专利（专利号：DRP 37435 [1]  ），

                  被誉为“汽车的发明者”。与此同时，奔驰的另一位创始人戈特利布·戴姆勒发明了世界上第一辆四轮汽车。

             

           

•                 宝马（BMW），中文全称为巴伐利亚发动机制造厂股份有限公司，德国汽车品牌，

                  宝马的车系有i、X、Z、纯数字4个车型，1、2、3、4、5、6、7、8等几个系列，

                  还有在各系基础上进行改进的M系（宝马官方的高性能改装部门），宝马公司创建于1916年，

                  总部设在德国巴伐利亚州慕尼黑，BMW的蓝白标志宝马总部所在地巴伐利亚州州旗的颜色

             

           

•                 德国豪华汽车品牌，其标志为四个圆环相扣。现为德国大众汽车公司的子公司。

                  2018年12月20日，2018世界品牌500强排行榜发布，奥迪位列51位。 [2] 

                  2019年10月，Interbrand发布的全球品牌百强榜排名42。

             

           

•                 大众汽车（德语：Volkswagen）是一家总部位于德国沃尔夫斯堡的汽车制造公司，

                  也是世界四大汽车生产商之一的大众集团的核心企业。

                  2019年位居《财富》世界500强第9位。

             

       

   

   

网页显示为：

2. 键盘事件

onkeydown => 按键按下事件                 onkeypress => 按键产生字符事件

onkeyup =>按键弹起事件e.keyCode => 返回按键码

注意：注册事件时要加on，触发时不需要on

   

   

   

   

   

        请输入搜索内容：

       

        搜索

   

   

网页与控制台显示为：

(1).打字游戏

   

   

   

   

   

   

       

            按回车键开始/空格暂停/ESC重新开始

       

   

   

(2).贪吃蛇