Data：2020/9/18—

**

  • 记录题目的见解以及解题思路
  • 错误题目的修改和改进
  • 日常手撕代码关键词及关键语句

一、选择题

1.下面哪一个是合法的事件处理程序

01-1.png
知识点：
通过变量的单击事件（onclick）来引用function函数，函数赋值给事件属性
解：首先通过看题能够了解两种方式实现 回调(赋值函数名再去执行)，直接执行（直接赋值函数本体）
再依次去在test中去运行测试 答案：【A、D】
疑问点：

  1. 在Js绑定事件和html标签体中绑定事件的区别?

解：在原生js中绑定的事件是当作对象，通过赋值来执行对应的操作。
在html标签体事件是绑定事件执行cilck()函数，需要执行的操作放在双引号当中包裹起来。都是通过用户的操作来被动执行。

  1. 添加()和不添加的区别在那里？

解：不带上()可以理解为函数对象，带上()每次就会执行一次此函数

  1. 选择C中的btu.onclick=ok(); 当窗体控件全部执行之后将会自动执行ok函数，为什么会自动执行？

解：解析时默认认为是调用此函数，所以会执行。而不是将其赋值给onclick对象，被动执行。

2.拖动div时，需要在__事件中获取鼠标与div的相对x、y方向的距离offsetX和offsetY

01-2.png
知识点：
对于操作事件的一个熟悉了解
事件: onmousedown——鼠标按下
onmouseup——鼠标松开
onmousemove——鼠标移动
onmouseover——鼠标移动到控件，等同于css中的hover
解：题目要求获取鼠标和div的x、y距离，应当在鼠标按下onmousedown事件中进行获取,在鼠标移动onmousemove事件中修改控件的x、y距离

补充点：
**

3.分别单击a、b、c三个层后，弹出的消息框的值分别是多少？

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <style type="text/css">
  5.     .a{
  6.         width: 500px;
  7.         height: 500px;
  8.         background-Color: red;
  9.     }
  10.     .b{
  11.         width: 300px;
  12.         height: 300px;
  13.         background-Color: green;
  14.     }
  15.     .c{
  16.         width: 100px;
  17.         height: 100px;
  18.         background-Color: blue;
  19.     }
  20.   </style>
  22.   <script type="text/javascript">
  23.     var v = 0;
  24.     function a(){
  25.         v ++;
  26.         alert(v);
  27.         v = 0;
  28.     }
  30.     function b(){
  31.         v ++;
  32.     }
  34.     function c(){
  35.         v ++;
  36.     }
  37.   </script>
  38.  </head>
  39.  <body>
  40.     <div class="a" onclick="a()">
  41.         <div class="b" onclick="b()">
  42.             <div class="c" onclick="c()">
  44.             </div>
  45.         </div>
  46.     </div>
  47.  </body>
  48. </html>

test001.pngtest002.png