首页 > 代码库 > Event

Event

2024-10-15 06:53:39   219人阅读

事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来
      事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键
      事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小   
      通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应
 
     对用户行为或者页面自身行为的一种监听
     当某种行为触发之后，会调用指定的函数执行
     事件一般要配合函数使用！！通过事件驱动函数的执行
 
作用：
     1.验证用户输入的数据
     2.增加页面的动感效果
     元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互
   
事件流：
     分两个阶段：捕获阶段和冒泡阶段（IE)提出
     捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件
     冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素 
 
事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载
          onl oad 加载事件   onclick 点击事件的处理函数
          
事件三种方式\DOM事件级别：3级
     1.行内事件\HTML事件：就是将事件处理函数作为html的属性来使用；耦合度高  
       不属于DOM事件级中的任意一种       
        1）<input type="button" value="http://www.mamicode.com/按钮" onclick="alert(js行内事件‘);"/>    
        2）<input type="button" value="http://www.mamicode.com/按钮" onclick="showMsg();"/>
           js-->function showMsg () {
                    alert(‘js行内事件2‘);
                }
            如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!
 
      2.DOM0级事件处理--解耦
            步骤：
                (1)先获取需要绑定事件的元素对象
                (2)给该元素对象绑定事件
        缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，
              因为后面的事件覆盖前面的事件处理函数
        取消事件：onclick=null ;把时间置为空
         <input type="button" value="http://www.mamicode.com/按钮" 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=http://www.mamicode.com/v1+v2;
     }
     2.加减乘除运算
     result.value = http://www.mamicode.com/eval(num1.value) 把一段字符串解析成js代码
     3.退格
     num.value=http://www.mamicode.com/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=http://www.mamicode.com/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 = http://www.mamicode.com/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="http://www.mamicode.com/提示信息"解决兼容性
          老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框
        window.onscroll = function () {
            console.log(‘文档滚动了!!!‘);
      
        window.onbeforeunload = function (event) {
            event.returnValue = http://www.mamicode.com/‘你要离我而去吗?!‘;
 
返回顶部
      document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度       
 
表单事件:
     onfocus：当某个元素获得焦点时触发的事件
     onblur：当前元素失去焦点时触发的事件
     onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件
     onreset：当表单中reset的属性被激发时触发的事件
     onsubmit：一个表单被提交时触发的事件
     我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
事件（event)是javascript应用跳动的心脏，进行交互，使网页动起来
      事件可能是用户在某些内容上的点击，鼠标经过某个特定元素或按下键盘上的某些按键
      事件还可能是web网页加载完成，用户滑动窗口，改变窗口大小   
      通过js可以监听特定事件的发生，并规定让某些事件发生，以对这些事件作出响应
 
     对用户行为或者页面自身行为的一种监听
     当某种行为触发之后，会调用指定的函数执行
     事件一般要配合函数使用！！通过事件驱动函数的执行
 
作用：
     1.验证用户输入的数据
     2.增加页面的动感效果
     元素与元素之间的交互，用户与页面之间的交互，前段与后端的交互
   
事件流：
     分两个阶段：捕获阶段和冒泡阶段（IE)提出
     捕获：先由不具体的元素接收事件，最具体的节点最后才能接收到事件
     冒泡：先从具体的接收元素，然后逐步向上传播不具体的元素 
 
事件名称：click 点击 ， mousemove 鼠标移动 ， load 加载
          onl oad 加载事件   onclick 点击事件的处理函数
          
事件三种方式\DOM事件级别：3级
     1.行内事件\HTML事件：就是将事件处理函数作为html的属性来使用；耦合度高  
       不属于DOM事件级中的任意一种       
        1）<input type="button" value="http://www.mamicode.com/按钮" onclick="alert(js行内事件‘);"/>    
        2）<input type="button" value="http://www.mamicode.com/按钮" onclick="showMsg();"/>
           js-->function showMsg () {
                    alert(‘js行内事件2‘);
                }
            如果方法名改变，那么就改两处，方法名和引用位置都要改,不方便!!!
 
      2.DOM0级事件处理--解耦
            步骤：
                (1)先获取需要绑定事件的元素对象
                (2)给该元素对象绑定事件
        缺点：DOM0级事件，不能给同一个元素对象绑定同类型的事件，
              因为后面的事件覆盖前面的事件处理函数
        取消事件：onclick=null ;把时间置为空
         <input type="button" value="http://www.mamicode.com/按钮" 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=http://www.mamicode.com/v1+v2;
     }
     2.加减乘除运算
     result.value = http://www.mamicode.com/eval(num1.value) 把一段字符串解析成js代码
     3.退格
     num.value=http://www.mamicode.com/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=http://www.mamicode.com/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 = http://www.mamicode.com/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="http://www.mamicode.com/提示信息"解决兼容性
          老的浏览器会把return之后的值返回，但是部分新浏览器只能使用默认的提示框
        window.onscroll = function () {
            console.log(‘文档滚动了!!!‘);
      
        window.onbeforeunload = function (event) {
            event.returnValue = http://www.mamicode.com/‘你要离我而去吗?!‘;
 
返回顶部
      document.body.scrollTop可以获取页面滚动的高度，同时可以赋值，更改滚动的高度       
 
表单事件:
     onfocus：当某个元素获得焦点时触发的事件
     onblur：当前元素失去焦点时触发的事件
     onchange：当前元素失去焦点并且元素的内容发生改变而触发的事件
     onreset：当表单中reset的属性被激发时触发的事件
     onsubmit：一个表单被提交时触发的事件
     我们可以的通过form表单的name属性,获取整个表单!!!，action="#"提交到本地，submit才有效果
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Event


联系
我们