首页 > 代码库 > 事件类型

事件类型

2024-09-08 22:03:10   221人阅读

事件：当发生一个动作的时候，会触发一个函数

一、鼠标事件

   1.click:鼠标点击事件，在一个元素上鼠标的左键（只能是左键，mac上可以是滚轮）点击(按下去并抬起)下去就会触发
    2.dbclick:鼠标双击事件，在一个元素上鼠标左键（只能是左键，mac上可以是滚轮）双击下去就会触发 
    3.mousedown:鼠标按下事件，在一个元素上鼠标左中右按下去（不需要抬起）的时候就会触发
    4.mouseup:鼠标抬起事件，在一个元素上鼠标左中右（mac下右键不行）按下去并抬起来的时候就会触发
    5.mousemove:鼠标移动事件，在一个元素上鼠标只要移动的时候就会触发 
    6.mouseover:鼠标移入事件，鼠标移到一个元素身上的时候就会触发
    7.mouseout:鼠标移出事件，鼠标从一个元素身上移出的时候就会触发
                        mouseover和mouseout会将事件传递给子级
    8.mouseenter:鼠标移入事件，鼠标移到一个元素身上的时候就会触发
    9.mouseleave:鼠标移出事件，鼠标从一个元素身上移出的时候就会触发
                           mouseenter和mouseleave不会将事件传递给子级（低版本ie不兼容）
二、键盘事件
  键盘事件    ：不是所有的元素都会有键盘事件，只有有焦点的元素才会有
    1.keydown: 当键盘按下去的时候就会触发，如果按下不抬起，这个事件会一直触发 
    2.keyup:   当键盘抬起的时候就会触发 
  1. <div></div> //div不是焦点元素，所以没有键盘事件
  2. <inputtype="text"/> //有键盘事件
  3. <textarea></textarea>    //有键盘事件
三、焦点事件
    只有焦点元素才有焦点事件
 
             *     focus            有焦点事件的元素获取焦点后就会触发
             *     blur            有焦点事件的元素失去焦点后就会触发
             * 
             *     tabindex            用来改变tab键切换的顺序
             * 
             * 
             * 设置焦点的方法
             *         .focus();            让元素获取到焦点
             *         .blur();                让元素失去焦点        
  1. <inputtype="text"value="kaivon"tabindex="3"/>        没有tabindex的话：点击tab键如果没有的话就按照顺序找html，
  2. <textareatabindex="2"></textarea>                        给html标上tabindex就会在按tab得时候找对应html的index.
  3. <buttontabindex="1">kaivon</button>
  4. <selectname=""id=""tabindex="4">
  5. <optionvalue="">123</option>
  6. <optionvalue="">456</option>
  7. </select>
  8. <inputtype="checkbox"tabindex="6"/>
  9. <inputtype="radio"tabindex="5"/>
  11. <inputtype="text"id="tex"/>         
               //                tex.focus(); 让该元素主动获取到了焦点，(被动被选中)
               //                tex.blur();
四、.select()方法
 
  1. <script>
  2. /*
  3. * select();
  4. * 在表单元素里，选中用户输入的内容
  5. */
  7. window.onload=function(){
  8. var input=document.querySelector("input");
  9. var btn=document.querySelector("button");
  10. var textarea=document.querySelector("textarea");
  12. btn.onclick=function(){
  13. //同时出现两个方法，后面会把前面的覆盖了
  14. input.select(); //被覆盖了
  15. textarea.select(); //把te在xtarea的所有字符串都选中
  16. };
  17. };
  18. </script>
  19. </head>
  20. <body>
  21. <inputtype="text"/>
  22. <button>点击选中文字</button>
  23. <textarea></textarea>
  24. </body>
 
五、事件对象
 
             * event对象
             *     记录了事件发生时的一些关于事件详细的信息
             *     当一个事件发生的时候，和当前这个事件有关第的细节信息都会保存在一个对象当中，这个对象我们称他为事件对象
             * 
             * event对象是事件处理函数里的第一个参数，不同的事件有不同的事件对象，事件对象里的内容是不一样的
  1. document.onclick=function(ev){
  2. console.dir(ev);
  3. }
  5. /*function fn(ev){
  6. console.log(ev);
  7. }
  8. fn(); */ //这个函数不是事件调用的，所以没有事件对象
六、事件对象获取鼠标坐标-event.clientX   event.clentY
 
             *     event.clientX/event.clientY            事件发生的时候，鼠标的位置信息
             *     坐标的值是根据可视区的左上角进行计算
      1. window.onload=function(){
  2. var div=document.getElementById("div1");
  4. document.onmousemove=function(ev){
  5.                            ev是event的缩写
  6. div.style.left=ev.clientX+‘px‘;
  7. div.style.top=ev.clientY+‘px‘;
  8. };
  9. };
  10.     <divid="div1" style="position:absolute;"></div>
  11. 该div会跟随鼠标的位置移动
七、事件对象获取对象源  -event.target
 *     它会一层一层往里面去找，直到找到最里层的那个元素  （相当于this）
  1. window.onload=function(){
  3. var list=document.getElementById("list");
  4. var lis=document.querySelectorAll("li");
  6. /*for(var i=0;i<lis.length;i++){
  7. lis[i].onclick=function(){
  8. console.log(this.innerHTML);
  9. };
  10. }*/
  12. //事件委托（代理）
  13. list.onclick=function(ev){
  14. //console.log(ev.target)
  15. if(ev.target.tagName==‘LI‘){
  16. console.log(ev.target.innerHTML);
  17. }
  18. //console.log(ev.target.tagName)
  19. };
  22. list.innerHTML+=‘<li>yellow</li>‘;      //因为innerHTML的原因，上面for的功能会失效，这样使用事件委托能够实现想要的功能。
  23. };
  24. </script>
  25. </head>
  26. <body>
  27. <ulid="list">
  28. <li>red</li>
  29. <li>green</li>
  30. <li>blue</li>
  31. <li>pink</li>
  32. <li>black</li>
  33. </ul>
  34. </body>
八、事件对象获取-键盘事件属性  
   1.  event.keyCode      按下的是哪个键，返回这个键对应的Unicode
            
             *     注意：以下三个不只是键盘事件才会有，其它的事件也会有这些属性
             *     event.ctrlKey        事件发生的时候ctrl是否被按下去了，如果按下去了就是true，否则是false
             *     event.shiftKey        事件发生的时候shift是否被按下去了，如果按下去了就是true，否则是false
             *     event.altKey            事件发生的时候alt是否被按下去了，如果按下去了就是true，否则是false
  1. <script>
  2. window.onload=function(){
  3. var text=document.querySelector("input");
  4. var ul=document.querySelector("ul");
  6. text.onkeydown=function(ev){
  7. if(ev.keyCode==13&& ev.altKey){
  8. //这个条件成立，说明用户按下了回车键
  10. //console.log(‘回车键‘);
  12. var li=document.createElement("li");
  13. li.innerHTML=this.value;
  15. ul.appendChild(li);
  16. this.value=‘‘;
  17. }
  18. };
  19. };
  20. </script>
  21. </head>
  22. <body>
  23. <inputtype="text"/>
  24. <ul></ul>
  25. </body>
九、事件绑定与移除
   
             *     1、on事件绑定
             *             方法
             *             对象.on事件名称＝函数;
                                    on事件只有冒泡阶段
             *             注意：on只能给元素添加一个事件。如果说有多个同样的事件，那后面的会把前面的给覆盖了
                          
             *     1、移除on添加的事件
             *         对象.on事件名称＝null;
  1. var btn1=document.getElementById("btn1");
  3. //on的方式添加事件
  4. btn1.onclick=function(){
  5. console.log(‘这是按钮一的第一次点击‘);
  6. };
  8. btn1.onclick=function(){
  9. console.log(‘这是按钮一的第二次点击‘); //只会打印出这个
  10. };
  11. <inputtype="button"id="btn1"value="按钮1"/>
  12.  
  13. //移除on事件 
        1. btn1.onclick=null;
 
            
             *     2、addEventListener
             *         方法
             *             对象.addEventListener(事件名称,事件绑定函数,boolean);
             *         参数
             *             参数1：事件名称，不加on，它是一个字符串
             *             参数2：事件绑定函数，这个事件绑定函数可以是匿名函数也可以是命名函数
             *             参数3：布尔值
             *                 true            事件是在捕获的阶段发生的
             *                 false        事件是在冒泡的阶段发生的（默认为false）
             *            
             *             注意：事件绑定函数里的this是指向事件触发的那个对象的，不是指向window
 
             *     2、移除addEventListener添加的事件
             *         对象.removeEventListener(事件名称,事件绑定函数,boolean);
             *         注意：1、不能移除掉addEventListener添加的匿名函数

             *             2、只能移除同一阶段的绑定函数(所有参数都要一样)


   
  1. var btn2=document.getElementById("btn2");
  3. //addEventListener方式添加的事件(匿名函数)
  4. btn2.addEventListener(‘click‘,function(){
  5. console.log(‘这是按钮二的第一次点击‘);
  6. console.log(this); //指向事件发生的那个对象
  7. },false);
  8. btn2.addEventListener(‘click‘,function(){
  9. console.log(‘这是按钮二的第二次点击‘);
  10. },false);
  11. //当点击btn2 两个click事件的内容都被打印出来
  13.                 //removeEventListener移除不了匿名函数
                    /*btn2.removeEventListener(‘click‘,function(){
                        console.log(‘这是按钮二的第一次点击‘);
                        console.log(this);            //指向事件发生的那个对象
    1. },false);*/
  2. //addEventListener方式添加的事件(命名函数)
  3. btn2.addEventListener(‘mouseover‘,fn1,false);
  4. btn2.addEventListener(‘mouseover‘,fn2,false);
  6. function fn1(){
  7. console.log(‘这是按钮二的第一个mouseover事件‘);
  8. console.log(this); //指向事件发生的那个对象
  9. }
  10. function fn2(){
  11. console.log(‘这是按钮二的第二个mouseover事件‘);
  12. }
                        //removeEventListener移除命名函数
                        btn2.removeEventListener(‘mouseover‘,fn1,true);
                        btn2.removeEventListener(‘mouseover‘,fn2,false);
  1. <inputtype="button"id="btn2"value="按钮2"/>
十、事件流
 
             *     事件流指事件在触发时的一个流程，就像for循环一样有一个执行的过程。
             *     在事件触发时，会先执行一个阶段叫做“捕获阶段”，从最外层向触发该事件元素寻找的一个过程。最终找到触发该事件的元素，如果                    该元素有绑定事件处理函数则执行该函数。
             *     在找到触发该事件的元素之后，如果这元素身上有事件，就会执行他的事件，称为“目标阶段”
             *     接下来会进行下一个阶段“冒泡阶段”，冒泡阶段是从目标元素的上一层开始往外层寻找，直到最外层时结束整个事件流程。
             *     不论是捕获阶段还是冒泡阶段，在寻找目标元素的过程和向外返回的过程中，所遇到每一个元素身上如果有相同事件的事件处理函数都会被调用。
             *     
             *     注意：低版本IE浏览器的事件只能绑定在冒泡阶段
技术分享
 
  1. window.onload=function(){
  2. var div=document.getElementById("div");
  3. var span=document.getElementById("span");
  4. var html=document.getElementById("html");
  5. var body=document.getElementById("body");
  6. window.id=‘window1‘;
  8. function fn(){
  9. console.log(this.id);
  10. }
  12. //用on的方法给元素添加事件，所有的浏览器都是一样的，先触发事件源对象，然后再往外执行（冒泡的阶段）
  13. window.onclick=fn; //window1
  14. html.onclick=fn; //html window1
  15. body.onclick=fn; //body html window1
  16. div.onclick=fn; //div body html window1
  17. span .onclick=fn; //span div body html window1
  18. };
  19. </script>
  20. </head>
  21. <bodyid="body">
  22. <divid="div">div
  23. <spanid="span">span</span>
  24. </div>
  25. </body>
   在目标阶段，如果目标事件有多个同样的事件，会按照书写的顺序先后执行。
  1. <script>
  2. window.onload=function(){
  3. var btn=document.getElementById("btn");
  5. //btn就是一个目标元素，因为他没有发生嵌套。他身上的事件就是按书写顺序来执行
  6. btn.addEventListener(‘click‘,function(){
  7. alert(‘冒泡‘);
  8. },false);
  9. btn.addEventListener(‘click‘,function(){
  10. alert(‘捕获‘);
  11. },true);
  12. //因为btn具有两个click事件，当在目标阶段的时候，不受执行阶段（true）和冒泡阶段（false）影响，
  13.                 只受书写顺序先后影响，先后执行。
  14. };
  15. </script>
  16. </head>
  17. <body>
  18. <inputtype="button"id="btn"value="按钮"/>
  19. </body>
十一、防止事件冒泡
             *     1、on添加的事件
             *         在函数中将event对象身上的cancelBubble的值设为true
             *         他有一个默认值为false，代表事件可以冒泡
             *         在哪一层上添加这个属性，那事件就会停在这里，不会往外冒泡
  1. var box1=document.getElementById("box1");
  2. var box2=document.getElementById("box2");
  3. var box3=document.getElementById("box3");
  5. //用on添加事件
  6. box1.onclick=function(ev){
  7. console.log(‘box1点击了‘);
  8. ev.cancelBubble=true;
  9. };
  10. box2.onclick=function(ev){
  11. console.log(‘box2点击了‘);
  12. ev.cancelBubble=true;
  13. };
  14. box3.onclick=function(ev){
  15. console.log(‘box3点击了‘);
  16. ev.cancelBubble=true;
  17. };
  19. };
  21. <divid="box1">box1
  22. <divid="box2">box2
  23. <divid="box3">box3</div>
  24. </div>
  25. </div>
             *     2、用addeventListener添加的事件
             *         在事件函数内调用event身上的stopPropagation()方法
             *         在哪一层上添加这个方法，那事件就会停在这里，不会往外冒泡
  1. //用addeventListener添加的事件
  2. var box4=document.getElementById("box4");
  3. var box5=document.getElementById("box5");
  4. var box6=document.getElementById("box6");
  6. box4.addEventListener(‘click‘,function(ev){
  7. console.log(‘box4点击了‘);
  9. ev.stopPropagation();
  10. });
  11. box5.addEventListener(‘click‘,function(ev){
  12. console.log(‘box5点击了‘);
  14. ev.stopPropagation();
  15. });
  16. box6.addEventListener(‘click‘,function(ev){
  17. console.log(‘box6点击了‘);
  19. ev.stopPropagation();
  20. });
  22. <divid="box4">box4
  23. <divid="box5">box5
  24. <divid="box6">box6</div>
  25. </div>
  26. </div>
十二、阻止浏览器默认行为
   
             *     需要知道这些默认行为什么时候发生
             *     1、on添加的的
             *         在函数里写上一句return false
             *     2、addEventListener添加的
             *         在函数里调用event身上的preventDefault();
  1. //阻止右键菜单
  2. document.oncontextmenu=function(){
  3. return false;
  4. };
  6. document.addEventListener(‘contextmenu‘,function(ev){
  7. ev.preventDefault();
  8. },false);
十三、滚轮事件（不兼容）
             *     mousewheel            IE/Chrome
             *         滚动的方向        event.wheelDelta
             *                         上：120（正数）
             *                         下：-120（负数）
             * 
             *     DOMMouseScroll        FF(必需要用addEventListener添加)
             *         滚动的方向        event.detail
             *                         上：-3（负数）
             *                         下：3（正数）
  1. document.onmousewheel=function(ev){
  2. console.log(‘鼠标滚动了-Chrom‘,ev.wheelDelta);
  3. };
  5. document.addEventListener(‘DOMMouseScroll‘,function(ev){
  6. console.log(‘鼠标滚动了-FF‘,ev.detail);
  7. });
十四、拖拽原理以及需要注意的问题
             *     1、鼠标在元素身上按下
             *         这里需要算出鼠标点击的地方离元素边界的距离
             *         鼠标起始X轴的位置＝鼠标的clientX-元素的offsetLeft
             *         鼠标起始Y轴的位置＝鼠标的clientY-元素的offsetTop
             * 
             *     2、鼠标移动
             *         这里需要算出来元素的真正left与top值
             *         元素的left＝鼠标的clientX-鼠标起始X轴的位置
             *         元素的top＝鼠标的clientY-鼠标起始Y轴的位置
             * 
             *     3、鼠标抬起
             *         清除掉鼠标身上的事件
             * 
             * 
             * 问题：
             *     1、只能拖拽一次
             *         解决方法1：声明一个变量，用来判断用户有没有点击方块
             *         解决方法2：把所有的要处理的整改放在mousedown里面去做，就可以解决。
             *     2、鼠标拖动的速度非常快的时候，就会脱离方块
             *         原因是因为mousemove事件的发生是根据浏览器的频率决定的，如果鼠标移动的非常快，那mousemove事件有可能没有发生，所以就会断了
             *         解决方法：把move事件加给document
             *     3、有文字的时候会选中文字
             *         解决方法：return false;   （阻止浏览器默认行为）
             *     4、拖动图片的时候会复制一张图片
             *         解决方法：return false;
  1. var box=document.getElementById("box");
  3. //鼠标按下
  4. box.onmousedown=function(ev){
  5. var disX=ev.clientX-box.offsetLeft;
  6. var disY=ev.clientY-box.offsetTop;
  8. //console.log(disX,disY);
  10. //鼠标移动
  11. document.onmousemove=function(ev){
  12. box.style.left=ev.clientX-disX+‘px‘;
  13. box.style.top=ev.clientY-disY+‘px‘;
  14. };
  16. //鼠标抬起
  17. document.onmouseup=function(){
  18. document.onmousemove=null;
  19. };
  21. //阻止默认选中文字
  22. return false;
  23. };
  24. };
  25. </script>
  26. </head>
  27. <body>
  28. kaivon
  29. <divid="box"></div>
 



null



事件类型


联系
我们