事件_事件研究法 - CSDN
事件 订阅
事件,读音是shì jiàn,汉语词语,意思是事情、事项。 展开全文
事件,读音是shì jiàn,汉语词语,意思是事情、事项。
信息
外文名
event
拼    音
shì jiàn
中文名
事件
解    释
事情、事项
事件解释
收起全文
精华内容
参与话题
  • 事件

    2020-06-17 22:37:19
    事件 事件就是交互事件,用户点击实现回馈,是交互体验的核心功能。 绑定事件处理函数 ele.onxxxx = function(event){} 兼容性很好,但是一个元素的同一事件上只能绑定一个 基本等同于写在HTML行间上 obj....

    事件

    事件就是交互事件,用户点击实现回馈,是交互体验的核心功能。

    绑定事件处理函数

    1. ele.onxxxx = function(event){}
      兼容性很好,但是一个元素的同一事件上只能绑定一个
      基本等同于写在HTML行间上
    2. obj.addEventListener(type,fn,false)
      IE9一下不兼容,可以为一个事件绑定多个处理程序
    3. obj.attachEvent(‘on’ + type, fn);
      IE独有,一个事件同样可以绑定多个处理程序

    事件处理程序的运行环境

    1. ele.onxxx = function (event){}
      程序this指向是dom元素本身。
      //谁点击,this就指向它。
    2. obj.addEventListener(type,fn,false);
      程序this指向是dom元素本身
    3. obj.attachEvent(‘on’ + type, fn);
      程序this指向window

    给一个对象封装一个事件处理函数

    function addEvent(elem , type, handle){
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false)
        }else if(elem.attachEvent){
            elem.attachEvent('on' + type, function(){
                handle.call(elem)
            })
        }else{
            elem['on' + type] = handle;
        }
    }
    

    解除事件处理程序

    1. ele.onclick = false/’’/null;
    2. ele.removeEventListener(type, fn, false);
    3. ele.detachEvent(‘on’ + type, fn)
      注意:若绑定匿名函数,则无法解除绑定

    事件处理模型,事件冒泡、捕获

    事件冒泡:

    1. 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡功能,即同一事件,自子元素冒泡向父元素。(自底向上)

    事件捕获

    1. 结构上(非视觉上)嵌套关系的元素,会存在事件捕获功能,即同一事件,自父元素捕获至子元素(事件源元素)。(自顶向下)
    2. IE没有捕获事件

    触发顺序,先捕获,后冒泡

    不会触发冒泡事件的方法

    1. focus
    2. blur
    3. change
    4. submit
    5. rest
    6. select

    取消冒泡和阻止默认事件

    取消冒泡

    1. W3C标准event.stopPropagation(),不支持IE9以下版本
    2. IE独有的,event.cancaleBubble = true;
    3. 封装取消冒泡的函数stopBubble(event)
    function stopBubble(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
    

    阻止默认事件

    1. 默认事件—表单提交,a标签跳转,右键菜单等
    2. return false;以对象属性的方式注册的时间才生效
    3. Event.preventDefault();W3C标准,IE9以下不兼容
    4. event.returnValue = false;兼容IE
    5. 封装阻止默认事件的函数 cancelHandler(event)
    function canceHandler(event){
        if(event.preventDefault){
            event.preventDefaule();
        }else{
            event.returnValue = false;
        }
    }
    

    事件对象

    1. event || window.event 用于IE
    2. 事件源对象:
      event.target 火狐只有这个
      event.srcElement IE只有这个
      谷歌浏览器都有
    3. 兼容性写法,方法
    ele.onclick = function(e){
        var event = e || window.event;
        var target = event.target || event.srcElement;
    }
    
    

    事件委托

    利用事件冒泡,和事件源对象进行处理

    优点:

    1. 性能不需要循环所有的元素一个个绑定事件
    2. 灵活,当有新的子元素时不需要重新绑定事件

    鼠标事件

    click
    鼠标点击之后
    mousedown
    鼠标按键事件
    mousemove
    鼠标移动事件
    mouseup
    区分鼠标按键
    contextmenu
    右键菜单事件
    mouseover
    鼠标放入区域
    mouseout
    鼠标离开区域
    mouseenter
    鼠标放入区域
    mouseleave
    鼠标离开区域

    用button来区分鼠标的按键,0/1/2
    DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键
    解决mousedown和click的冲突

    键盘事件

    1. keydown
      按下键盘触发
    2. keyup
      松开键盘触发
    3. keypress
      按住连续触发
      keydown>keyoress>keyup
    4. keydown 和 keypress的区别
    5. keydown 可以响应任意键盘按键,keypress只可以响应字符类键盘按键
    6. keypress返回ASCLL码,可以转换成相应字符。
    7. oninput监测输入框输入事件
    8. onchange输入框聚焦输入再离开的时候触发
    9. onfouce当聚焦的时候触发
    10. onscroll鼠标滚动条滚动触发
    11. onload当文档解析完之后所有页面全部渲染完之后再触发
    展开全文
  • JavaScript 事件

    2020-10-23 08:27:39
    事件作用2. 鼠标事件3. 滚轮事件4. 键盘事件5. 资源事件6. window 事件 1. 事件作用 JavaScript 通过事件检测用户行为 2. 鼠标事件 onclick: 点击鼠标左键触发 onmousedown:鼠标任意键按住时触发 onmouseup:...

    1. 事件作用

    JavaScript 通过事件检测用户行为

    2. 鼠标事件
    • onclick: 点击鼠标左键触发

    • oncontextmenu: 点击鼠标右键触发

    • ondblclink: 左键双击

    • onmousedown:鼠标任意键按住时触发

    • onmouseup: 鼠标任意键抬起时触发

    • onmouseenter:鼠标进去元素时触发

    • onmousemove:鼠标在元素上移动触发

    • onmouseleave: 鼠标离开元素触发

      onclick = onmousedown + onmouseup

    3. 滚轮事件
    • onmousewheel: 鼠标滚轮在元素上滚动触发

    event参数最最重要的事就event.wheelDelta属性,表示滚动的方向。这是浏览器的规定:

    鼠标往上滚, 120

    鼠标往下滚, -120

    4. 键盘事件(document)
    • onkeydown: 按住键盘上任意键触发
    • onkeyup: 按键抬起触发
    • onkeypress : 输入键触发,功能键不触发
      可编辑盒子使用键盘事件(表单或者通过contenteditable属性使容器处于可编辑状态)
      https://blog.csdn.net/gklcsdn/article/details/108687646
      或者使用document.onkeydown 使用键盘事件

    按键码:
    event.keyCode 左上右下键 对应的keyCode 为37,38,39,40
    Enter键对应的keyCode` 为13

    6. window 事件
    • onresize: 窗口大小改变时触发
    • onscroll: 页面滚动时触发
    • onload: 页面或者图片加载完成时触发
    • onerror: 页面加载错误后触发
    7. 表单事件
    • onfocus : 获取焦点后
    • onblur : 失去焦点
    • onchange: 内容发生改变
    • oninput : 实时改变刷新
    • onreset : 重置后
    • onselect : 选择后
    • onsubmit : 提交后
    8. dom 0级事件绑定
    oBox.onclick = function(){
    	...
    }
    /*===================================*/
    oBox.onclick = fn;
    
    function fn(){}
    
    9. dom 0级绑定事件处理函数次数

    返回后一个事件绑定的值;打印2

    oBox.onclick = function(){
    	console.log(1)
    }
    
    oBox.onclick = function(){
    	console.log(2)
    }
    
    10. 解除事件绑定
    oBox.onclick = null;
    
    // 使用
    oBox.onclick = function(){
    	console.log(1);
    	this.onclick = null;
    }
    
    /*=============================*/
    
    var bol = true;
    oBox.onclick = function(){
    	if(!bol) return;
    	console.log(1);
    	bol = false;
    }
    
    11. 点击事件的对应和排他
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            ul {
                list-style: none;
            }
            
            ul {
                width: 500px;
                height: 100px;
                border: 2px solid black;
                margin: 10px 10px;
                display: flex;
                justify-content: space-around;
            }
            
            li {
                width: 100px;
                height: 100px;
                background-color: pink;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    
    <body>
        <ul id="wrap1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id="wrap2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    
        <script>
            var oUl1Li = document.querySelectorAll('#wrap1 li');
            var oUl2Li = document.querySelectorAll('#wrap2 li');
            // 信号量控制点击的li
            var num = 0;
            for (let i = 0; i < oUl1Li.length; i++) {
                oUl1Li[i].onclick = function() {
                    oUl2Li[num].style.backgroundColor = 'pink';
                    num = i;
                    oUl2Li[num].style.backgroundColor = 'green';
                }
            }
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    12. Dom 2级事件绑定

    三个参数:事件、函数、是否监听捕获阶段。

    第1个参数: clickmouseovermouseout

    第2个参数:函数可以是匿名函数,也可以是有名函数

    第3个参数:布尔值(默认false,可以省略),true表示监听捕获、false表示监听冒泡阶段

    oBox.addEventListener("click", function(){
        consloe.log(1);
    }, false)
    

    this 指向box

    dom 0级事件只能绑定一个;
    dom 2级事件可以绑定多个

    // 不会覆盖,11,22 都会打印
    oBox.addEventListener("click", function(){
        alert(11);
    }, false);
    
    oBox.addEventListener("click", function(){
        alert(22);
    }, false);
    
    13. dom 2级事件绑定解绑
    oBox.addEventListener("click", fn, false);
    
    // 解绑通过有名函数
    oBox.removeEventListener("click",fn, false);
    function fn(){
        alert("哈哈");
    }
    
    14. 事件处理模型

    当一个dom节点触发事件后,该事件会按照HTML结构在根节点和这个元素节点之间传播,路径上所有的节点都会收到该事件

    事件流就是当你单击了某个元素,单击事件不仅仅发生在这个元素上,你也单击了它的父元素、父元素的父元素、……它的祖先元素,甚至单击了整个页面。

    冒泡:子级向父级 执行顺序
    捕获: 父级向子级

    15. dom 0级事件绑定(捕获 冒泡)

    oDiv.onclick = function(){
    }

    dom 0级事件绑定 只能监听冒泡过程(子级向父级)

    在这里插入图片描述

            wrap1.onclick = function() {
                console.log(1)
            }
            wrap2.onclick = function() {
                console.log(2)
            }
            wrap3.onclick = function() {
                console.log(3)
            }
    

    点击box3 打印 321

    15. dom 2级事件绑定(捕获 冒泡)

    oBox.addEventListener(“click”,function(){

    },false);

    第1个参数:事件名不用写on, click、mouseover 、mouseout

    第2个参数:函数可以是匿名函数,也可以是有名函数

    第3个参数:布尔值,true表示监听捕获、false表示监听冒泡阶段

    在这里插入图片描述

            wrap1.addEventListener('click', function() {
                console.log(1);
            }, false)
            wrap2.addEventListener('click', function() {
                console.log(2);
            }, false)
            wrap3.addEventListener('click', function() {
                console.log(3);
            }, false)
    
            wrap1.addEventListener('click', function() {
                console.log("a");
            }, true)
            wrap2.addEventListener('click', function() {
                console.log("b");
            }, true)
            wrap3.addEventListener('click', function() {
                console.log('c');
            }, true)
    

    点击box3 打印 ab3c21

    先执行捕获阶段再执行冒泡阶段;
    事件源box3只有冒泡阶段,谁在前面先执行谁

    1. DOM 0级的方式,只能监听冒泡阶段。不能有同名的事件,会覆盖。
      • this是触发事件的这个元素。
      • 高版本浏览器会冒泡到window,
      • 低版本浏览器冒泡到document。
    2. DOM 2级的方法,addEventListener()
      • 可以自由设置冒泡、捕获。第三个参数: true就是捕获,false就是冒泡。
      • 事件名不加on,可以有同名事件,会顺序执行,不覆盖。
      • this是触发事件的这个元素。
      • 事件会冒泡到window。
    16. 事件对象

    任何的事件处理函数,我们的浏览器、JS引擎会默认往里面传一个实参,就是事件对象。

    通常用形参event来接收:

    oDiv.onclick = function(event){
    	console.log(event);
    }
    

    1. 通用事件对象属性和方法

    1. event.type 返回事件的类型,没有on, 比如”click”

    2. event.target 返回点击的元素

    3. event.currentTarget 返回自己,this一定和event.currentTarget是一个元素

    4. event.button 区分左键0,中间1,右键2

    5. 阻止事件

      event.stopPropagation();   // 停止传播事件流
      
    6. 阻止默认事件

      右键出菜单 图片拖动 a标签跳转 表单提交这些网页的默认事件

      preventDefault() 阻止默认事件

      //阻止右键事件(默认事件)
      oBox.oncontextmenu = function(ev){
           ev.preventDefault();
      }
      
      event.preventDefault();
      

    2. 事件对象上储存的常用信息

    clientX/clientY 鼠标距离浏览器左上角的水平/竖直距离
    pageX/pageY 鼠标距离页面左上角的水平/竖直距离
    offsetX/offsetY 鼠标距离触发事件的元素左上角的水平/竖直距离
    layerX/layerY 鼠标距离定位元素左上角的水平/竖直距离
    screenX/screenY 鼠标距离计算机屏幕左上角的水平/竖直距离

    17. 事件委托

    利用事件冒泡的原理把子级的事件委托给祖先元素,然后通过事件源确定,事件发生在那个子元素上

    然后给对应的子元素添加响应的处理程序

    优点:

    不需要循环绑定每个子元素,可以节约浏览器性能
    添加新的子元素时,不需要再给新元素绑定事件

    在这里插入图片描述

         wrap.onclick = function(event) {
             event.target.style.backgroundColor = 'blueviolet';
             if (event.target.nodeName == 'LI') {
                 event.target.style.backgroundColor = 'red';
             }
         }
    
    展开全文
  • C#中的事件

    千次阅读 2018-12-18 22:33:30
    C#中的事件其实就是C#中委托的一个属性,使用事件是为了防止委托中的参数被随意调用和修改,是出于安全性考虑。 event 还限定了 delegate 只能在定义的类中被调用。 using System; namespace Lesson26_2 { //...

    C#中的事件其实就是C#中委托的一个属性,使用事件是为了防止委托中的参数被随意调用和修改,是出于安全性考虑。

    event 还限定了 delegate 只能在定义的类中被调用。

    using System;
    
    namespace Lesson26_2
    {
    	//事件 - event 就是 delegate 的属性
    	//处于安全性的考虑
    	/// <summary>
    	/// 1.事件event 和 delegate 的关系就像字段和属性的关系
    	/// 2.event 会限制 delegate 不能够直接进行赋值操作,防止将委托替换掉,只能使用 += 和 -= 来绑定或者解除绑定
    	/// 3.event 还限定了 delegate 只能在定义的类中被调用
    	/// </summary>
    	//定义委托
    	public delegate void Something (string name);
    
    	public class Student  {
    		public string name;
    		//事件 - 使用了事件之后就不能直接给委托赋值,必须使用 += 和 -= 来解除绑定
    
    		public event Something something;
     
    		public Student (string name){
    			this.name = name;
    		}
    
    		public void Do (){
    			something (name);
    		}
    	}
    
    	public class Teacher{
    		public void Hungry (){
    			Student s = new Student ("dzzhyk");
    			//现在通过s中的something方法来直接赋值
    			s.something += new Something (A);
    			//使用了 event 之后就不能在Student的外部调用something
    			//s.something ("nihao");
    			s.Do ();
    		}
    		public void A (string name){
    			Console.WriteLine ("Hello!" + name);
    		}
    	}
    	class MainClass
    	{
    		public static void Main (string[] args)
    		{
    			Teacher t = new Teacher ();
    			t.Hungry ();
    		}
    	}
    }
    

     

    展开全文
  • 三大事件(鼠标事件、键盘事件、html事件) 1、鼠标事件 click:单击 dblclick:双击 mousemove:鼠标移动 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮 mouseout:鼠标离开 mouseenter:鼠标进入 ...

    三大事件(鼠标事件、键盘事件、html事件)

    1、鼠标事件

    • click:单击
    • dblclick:双击
    • mousemove:鼠标移动
    • mousedown:鼠标按下
    • mouseup:鼠标抬起
    • mouseover:鼠标悬浮
    • mouseout:鼠标离开
    • mouseenter:鼠标进入
    • mouseleave:鼠标离开

    2、键盘事件

    • keydown:按键按下
    • keyup:按键抬起
    • keypress:按键按下抬起

    3、HTML事件

    • load:文档加载完成
    • select:被选中的时候
    • change:内容被改变
    • focus:得到光标
    • blur:失去光标
    • resize:窗口尺寸变化
    • scroll:滚动条移动

    事件委托机制

    事件委托指的是,不在事件的发生地设立监听函数,而是在事件发生地的父元素或者祖先元素设置监听器函数,这样可以大大提高性能,因为可以减少绑定事件的元素,比如:

    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    

    你要给li元素绑定click事件,
    使用事件委托机制的话,就只需要给ul绑定click事件就行了,
    这样就不需要给每个li’绑定click事件,减小内存占用,提高效率。

    事件的移除

    事件的注册方式对应其移除方式
    1、 el.onclick = null

    var el = document.getElementById("btn");
    //事件注册
     el.onclick = function(event){  
         alert(id); 
         el.onclick = null;   //事件删除
     }
    

    2、el.removeEventListener(type,fn,false); //这里 fn 必须是原有绑定的函数,否侧解除无效

    var div = document.getElemetById('id');
    div.addEventListener('click',test,false);
    function test(){
     console.log('remove click');
    }
    div.removeEventListener('click',test,false);
    

    事件循环机制

    1、是什么

    浏览器中的事件循环机制(event-loop)流程如下:
    1.1,js在执行代码时,由上至下遍历;
    1.2, 首先,遇到任务,判断该任务是同步还是异步任务;
    1.3,如果是
    同步任务
    ,一般会直接进入到主线程中执行;
    1.4,如果是异步任务,先行加入任务队列( Event Queue );
    1.5,主线程内的任务执行完毕时,会去 任务队列 读取对应的异步任务,把它推入主线程执行。(读取任务队列中的任务时,优先读取微任务,后读取宏任务),执行完了再去 任务队列读取异步任务,把任务放到主线程中执行,如此循环。
    1.6,就是我们说的 事件循环(Event Loop)。

    总结 js执行顺序: 同步函数 ===》微任务 ===》 宏任务

    这里的主线程 ,也就是运行栈

    总结:事件循环机制如下:
    1、同步代码,直接执行
    2、异步先放在任务队列中
    3、待同步函数执行完毕,轮询执行任务队列的函数

    2、哪些语句会放入异步任务队列中?

    • 1、定时任务:setTimeout、setInterval
    • 2、网络请求:ajax请求、动态img加载
    • 3、DOM绑定的事件:dom事件
    • 4、ES6中的promise.then中的函数

    Promise 构造函数是同步执行的,promise.then 中的函数是异步执行的。

    3、何时被放入任务队列?

    • 1、类似onclick事件等,由浏览器内核的DOM binding模块处理,事件触发时,回调函数添加到任务队列中;
    • 2、setTimeout的定时任务等,由浏览器内核的Timer模块处理,时间到达时,回调函数添加到任务队列中;
    • 3、Ajax异步请求,由浏览器内核的Network模块处理,网络请求返回后,添加到任务队列中。

    ajax加载完成,即ajax什么时候success,就什么时候把ajax中的函数放入到异步队列中

    4、同步任务和异步任务

    • 同步任务:加入主线程中,立即执行;
    • 异步任务:加入任务队列,等待主线程中的同步任务执行完毕,才会去任务队列中读取相应的任务执行。(常见的异步任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务)

    异步任务又分为 宏观任务 、微观任务

    5、 宏观任务和微观任务

    • 宏观任务包含以下几类
    1. script( 整体代码)
    2. setTimeout
    3. setInterval
    4. I/O
    5. UI交互事件
    6. setImmediate(Node.js 环境)
    • 微观任务包含以下几类
    1. Promise
    2. MutaionObserver
    3. process.nextTick(Node.js 环境)

    [事件循环机制的参考链接]:(https://www.cnblogs.com/yugege/p/9598265.html)https://www.cnblogs.com/yugege/p/9598265.html

    展开全文
  • MySQL中的事件

    千次阅读 2019-05-09 15:49:18
    文章目录事件是什么?使用开启定时器语法创建事件查看事件启用和禁用删除事件实践简单案例参考 事件是什么? MySQL5.1版本开始引进event概念,MySQL 中的事件(event:时间触发器)是用于执行定时或周期性的任务,类似...
  • C#事件

    千次阅读 2018-03-31 00:59:44
    C#事件的用法与意义C#事件与委托十分相似,其实事件包含了一个私有委托,所以事件就像是专门用于某种特殊用途的简单委托。事件使用的方法图:正如上图所示,发布者类Incrementer里面的事件CountedADozen就像一个装...
  • 事件模型

    2018-08-28 11:51:20
    几乎所有的GUI编程都涉及到事件处理机制。 很简单: 事件:浏览器、window、document、HTML元素发生事情,浏览器封装事情信息,就是事件事件目标:引发事件的对象,就是事件源。 事件类型:每个事件都有相应...
  • js阻止事件冒泡

    万次阅读 2019-07-06 12:43:34
    js阻止事件冒泡 冒泡事件简介 当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行。 方法一:event.stopPropagation( ); 例如: <div> <p>段落文本内容 <input type=...
  • JavaScript事件绑定和普通事件区别

    万次阅读 2019-03-15 18:25:52
    区别十分简单,直接看代码吧<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <... &l
  • 问题事件名称: APPCRASH(解决方法)

    万次阅读 2020-01-21 17:58:39
    问题事件名称: APPCRASH(解决方法) 解决方法:问题事件名称: APPCRASH(解决方法)
  • html img的点击事件

    万次阅读 2010-05-26 13:32:00
    http://www.google.com") >
  • jquery双击事件

    万次阅读 2020-05-21 10:04:25
    在开发过程中经常会遇到使用双击事件或者避免短时间内连续触发单击事件的逻辑。这里介绍一下对类似问题的处理方法。 一、jquery的dblclick事件 一个DOM元素,如:div,既绑定了 click 事件,又绑定了 dblclick ...
  • 直接在img标签上添加点击事件

    万次阅读 2017-11-03 10:34:44
    如果不想用a来包一层的话,那么直接在img标签上添加onclick来点击跳转,
  • JS事件个人小总结

    万次阅读 多人点赞 2019-07-14 17:09:38
    JS鼠标右键点击事件: oncontextmenu
  • js移除元素所有click绑定事件

    万次阅读 2017-06-05 13:01:26
    使用unbind方法移除某个元素身上的某些绑定事件,这里的id为jiesuan元素的click事件将会被移除,点击后原效果会移除。
  • &lt;input type="checkbox" onclick="checkboxOnclick(this)" /&gt; &lt;script&gt; function checkboxOnclick(checkbox){ if ( checkbox.checked ==...//Action for not ch...
  • JS鼠标事件大全(转)

    万次阅读 2009-06-03 15:50:00
    一般事件 事件 浏览器支持 描述 onClick 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick 鼠标双击事件 onMouseDown 鼠标上的按钮被按下了 onMouseUp 鼠标按下后,松开时激发的事件 onMouseOver...
  • 终于弄懂了事件冒泡和事件捕获!

    万次阅读 多人点赞 2018-08-02 09:58:47
    总结了两个人的博客,写了这篇:总算是搞清楚事件捕获和事件冒泡了! 参考资料浅谈事件冒泡与事件捕获 理解事件捕获和事件冒泡 1、事件捕获 捕获型事件(event capturing):事件从最不精确的对象(document 对象)...
  • js实现单击事件和双击事件

    万次阅读 2019-08-06 09:28:58
    一下代码可以解决单击事件和双击事件冲突的问题 //单击事件 var timeoutID = null; $("#test).on('click',function(e){ clearTimeout(timeoutID); timeoutID = window.setTimeout(function (){ //写单击事件...
  • 使用vue阻止子级元素的click事件冒泡,很简单,用stop 按钮1 按钮2 这样点击div里面的按钮1,就不会触发div绑定时间test1()方法
1 2 3 4 5 ... 20
收藏数 2,578,399
精华内容 1,031,359
关键字:

事件