day11事件上

// 一

        // js事件是指我们使用鼠标或者键盘做了某些事情来触发对应的处理

        // onclick是事件  表示点击事件  执行的操作

        // function是处理的函数  表示我们要做的事

        document.getElementsByTagName("button")[0].onclick=function(){

            console.log('hello');

        }

 

// 二

         // 脚本模式  使用比较多  js和html分离  规范

         function fn(){

             console.log('hello');

         }

        // 脚本2  document.getElementsByTagName("button")[0].onclick=fn   不需要加()  加括号会自动执行

 

        // 内联模式  直接在标签内部以指定属性的方式 较少

        // <button onclick="alert('hello')">点击</button>

        // <button onclick="fn()">点击</button>

 

//  三

        // 事件的组成  

            // 触发事件的元素  document.getElementsByTagName("button")[0]

            // 对应的事件  onclick

            // 处理函数   function()

   

        // 事件函数的特点  全小写且以on开头  on事件开头   click是时间名  点击

 

// 四

        // 事件分为三类  鼠标事件  键盘事件   HTML事件

            // 1.

            // 鼠标事件   鼠标的一切操作都是鼠标事件

            // 点击  滚轮 移动

 

            // 点击相关事件

            // onclick  点击

            // ondblclick  双击

           

            // 移动相关  时间名以mouse开头

            // onmousedown  鼠标按下

            // onmouseup    鼠标抬起

            // onmouseout   鼠标移出

            // onmouseover    鼠标移入  子元素移入也会触发

            // onmousemove   鼠标移动

            // onmouseleave  鼠取消悬停

            // onmouseenter  鼠标悬停   子元素移入不会触发

            // onmouseover和哦那mouseenter区别

                // onmouseover      子元素移入也会触发  (子元素会触发第二次)

                // onmouseenter     子元素移入不会触发

            // 鼠标滚轮相关

 

            // 2.  window.onkeydown

            // 键盘事件  一般操作是给整体加

            // onkeydown   键盘按下

            // onkeyup     键盘抬起

            // onkeypress  键盘按下和弹起之间   按下之后弹起之前

 

            // 3

            // html事件  window.onload

            // 页面加载事件  默认触发  执行一次

            // onload

            // onsubmit  提交按下触发的事件  一般触发的元素给form表单提交

            // onfocus  获取焦点

            // onblur   失去焦点

            // onchange 修改  当里面的value值发生变化以后触发  失去焦点的时候触发  加给表单元素

            // onscroll  滚动栏滚动  window.onscroll  重点

            // onselect  选择  一般用于复制粘贴  input  textarea  次重点

            // unload 卸载  页面被卸载的时候  组件被卸载

            // reset  重置的时候  加给form

 

//五 事件对象

 

　　

　　// function里面可以使用arguments来获取参数数组

        document.getElementsByTagName('button')[0].onclick=function(){

            // 获取参数 发现对应的arguments里面只有一个参数  这个参数类型为pointEvent

            // pointEvent是什么  坐标事件源

            console.log(arguments);

            console.log(arguments[0])//获取的是pointEvent  可以获取坐标  x  y  就是鼠标的坐标

            // 鼠标事件中

            console.log(arguments[0].x) //x坐标

            console.log(arguments[0].y)  //y坐标

            console.log(arguments[0].target)  //触发的元素

            console.log(arguments[0].type)  //触发的事件

            // 键盘事件

            console.log(arguments[0].altkey)  //是否按了alt键  是返回true  不是返回false

            console.log(arguments[0].shiftkey) //是否按了shift键  是返回true  不是返回false

            console.log(arguments[0].ctrlkey) //是否按了ctrl键  是返回true  不是返回false

            // 这个arguments[0]其实是拿到我们对应的事件源对象

            // 但是像上面这样写太长了  所以我们有内置的事件源对象  window.event

            // 鼠标按下是哪边的  0左  1滚轮  2右

           

        }

        //KeyboardEvent的事件源对象键盘事件源他也是个event

        window.onclick = function(e){//e是形参随便写一般建议写e（规范)

            //console.log(arguments[0]); e是不是就相当于arguments[0]//获取第一个参数

            console.log(e);

            console.log(window.event);//window.event 的的对象其实就是这个e

            e=e|| window.event //window.event 写后面  拿到的就是事件源对象  常用写法

            console.log(e.code);//获取你按下的键

            console.log(e.key) //获取你按下键的值

            console.log(e.keyCode) //获取按键的ascii码

            console.log(e.altkey)  

        }

 

 

六 event的相关属性

 

           

　　// event 的相关属性

        var div=document.getElementsByTagName("div")[0]

        // 鼠标的事件源对象

        div.onclick=function(){

            e=e||window.event  //e表示事件源对象

            //  鼠标点击的键  0表示左键 1表示滚轮  2表示右键

            console.log(e.button);

            console.log(e.target);//目标元素  显示的是div

            console.log(e.type)  //事件类型  click事件

            console.log(e.x)  //获取鼠标的x坐标  基于可视区域

            console.log(e.y)  //获取鼠标的y坐标  基于可视区域

            console.log(e.pageX) //获取鼠标的x坐标  基于页面的可视区域

            console.log(e.pageY)  //获取鼠标的y坐标 基于页面的可视区域

            console.log(e.offsetX)//获取鼠标的坐标x 基于div盒子的偏移坐标X  离div盒子左上角顶点  不会计算margin 会计算padding

            console.log(e.offsetY)//获取鼠标的坐标y 基于div盒子的偏移坐标X  离div盒子左上角顶点

            console.log(e.screenX)//screen 获取屏幕信息  在屏幕上的x

            console.log(e.screenY)//screen 获取屏幕信息  在屏幕上的y

            console.log(e.clientX)//获取鼠标的x坐标基于当前可视区域的x

            console.log(e.clientY)//获取鼠标的y坐标基于当前可视区域的y

            console.log(e.path);//元素路径

            console.log(e.ctrlKey); //是否按着ctrl  按着为true

            console.log(e.shiftKey) //是否按着shift

            console.log(e.caltKey)  //是否按着alt

        }

        // 键盘的事件源对象

        window.onkeydown=function(){

            e=e||window.event

            console.log(e.key);//获取按键的值

            console.log(e.code) //获取按键

            console.log(e.keyCode) //获取按键的ascii码  不区分大小写  只返回大写

            console.log(e.ctrlKey); //是否按着ctrl  按着为true

            console.log(e.shiftKey) //是否按着shift

            console.log(e.caltKey)  //是否按着alt

            console.log(e.charCode); //字符编码  只有在按字符的时候才有  一般加给keypress事件

            console.log(e.target);//目标元素  显示的是body

            console.log(e.type)  //事件类型  keydown事件

        }

        // 在弹起之前 按下之后 针对字符按键 a-z  0-9 charCode 只在这里有用  其他按键不会执行

        window.onkeypress=function(){

            console.log(e.charCode)//返回对应字符的编码  ascii码 区分大小写

        }

 

七 this讲解

 

　　<a href=""></a><a href=""></a><a href=""></a>

 

        var a=document.getElementsByTagName("a")

        var a = document.getElementsByTagName( 'a')  

        //this会执行触发的元素e.target

        function handlerClick(){

        console.log( 'a点击了'+this.innerText);

        }

        for(var i in a){

        a[i].onclick = handlerClick//相当于下面的

        //a[i].onclick = function handlerClick(){

        // console.log( 'a点击了'+this.innerText); //this指向a[i]你点了谁就指向谁/ /}

        }

        function handlerClick(that){

        console.log( 'a点击了'+that.innerText);}

        var b = document.getElementsByTagName( "b" )

        for(var i in b){

        console.log(this);//指向window的外层没有对象包的情况下this指向window

        b[i].onclick = handlerClick(this)//后面加()表示调用这个里面的this指向window的

        }