Week3-day3

目录

事件

- 兼容性写法

鼠标事件

             4. 阻止表单默认action动作

---

事件

当我们点击一个按钮的时候，会弹出一个对话框。

在JavaScript中， “点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事件

事件三个要术:

1.事件源:     在谁身上触发事件          btn

//绑定点击事件
				var btn = document.querySelector('button')
				btn.onclick = function () {

2.事件类型:    点击，移动，...          onclick

3.事件处理函数: 触发事件后执行的操作 (函数里面放 触发事件后执行的操作） function(){}

事件对象：

作用：处理事件

创建方式: 当触发事件时由系统自动创建

 在事件处理函数中 event 表示事件对象

- 改变事件对象的名称

               在事件处理函数中定义一个形参，当触发事件生成事件对象后，会将其赋值给形参.

eg:e

div.onclick = function (e) {
					// console.log(event);
                    e =  e || window.event //事件对象兼容性写法
					console.log(e)
				}

- 兼容性写法

window.event    针对IE浏览器

- 属性 -获取光标位置属性

               clientX  clientY  -> 浏览器窗口

               offsetX   offsetY  -> 相对于 自身

               pageX    pageY     -> 相对于 页面

鼠标事件

                click ：点击事件

                dbclick ：双击事件

                contextmenu ： 右键单击事件

                mousedown ：鼠标左键按下事件

                mouseup ：鼠标左键抬起事件

                mousemove ：鼠标移动

                mouseover ：鼠标移入事件

                mouseout ：鼠标移出事件

                mouseenter ：鼠标移入事件 事件冒泡

                mouseleave ：鼠标移出事件

 案例讲解及练习：05示例-区块移动.html

做什么?

           光标在大区块中移动，小区块随光标一起移动.

             1. 小区块移动问题

                 大区块相对定位，小区块绝对定位, 改变小区块left和top值

                 var pEle =  document.querySelector('p')

                pEle.style.left = '100px'

                pEle.style.top = '100px'

            2. 获取光标位置

                 事件对象属性

                    offsetX offsetY

                    clientX clientY

                    pageX  pageY

            问题:

              闪烁： 大区块设置移动事件， 小区块没有移动事件

                      光标在大区块移动触发移动事件，

                      当光标移到小区块，没有移动事件，回来初始位置,

           1. 边界检查

           2. 小区块默认隐藏，光标移入大区块显示，移出又隐藏

案例1，2，3讲解及练习

        change : 表单内容改变事件

        input : 表单内容输入事件

        submit : 表单提交事件

        默认行为:

           点击表单提交按钮

             1. 获取所有表单项内容，以名称值对的形式拼接到url地址后面

                  名称值对 => username=admin&password=123

                  url?username=admin&password=123                  

                 url地址是form表单元素的action属性值，如果没有指定就是当前url地址。

<form action="https://cn.bing.com/">    //url地址是form表单元素的action属性值

写了地址就会跳转到你想要的地址去

             2. 跳转到拼接之后的url页面

             3. 点击表单提交按钮首先触发表单提交事件submit,

                执行完继续执行action动作

             4. 阻止表单默认action动作

                 e.preventDefault()

---