Event

Posted develop-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Event相关的知识,希望对你有一定的参考价值。

事件(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.lefte.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的主要内容,如果未能解决你的问题,请参考以下文章

多线程

evevt

诺禾-EventBus/EventQueue 再思考

诺禾-EventBus/EventQueue 再思考

JavaScript--自定义事件Event

在setState()之后更新Flutter页面