Javaweb - 5 事件的绑定
目录
什么是事件
常见事件
鼠标事件
键盘事件
表单事件
事件的绑定方式
通过元素的属性绑定
通过 DOM 编程动态绑定
总结：
什么是事件
HTML 事件可以是浏览器行为，也可以是用户和行为。当一些行为发生时，可以自动触发对应的 JS 函数的运行。JS 的事件驱动指的就是，行为触发代码运行，这一特点。
常见事件
详见：HTML DOM 事件对象 | 菜鸟教程
鼠标事件
键盘事件
表单事件
事件的绑定方式
通过元素的属性绑定
测试鼠标事件
测试键盘事件
测试表单事件：
这里需要注意的是：
当点击输入框之后，即是获得焦点了，再当鼠标点击输入框以外的位置，即是失去焦点了。
当向输入框中输入内容后，控制台并不会打印“内容改变了”，而是当输入完内容之后，鼠标再点击输入框以外的位置，此时才真的是内容发生改变了，才会打印“内容改变了”。
我们还可以拿到用户在输入框 / 选择框改变的值：
补充：在 select 标签的 option 标签中，value 值默认就是双标签中间的文本，但我们也可以在 option 标签中手动指定 value ==》 <option value = "1">北京</option>
还有是在表单提交的按钮上关联事件：
我们关联的事件 testSubmit 函数中，使用的是 alert，这样在这里，我们可以有机会来阻止表单的提交 ==》event.preventDefault(); 这行代码，就可以阻止组件的默认行为（组件的默认行为，就类似于，点击 submit 的按钮，就会提交，点击 reset 的按钮，就会重置~）
增加了阻止组建默认行为的代码后，仍然会跳出弹框，但是当我们点击确定的时候，却无法跳转到表单中的 action 地址~
还有阻止表单提交的方法如下：
弹窗有三种方式：
1. alert() 信息提示框
2. prompt() 信息输入框
3. confirm() 信息确认框
上面的这种阻止方法，就利用了信息确认框，confirm() 会给我们返回一个 boolean 类型的变量，当我们点击取消的时候，flag 为 false，就会阻止表单提交~
还有一种方法是：直接利用返回值~
补充注意：
1. 通过事件元素属性绑定函数，在行为发生的时候会自动执行函数
2. 一个事件可以同时绑定多个函数
3. 一个元素可以同时绑定多个事件
4. 方法中可以传入 this 对象，代表当前元素
通过 DOM 编程动态绑定
这里先是大概介绍一下 DOM 编程~
通过 document.getElementById 获得了一个对象，这个对象就是一个按钮
但，细心的观众已经发现，上面的 script 代码，我们是放在了 body 里面，我们前面不是说过吗，script 的代码，放在任何地方都可以，但是我们一般不是都放在 head 标签中吗？
==》
我们尝试一下，如果把 DOM 编程的代码，放在 head 中
测试发现，我勒个豆，为什么这次点击那个按钮，就没有反应了呢？？？
==》
代码的顺序会影响浏览器对代码的解析~
浏览器从上往下解析，如果 DOM 编程中的代码，放在 body 中的 button 后面，就可以正常通过 documentr.getElementById 来返回获取到这个按钮。
但是，当 DOM 编程中的代码，被放在 head 中，浏览器解析的时候，从上往下扫描，是先扫到了 document.getElementById，通过 id 找到 btn1，但此时浏览器还没有扫到下面的 button 代码，所以，这行代码就无法根据 document.getElementById 来获得按钮，所以获取的对象就是 null，是无法在 null 上设置事件的~ 所以当我们 F12 打开控制台的时候，会出现下面的报错信息~
如何解决呢？？？
==》
可以先让浏览器扫描完完整的所有代码，然后再执行 script 里面的代码就可以啦~
这时候就继前三种，鼠标事件，键盘事件，表单事件之后，有了第四种事件，页面加载事件~
onload ==》 页面加载完毕事件~
onload 事件是多会发生的呢？？
==》
当浏览器将所有的代码都扫描完成之后，才会执行 onload 绑定的事件
如上面的代码， 就可以实现我们想要的功能啦~
即因为 body 中有了 onload 事件，就会扫描完整个浏览器的代码，再执行 onload 中的代码，将其封装为一个函数 ready()
我们也可以对上面的方法进行简写：
直接在 head 位置的 script 中，用 window.onload 即可~
我们也可以用上面的方法对 div 进行事件绑定：
通过上面的代码，就可以让本来是 green 的 div 框，通过单击，然后转换成 red ~
总结：
DOM 编程在本文仅仅只是浅尝即止是使用，后面我们会详细介绍~