Event

Posted 2020-09-26 develop-

事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来

      事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键

      事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小   

      通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应

 

     对用户行为或者页面自身行为的一种监听

     当某种行为触发之后，会调用指定的函数执行

     事件一般要配合函数使用！！通过事件驱动函数的执行

 

作用：

     1.验证用户输入的数据

     2.增加页面的动感效果

     元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互

   

事件流：

     分两个阶段：捕获阶段和冒泡阶段（IE)提出

     捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件

     冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素 

 

事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载

          onload 加载事件   onclick 点击事件的处理函数

          

事件三种方式\DOM事件级别：3级

     1.行内事件\html事件：就是将事件处理函数作为html的属性来使用；耦合度高  

       不属于DOM事件级中的任意一种       

        1）<input type="button" value="按钮" onclick="alert(js行内事件‘);"/>    

        2）<input type="button" value="按钮" onclick="showMsg();"/>

           js-->function showMsg () {

                    alert(‘js行内事件2‘);

                }

            如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!

 

      2.DOM0级事件处理--解耦

            步骤：

                (1)先获取需要绑定事件的元素对象

                (2)给该元素对象绑定事件

        缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，

              因为后面的事件覆盖前面的事件处理函数

        取消事件：onclick=null ;把时间置为空

         <input type="button" value="按钮" id="btn"/>

         js-->var inputs = document.getElementById("btn");

               inputs.onclick = function () { \\也可以使用链式操作

                    //func回调函数，也叫监听函数

                   alert("你好");

               }

 

     3.DOM2事件：才分捕获和冒泡，D0没有

          获取元素，绑定事件 addEventListener  listen听 listener监听

          传入三个参数：addEventListener(事件名称，事件处理方法，是否冒泡）

          用DOM2级事件，不需要加on 如onclick——>click

          可以绑定多个事件，之间不会覆盖

          缺点：兼容问题（跟IE有关！！)

          取消事件：removeEventlistener(‘事件名称字符串‘，事件处理方法，是否冒泡）

 

     4.DOM3级事件

       DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

       UI事件，当用户与页面上的元素交互时触发，如：load、scroll

       焦点事件，当元素获得或失去焦点时触发，如：blur、focus

       鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

       滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

       文本事件，当在文档中输入文本时触发，如：textInput

       键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

 

IE兼容DOM2

     1.IE8以及以下不支持 addEventListener,removeEventListener

       那么要使用[两个参数，不需要指定是否冒泡]

       attachEvent(事件名[带on的事件名],处理方法

       detachEvent(事件名[带on的事件名],处理方法）

     2.在IE9,IE10中同时支持这两种方式

     3.在IE11 只支持addEventListener,removeEventListener 

 

封装事件：让元素对象同时支持现代浏览器和IE8以及以下的浏览器

     抓住两者不同点

     如果window.addEventListener 存在就用他绑定

     如果不存在用attachEvent

 

     /** 文档注释

      * @func:  兼容各个浏览器的DOM2事件

      * @param:  {obj}  要被绑定事件的对象

      * @param:  {eventType}  事件类型

      * @param:  {fn}  事件处理的方法

     function bindEvent(obj,eventType,fn){   //fn方法名，fn()调用

          if(window.addEventListener){

               obj.addEventListener(eventType,fn,false)

          }else{

               obj.attachEvent(‘on‘+eventType,fn)

          }

 

事件冒泡：

     false:代表在冒泡阶段执行

           (‘click‘,fn1,false)

     true:代表在捕获阶段执行

           (‘click‘,fn1,true)

     在函数里面阻止冒泡

      1.第一步在函数里面定义一个形参event

      2.调用方法 event.stopPropagation();stop泡

      function fn1(event){

        event.stopPropagation();//阻止冒泡!!!

        alert(‘我是目标事件!‘);

      }

 

事件捕获：由父到子的传递过程

 

事件捕获和事件冒泡：

     捕获阶段

     document.body.addEventListener(‘click‘,function(){

          alert(‘我是body,紧随document触发‘）;

          document.body.style.background=‘red‘;

     },true);

     冒泡阶段

     document.body.addEventListener(‘click‘,function(){

          alert(‘----‘);

          document.body.style.background=‘‘;

     },false};

     写在一起时，最终背景无颜色变化，应注释冒泡阶段代码

 

计算器：

     1.加法

     sum.onclick=function(){

          var v1=Number(num1.value); //默认得到就是字符串类型

          var v2=Number(num2.value);

          result.value=v1+v2;

     }

     2.加减乘除运算

     result.value = eval(num1.value) 把一段字符串解析成js代码

     3.退格

     num.value=num.value.slice(0,num.value.length-1);

 

鼠标事件

     onclick: 鼠标单击事件  使用率90%

     ondblclick: 鼠标双击事件

     onmousedown: 鼠标上的按钮被按下时

     onmouseup: 鼠标按下后，松开时激发的事件

 

     d.onmousedown = function () {

        console.log(‘鼠标被按下!!‘);

     };

     onmouseover: 当鼠标移动\入到某对象范围的上方时触发的事件 over超过，上方

     onmousemove: 鼠标移动时触发的事件

     onmouseout: 当鼠标移出\离开某对象范围时触发的事件

 

把大问题分成小问题，去解决

鼠标控制键盘hover特效：

   event.target  指向当前的事件元素 event.target==M true

     var array = document.getElementsByClassName(‘btn‘);

     obj.onmouseover = function (event) {

          event.target.style.color = ‘red‘;

     obj.onmouseout = function () {

 

键盘事件：

     onkeypress: 当键盘上的某个键被按下并释放时触发事件 

          贪吃蛇：没反应

     onkeydown: 当键盘上某个按键被按下时触发的事件，cl会一在直打印

     onkeyup: 当键盘上某个按键被放开时触发的事件，按键松开时，cl打印

          贪吃蛇用此事件

     注意：页面内必须有被聚焦的对象

     event.keyCode 返回键盘码

     document.onkeypress = function(){

 

键盘控制运动

     var div = document.getElementById(‘div‘);

    document.onkeyup = function (event) {

        var code = event.keyCode;

        if (code == 38) {

            //往左走

            div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +‘px‘;

        } else if (code == 40) {

            div.style.top = div.offsetTop+100 +‘px‘;

        } else if (code == 37) {

            div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +‘px‘;

        } else if (code == 39) {

            div.style.left = div.offsetLeft+100 +‘px‘;

        }

    };

 

document.onmousemove=function(e){
    mov.style.left= e.pageX+‘px‘;
}

全局鼠标移动，放大镜跟着移动

---

 

Event对象

     1.跟特定事件相关，且包含该事件的属性和方法的对象

     2.可以传递给事件处理程序

     3.通过传入的参数，在函数内部可以访问到所有的方法和属性

     兼容性：IE8 以及以下不传入event对象

             用window.event 做兼容

     btn.onclick = function(event){

          event=event || window.event  //使用‘或’进行兼容

       

Event对象：事件方法

     1.stopPropagation: 阻止冒泡，就是在子元素上触发事件，不会触发父元素的事件

          兼容性：IE8及以下，用cancelBubble代替stopPropagation

          用法：event.cancelBubble = true;

     2.preventDefault: 阻止浏览器默认行为！！！如：a标签跳转或者表单提交

          兼容性：IE9及以下，用returnValue属性为false来实现

          用法：event.returnValue=false;

     实例封装

     1.阻止冒泡

     child.onclick = function (event) {

        event = event || window.event;//使用或进行兼容

        if (event.stopPropagation) {

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

     2.阻止默认行为

     a.onclick = function (event) {

        event = event || window.event;

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

 

Event对象属性：4块

     1.type: 返回事件类型，如click

     2.target: 返回事件触发的目标元素

          兼容性：IE8及以下用 srcElement

     btn.onclick  = function (e) {

        e = e || window.event;//取IE的event对象

        var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement

        console.log(e.type); //click

        console.log(ele); //<button id="btn">事件属性</button>

 

   3.鼠标事件属性

     screenX: 当前鼠标点距离屏幕左上角的水平距离

     screenY: 当前鼠标点距离屏幕左上角的垂直距离

     clientX: 当前鼠标点距离浏览器左上角的水平距离

     clientY: 当前鼠标点距离浏览器左上角的垂直距离

     pageX: 当前鼠标点距离页面(document/body)左上角的水平距离

     pageY: 当前鼠标点距离页面(document/body)左上角的垂直距离

     button: 获取鼠标 点击那个键 ;非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键

     which: 返回Unicode码

 

     4> 键盘事件属性:

        keycode : 返回键盘码

        ctrlKey: 是否按下ctrl键,如果按了,返回true,否则返回false

        shiftKey: 是否按下shift键,如果按了,返回true,否则返回false

        altKey: 是否按下alt键,如果按了,返回true,否则返回false

 

文档事件

     onload: 当页面加载完成后，触发！！在整个页面加载完后触发

     onresize: 当浏览器窗口大小被改变时，触发！

     onscroll: 当页面滚动的时候触发

     onbeforeunload: 当页面关闭或者刷新的时候触发

          需要配合return来使用。用event.returnValue="提示信息"解决兼容性

          老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框

        window.onscroll = function () {

            console.log(‘文档滚动了!!!‘);

      

        window.onbeforeunload = function (event) {

            event.returnValue = ‘你要离我而去吗?!‘;

 

返回顶部

      document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度       

 

表单事件:

     onfocus：当某个元素获得焦点时触发的事件

     onblur：当前元素失去焦点时触发的事件

     onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件

     onreset：当表单中reset的属性被激发时触发的事件

     onsubmit：一个表单被提交时触发的事件

     我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来

      事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键

      事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小   

      通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应

 

     对用户行为或者页面自身行为的一种监听

     当某种行为触发之后，会调用指定的函数执行

     事件一般要配合函数使用！！通过事件驱动函数的执行

 

作用：

     1.验证用户输入的数据

     2.增加页面的动感效果

     元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互

   

事件流：

     分两个阶段：捕获阶段和冒泡阶段（IE)提出

     捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件

     冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素 

 

事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载

          onload 加载事件   onclick 点击事件的处理函数

          

事件三种方式\DOM事件级别：3级

     1.行内事件\HTML事件：就是将事件处理函数作为html的属性来使用；耦合度高  

       不属于DOM事件级中的任意一种       

        1）<input type="button" value="按钮" onclick="alert(js行内事件‘);"/>    

        2）<input type="button" value="按钮" onclick="showMsg();"/>

           js-->function showMsg () {

                    alert(‘js行内事件2‘);

                }

            如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!

 

      2.DOM0级事件处理--解耦

            步骤：

                (1)先获取需要绑定事件的元素对象

                (2)给该元素对象绑定事件

        缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，

              因为后面的事件覆盖前面的事件处理函数

        取消事件：onclick=null ;把时间置为空

         <input type="button" value="按钮" id="btn"/>

         js-->var inputs = document.getElementById("btn");

               inputs.onclick = function () { \\也可以使用链式操作

                    //func回调函数，也叫监听函数

                   alert("你好");

               }

 

     3.DOM2事件：才分捕获和冒泡，D0没有

          获取元素，绑定事件 addEventListener  listen听 listener监听

          传入三个参数：addEventListener(事件名称，事件处理方法，是否冒泡）

          用DOM2级事件，不需要加on 如onclick——>click

          可以绑定多个事件，之间不会覆盖

          缺点：兼容问题（跟IE有关！！)

          取消事件：removeEventlistener(‘事件名称字符串‘，事件处理方法，是否冒泡）

 

     4.DOM3级事件

       DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

       UI事件，当用户与页面上的元素交互时触发，如：load、scroll

       焦点事件，当元素获得或失去焦点时触发，如：blur、focus

       鼠标事件，当用户通过鼠标在页面执行操作时触发如：dblclick、mouseup

       滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel

       文本事件，当在文档中输入文本时触发，如：textInput

       键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress

 

IE兼容DOM2

     1.IE8以及以下不支持 addEventListener,removeEventListener

       那么要使用[两个参数，不需要指定是否冒泡]

       attachEvent(事件名[带on的事件名],处理方法

       detachEvent(事件名[带on的事件名],处理方法）

     2.在IE9,IE10中同时支持这两种方式

     3.在IE11 只支持addEventListener,removeEventListener 

 

封装事件：让元素对象同时支持现代浏览器和IE8以及以下的浏览器

     抓住两者不同点

     如果window.addEventListener 存在就用他绑定

     如果不存在用attachEvent

 

     /** 文档注释

      * @func:  兼容各个浏览器的DOM2事件

      * @param:  {obj}  要被绑定事件的对象

      * @param:  {eventType}  事件类型

      * @param:  {fn}  事件处理的方法

     function bindEvent(obj,eventType,fn){   //fn方法名，fn()调用

          if(window.addEventListener){

               obj.addEventListener(eventType,fn,false)

          }else{

               obj.attachEvent(‘on‘+eventType,fn)

          }

 

事件冒泡：

     false:代表在冒泡阶段执行

           (‘click‘,fn1,false)

     true:代表在捕获阶段执行

           (‘click‘,fn1,true)

     在函数里面阻止冒泡

      1.第一步在函数里面定义一个形参event

      2.调用方法 event.stopPropagation();stop泡

      function fn1(event){

        event.stopPropagation();//阻止冒泡!!!

        alert(‘我是目标事件!‘);

      }

 

事件捕获：由父到子的传递过程

 

事件捕获和事件冒泡：

     捕获阶段

     document.body.addEventListener(‘click‘,function(){

          alert(‘我是body,紧随document触发‘）;

          document.body.style.background=‘red‘;

     },true);

     冒泡阶段

     document.body.addEventListener(‘click‘,function(){

          alert(‘----‘);

          document.body.style.background=‘‘;

     },false};

     写在一起时，最终背景无颜色变化，应注释冒泡阶段代码

 

计算器：

     1.加法

     sum.onclick=function(){

          var v1=Number(num1.value); //默认得到就是字符串类型

          var v2=Number(num2.value);

          result.value=v1+v2;

     }

     2.加减乘除运算

     result.value = eval(num1.value) 把一段字符串解析成js代码

     3.退格

     num.value=num.value.slice(0,num.value.length-1);

 

鼠标事件

     onclick: 鼠标单击事件  使用率90%

     ondblclick: 鼠标双击事件

     onmousedown: 鼠标上的按钮被按下时

     onmouseup: 鼠标按下后，松开时激发的事件

 

     d.onmousedown = function () {

        console.log(‘鼠标被按下!!‘);

     };

     onmouseover: 当鼠标移动\入到某对象范围的上方时触发的事件 over超过，上方

     onmousemove: 鼠标移动时触发的事件

     onmouseout: 当鼠标移出\离开某对象范围时触发的事件

 

把大问题分成小问题，去解决

鼠标控制键盘hover特效：

   event.target  指向当前的事件元素 event.target==M true

     var array = document.getElementsByClassName(‘btn‘);

     obj.onmouseover = function (event) {

          event.target.style.color = ‘red‘;

     obj.onmouseout = function () {

 

键盘事件：

     onkeypress: 当键盘上的某个键被按下并释放时触发事件 

          贪吃蛇：没反应

     onkeydown: 当键盘上某个按键被按下时触发的事件，cl会一在直打印

     onkeyup: 当键盘上某个按键被放开时触发的事件，按键松开时，cl打印

          贪吃蛇用此事件

     注意：页面内必须有被聚焦的对象

     event.keyCode 返回键盘码

     document.onkeypress = function(){

 

键盘控制运动

     var div = document.getElementById(‘div‘);

    document.onkeyup = function (event) {

        var code = event.keyCode;

        if (code == 38) {

            //往左走

            div.style.top = (div.offsetTop-100)<0?0:div.offsetTop-100 +‘px‘;

        } else if (code == 40) {

            div.style.top = div.offsetTop+100 +‘px‘;

        } else if (code == 37) {

            div.style.left = (div.offsetLeft-100)<0?0:div.offsetLeft-100 +‘px‘;

        } else if (code == 39) {

            div.style.left = div.offsetLeft+100 +‘px‘;

        }

    };

 

document.onmousemove=function(e){
    mov.style.left= e.pageX+‘px‘;
}

全局鼠标移动，放大镜跟着移动

---

 

Event对象

     1.跟特定事件相关，且包含该事件的属性和方法的对象

     2.可以传递给事件处理程序

     3.通过传入的参数，在函数内部可以访问到所有的方法和属性

     兼容性：IE8 以及以下不传入event对象

             用window.event 做兼容

     btn.onclick = function(event){

          event=event || window.event  //使用‘或’进行兼容

       

Event对象：事件方法

     1.stopPropagation: 阻止冒泡，就是在子元素上触发事件，不会触发父元素的事件

          兼容性：IE8及以下，用cancelBubble代替stopPropagation

          用法：event.cancelBubble = true;

     2.preventDefault: 阻止浏览器默认行为！！！如：a标签跳转或者表单提交

          兼容性：IE9及以下，用returnValue属性为false来实现

          用法：event.returnValue=false;

     实例封装

     1.阻止冒泡

     child.onclick = function (event) {

        event = event || window.event;//使用或进行兼容

        if (event.stopPropagation) {

            event.stopPropagation();

        } else {

            event.cancelBubble = true;

     2.阻止默认行为

     a.onclick = function (event) {

        event = event || window.event;

        if (event.preventDefault) {

            event.preventDefault();

        } else {

            event.returnValue = false;

 

Event对象属性：4块

     1.type: 返回事件类型，如click

     2.target: 返回事件触发的目标元素

          兼容性：IE8及以下用 srcElement

     btn.onclick  = function (e) {

        e = e || window.event;//取IE的event对象

        var ele = e.target || e.srcElement;//取出元素,兼容IE8 srcElement

        console.log(e.type); //click

        console.log(ele); //<button id="btn">事件属性</button>

 

   3.鼠标事件属性

     screenX: 当前鼠标点距离屏幕左上角的水平距离

     screenY: 当前鼠标点距离屏幕左上角的垂直距离

     clientX: 当前鼠标点距离浏览器左上角的水平距离

     clientY: 当前鼠标点距离浏览器左上角的垂直距离

     pageX: 当前鼠标点距离页面(document/body)左上角的水平距离

     pageY: 当前鼠标点距离页面(document/body)左上角的垂直距离

     button: 获取鼠标 点击那个键 ;非IE浏览器中0为鼠标左键，1为鼠标中键，2为鼠标右键

     which: 返回Unicode码

 

     4> 键盘事件属性:

        keycode : 返回键盘码

        ctrlKey: 是否按下ctrl键,如果按了,返回true,否则返回false

        shiftKey: 是否按下shift键,如果按了,返回true,否则返回false

        altKey: 是否按下alt键,如果按了,返回true,否则返回false

 

文档事件

     onload: 当页面加载完成后，触发！！在整个页面加载完后触发

     onresize: 当浏览器窗口大小被改变时，触发！

     onscroll: 当页面滚动的时候触发

     onbeforeunload: 当页面关闭或者刷新的时候触发

          需要配合return来使用。用event.returnValue="提示信息"解决兼容性

          老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框

        window.onscroll = function () {

            console.log(‘文档滚动了!!!‘);

      

        window.onbeforeunload = function (event) {

            event.returnValue = ‘你要离我而去吗?!‘;

 

返回顶部

      document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度       

 

表单事件:

     onfocus：当某个元素获得焦点时触发的事件

     onblur：当前元素失去焦点时触发的事件

     onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件

     onreset：当表单中reset的属性被激发时触发的事件

     onsubmit：一个表单被提交时触发的事件

     我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果