DAY 06-07随堂笔记

 - day 06-07

   -点击事件

    什么是点击事件

        用户在浏览器上触发一个操作 浏览器上执行相关的函数进行处理 称之为事件

        需要有触发方式和执行事件

        [例如]用户点击注册按钮 浏览器会完成注册的操作

   

   

    事件的模式

        内联模式(用的较少)  

    方法1 : 直接在标签内以指定属性方式

    方法2 : 直接在标签内调用函数(常用3)

        脚本模式 :采用对应的分离  将对应的时间和处理的函数进行分离

        <标签 onclik = "aaa()"></标签>

        <script>

            function = aaa(){}

        </script>

    方式1 : 在js里面写处理的函数  js和html分离 (常用2)

            添加点击事件之后 = 函数

    方式2 : 添加点击事件之后 = 函数名   不需要加()

    事件的划分

    事件的执行者 元素

    事件名 on开头+对应的名字

    事件处理函数 function

    事件的分类

        1.鼠标事件 (mouse)

        点击事件

        onclick 点击

        ondbclick

        onmousedown  按下

        onmouseup   弹起

        [顺序]  按下 弹起  点击

        div.onmouseenter = function(){}

        div.onmouseleave = function(){}

        [out  和  over ]  事件冒泡 父类触发 子类也会触发

        div.onmouseout = function(){}

        div.onmouseover = function(){}

        移动

        onmousemove

       

        2.键盘事件  (key)

        onkeyup (键盘弹起)

        onkeydowm (键盘按下)

        onkeypress  (字符键才触发)

        3.系统事件

          - html元素的一些事件

                onload 加载事件

                onunload 卸载

            表单元素

                获取焦点事件  

                 onfocus

                 [注] focus方法可以直接获取焦点

                失去焦点事件

                 onblur

                选择

                 onselect(只有选中之后 才会调用函数)

                修改数据(两个条件  修改数据 失去焦点)

                 onchange

                输入一个 调用一次函数

                 oninput (vue 双向绑定原理实现)

                onsubmit  表单元素form才能使用

                onreset 重置事件  也是给表单元素form使用

        滚动事件

            scroll 滚动栏 任何具备滚动栏都可以添加  

                (一般用于回到顶部的效果  点击侧边栏滚动到页面的某个位置 )

        - 所有的函数都具备的一个参数arguments(所有的传递参数 是一个数组)

            处理函数也同样是函数 同样存在这个

            通过我们的对比发现这个arguments里面只有一个参数  这个参数是一个event对象(事件源对象)

            由于arguments[0] 对应的arguments数组里面的第一个参数 (第一个形参 所以我们可以在对应的处理函数中直接声明一个形参来接收我们的arguments里面的数据  一般会命名 (e), (event))

            - event事件源对象的(Windows里面)

            event对象里面的属性

            位置相关

            offsetX  鼠标离当前元素的距离

            offsetY

            clientX  鼠标离网页最左的距离(不包括不可见部分)

            clientY

            pageX   鼠标离网页最左的距离(包括不可见部分)

            pageY

            screenX 鼠标离屏幕最左的距离

            screenY

            按键相关属性

            三个按键  是否按下(长按)先按下在操作 bool类型值

            ctrlkey

            altkey

            shiftkey

            button  只针对点击事件 点击时鼠标的那个键(0,左键  1,中间 2,右键 )

            type    事件触发类型

            target  当前触发事件的对象

                [比如] div里面有一个span触发 是返回的是span标签

            currentTaget  当前加事件的对象

                [比如] div里面有一个span触发 出来的是div标签

        - 键盘输入事件的相关属性

           key 获取对应按下的键 返回的是按键

           keyCode  获取按下的见的ASCII码  返回ASCII码  

                    [注]不管是大写还是小写 获取的都是大写的ASCII码  

           charCode  获取按下的见的ASCII码 只能在keypress事件中使用

       

        - 事件委托机制

            [注]父元素下面有多个相同的元素需要相同的事件 进行使用

            概念 : 将原本元素需要做的时间 交给他的父元素

                在父元素的事件中进行判断  使用e.target  获取当前触发事件的对象