首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript小技能:事件

在现代浏览器中,默认情况下,所有事件处理程序都在冒泡阶段进行注册。 捕获阶段:浏览器检查元素的最外层祖先,是否在捕获阶段中注册了一个onclick事件处理程序,如果是,则运行它。...然后,它移动到中单击元素的下一个祖先元素,并执行相同的操作,依此类推,直到到达实际点击的元素。...冒泡阶段:浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序,如果是,则运行它。然后它移动到下一个直接的祖先元素,并做同样的事情,直到它到达元素。...事件委托: 如果你想要在大量子元素中单击任何一个都可以运行一段代码,您可以将事件监听器设置在其父节点上,并让子节点上发生的事件冒泡到父节点上,而不是每个子节点单独设置事件监听器。...//在鼠标指针移到指定的元素后执行Javascript代码: 鼠标指针移动到这。

1.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    5、React组件事件详解

    2、事件自动绑定 在JavaScript中创建回调函数时,一般要将方法绑定到特定的实例,以保证this的正确性; 2.在React中,每个事件处理回调函数都会自动绑定到组件实例(使用ES6语法创建的例外...); 注意:事件的回调函数被绑定在React组件上,而不是原始的元素上,即事件回调函数中的 this所指的是组件实例而不是DOM元素; 了解更多React中的thisReact组件中的this。...单击触发react事件 React并不是将click事件绑在该div的真实DOM上,而是在document处监听所有支持的事件,当事件发生并冒泡至document处时,React...,而不是普通的冒泡,并且没有捕获阶段;只有在鼠标指针穿过被选元素时,才会触发。...; 在父元素元素事件程序中阻止事件传播,则打印出: 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 在子元素React合成事件onClick中阻止事件传播,则打印出: 子元素原生事件绑定事件触发

    3.7K10

    JavaScript 事件对象

    onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document表示一个绑定的对象,用于触发某个元素区域。function()匿名函数是被执行的函数,用于触发后执行。...1.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的。...在keypress里,keyCode包含了字符编码,即默示字符的ASCII码。如许的情势实用于所有的浏览器 – 除了火狐,它在keypress事务中的keyCode返回值为0。...,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。...= function () { alert('我是input'); }; 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做一下兼容。

    1.9K100

    原生JavaScript和Vue、小程序都是如何阻止事件冒泡的?

    ,依次弹出:最里层---->中间层---->最外层,但最后没有跳转链接 由此可以看出 event.stopPropagation() 事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转...) return false 事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) event.preventDefault() 事件处理过程中,不阻击事件冒泡,但阻击默认行为...(它只执行所有弹框,却没有执行超链接跳转) Vue解决事件冒泡 Vue.js为v-on提供了 事件修饰符,我们只需要添加click.stop即可防止事件冒泡 在该元素本身(比如不是子元素)触发时触发回调 --> ......因此,用 @click.prevent.self 会阻止所有的点击,而 @click.self.prevent 只会阻止元素上的点击。

    1.6K40

    【Web前端】系统中正在发生的“事件”

    事件是在编写的程序中产生的特定情况。当这些事件出现时,系统会发出信号,并提供一种机制,允许你自动执行某些操作(比如运行代码)。这些事件通常是在浏览器窗口内触发的,关联到其中的特定元素。...尽管从严格意义上讲,这段代码既监控又处理事件,但监听器主要关注事件的发生,而处理器则负责对事件采取相应的行动。 处理点击事件 假设用户在网页上单击一个按钮,我们希望在用户单击时显示一条消息。...; }); 这个例子中,单击按钮将依次触发两个不同的事件处理程序。...这种方法虽然有效,但并不推荐使用,它会使代码的结构较为混乱。 onclick="alert('按钮被点击了!')">点击我!... 内联事件处理器——不要使用 虽然在HTML中使用内联事件处理器很方便,但这不是一个好习惯。它减少了代码的可维护性,增加了耦合度。

    7510

    5个很棒的 React.js 库,值得你亲手试试!

    ) 一步一步说下: 首先导入库本身,但重要的是随后导入所需的CSS。 然后配置toast,autoClose的意思是toast过了多长时间就会自动消失。...autoClose可以替换为false,因此它永远不会自动关闭。 大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。...菜单本身是在包装器中定义的。对于每个项,都有一个组件,我们可以给它一个onClick事件来处理我们的用户输入。...一个可以想象的例子是用户折叠的菜单。如果你想再次关闭它,90%的用户倾向于简单地点击网站的死区(即那些本身不会产生反应的元素)。在几乎所有的专业网站上,这是完全相同的。...要关闭菜单,只需再次单击它的旁边,而不是直接在它上切换。 有一个库可以满足这类的操作,它就是response-onclickoutside,它允许我们处理实际元素之外的单击事件。

    2.9K40

    JQuery高级应用

    先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数,每个元素执行一次。...jq的遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...this:集合中的每一个元素对象 回调函数返回值: true:如果当前function返回为false,则结束循环(break)。...false:如果当前function返回为true,则结束本次循环,继续下次循环(continue) $.each(object, [callback]),object为需要遍历的jq对象,回调方法中的参数与...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。

    5.9K30

    事件高级

    DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。 ​...那么是先执行父元素的单击事件,还是先执行div的单击事件 ??? 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 ?...常情况下terget 和 this是一致的, 但有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行), 这时候this指向的是父元素,因为它是绑定事件的元素对象...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码在父元素的事件中执行。 生活中的代理: ? js事件中的代理: ?

    1.4K20

    阻止a标签的默认事件及延伸

    ="fc1()">我是带阻止默认事件的a链接 onclick="fc2()">我是不带阻止默认事件的a...看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么在事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是在正常的事件传播流中发生的。...//仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

    2.5K60

    JavaScript事件详解

    但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点,那么点击该链接也同样会触发该事件监听器。...这是因为事件不仅仅对触发的目标元素产生影响,它们还会对沿着DOM结构的所有元素产生影响。这就是大家所熟悉的事件转送。W3C事件模型中明确地指出了事件转送的原理。事件传送可以分为3个阶段。...例如,若用户单击了一个超链接,则该单击事件将从document节点转送到html元素,body元素以及包含该链接的p元素。...冒泡(Bubbling)阶段 事件将沿着DOM树向上转送,再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器,并执行它们。...一般就是一次性将父元素绑定事件,通过判断event.target 来执行相应的方法,后续添加子元素的时候不用再次绑定。

    71810

    JavaScript闭包原理与用法实例

    这是因为每个内部函数返回的是变量i,而不是i在某个时刻的特定值,而i的作用域是整个外部函数,当外部函数执行完成后,i的值是10。 解决:在每个内部函数的内部,再产生一个匿名函数并返回。...它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。...5、内存泄漏 使用闭包的时候很容易造成循环引用,若闭包的作用域包含着一些DOM节点,这时候就有可能造成内存泄漏,但其实,这本身不是闭包的问题,而是由于:BOM和DOM中的对象是使用C++以COM对象的方式实现的...,闭包会引用包含函数的所有活动对象,包含element,即使闭包不直接引用element,包含函数的活动对象中也仍然会保存一个引用,因此有必要把element元素设置为null,这样就能解除对DOM对象的引用...结果是内部函数的所有变量都会立即被销毁,除非将某些变量赋值给了包含作用域(即外部作用域)中的变量。

    59440

    社招前端二面react面试题集锦

    因此在这些阶段发岀Ajax请求显然不是最好的选择。在组件尚未挂载之前,Ajax请求将无法执行完毕,如果此时发出请求,将意味着在组件挂载之前更新状态(如执行 setState),这通常是不起作用的。...在使用 Genymotion时,首先需要在SDK的 platform-tools中加入环境变量,然后在 Genymotion中单击 Setting,选择ADB选项卡,单击 Use custom Android...,更新页面React 中 refs 的作用是什么Refs 是 React 提供给我们的安全访问 DOM元素或者某个组件实例的句柄可以为元素添加ref属性然后在回调函数中接受该元素在 DOM 树中的句柄,...简单地说,在 React中元素(虛拟DOM)描述了你在屏幕上看到的DOM元素。换个说法就是,在 React中元素是页面中DOM元素的对象表示方式。...由于onClick使用的是匿名函数,所有每次重渲染的时候,会把该onClick当做一个新的prop来处理,会将内部缓存的onClick事件进行重新赋值,所以相对直接使用函数来说,可能有一点的性能下降修改

    2K60

    Javascript函数的简单学习

    另一种习惯是在第一个单词以后的所有单词都以一个大写字母开始,如likeThis()。     ...//1:函数名:区分大小写,并且在同一个页面中,函数名是唯一的     //2:parameter:可选参数,用于指定参数列表,但使用多个参数时     //,参数间使用逗号进行分割,一个函数最多使用255...    onreset:        单击重置按钮时,在form标签上触发     onresize:       窗口或者框架的大小发生改变时触发     onscroll:       在任何滚动条的元素或者窗口上滚动时触发...    onsubmit:       单击提交按钮时,在上触发 2:事件处理     事件处理程序是用来响应某个事件而执行的处理程序。...中绑定(第二种方式要注意先执行     form标签内的内容,然后再执行script标签内的内容)  案例1代码如下 1 2 3 <meta http-equiv=

    2K80

    JavaScript(十二)

    换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。 事件流描述的是从页面中接收事件的顺序。...')" /> 在 HTML 中定义的事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本,如下: onclick...因为用户可能会在 HTML 元素一出现在页面上就触发相应的事件,但当时的事件处理程序有可能尚不具备执行条件 其次,扩展事件处理程序的作用域链在不同浏览器中会导致不同结果 最后,HTML 与 JavaScript...事件对象 ---- 在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息。...也就是说,我们可以为整个页面指定一个 onclick 事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。

    2.9K20

    送你43道JavaScript面试题

    对于箭头函数,this关键字指向是它所在上下文(定义时的位置)的环境,与普通函数不同! 这意味着当我们调用perimeter时,它不是指向shape对象,而是指其定义时的环境(window)。...在您不知情的情况下,值可以自动转换为另一种类型,称为隐式类型转换。 强制从一种类型转换为另一种类型。 在此示例中,JavaScript将数字1转换为字符串,以使函数有意义并返回值。...我刚给它的原型添加了一个方法。 原始类型的字符串自动转换为字符串对象,由字符串原型函数生成。 因此,所有字符串(字符串对象)都可以访问该方法!...默认情况下,事件处理程序在冒泡阶段执行(除非您将useCapture设置为true)。 它从最深的嵌套元素向外延伸。 ---- 33. 下面代码的输出是什么?...但是,.call方法会立即执行! .bind方法会返回函数的拷贝值,但带有绑定的上下文! 它不会立即执行。 ---- 34. 下面代码的输出是什么?

    1.5K20

    送你43道JavaScript面试题

    对于箭头函数,this关键字指向是它所在上下文(定义时的位置)的环境,与普通函数不同! 这意味着当我们调用perimeter时,它不是指向shape对象,而是指其定义时的环境(window)。...在您不知情的情况下,值可以自动转换为另一种类型,称为隐式类型转换。 强制从一种类型转换为另一种类型。 在此示例中,JavaScript将数字1转换为字符串,以使函数有意义并返回值。...我刚给它的原型添加了一个方法。 原始类型的字符串自动转换为字符串对象,由字符串原型函数生成。 因此,所有字符串(字符串对象)都可以访问该方法!...默认情况下,事件处理程序在冒泡阶段执行(除非您将useCapture设置为true)。 它从最深的嵌套元素向外延伸。 ---- 33. 下面代码的输出是什么?...但是,.call方法会立即执行! .bind方法会返回函数的拷贝值,但带有绑定的上下文! 它不会立即执行。 ---- 34. 下面代码的输出是什么?

    1.6K30

    送你43道JavaScript面试题

    从基础到高级:测试您对JavaScript的了解程度,刷新您的知识,或为您的编码面试做好准备!? ?我每周用新问题更新这个项目。 答案位于问题下方的折叠部分,只需单击它们即可展开。...对于箭头函数,this关键字指向是它所在上下文(定义时的位置)的环境,与普通函数不同!这意味着当我们调用perimeter时,它不是指向shape对象,而是指其定义时的环境(window)。...我刚给它的原型添加了一个方法。原始类型的字符串自动转换为字符串对象,由字符串原型函数生成。因此,所有字符串(字符串对象)都可以访问该方法!...默认情况下,事件处理程序在冒泡阶段执行(除非您将useCapture设置为true)。它从最深的嵌套元素向外延伸。 ---- 33. 下面代码的输出是什么?...但是,.call方法会立即执行! .bind方法会返回函数的拷贝值,但带有绑定的上下文!它不会立即执行。 ---- 34. 下面代码的输出是什么?

    1.5K10

    jQuery 事件绑定 和 JavaScript 原生事件绑定

    live、delegate 不多用,在Jquery1.7中已经移除,这里不多说 重点介绍 bind、on bind(event,[data],function) bind 是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数...规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。  data:可选。规定传递到函数的额外数据。 function:可选。...JavaScript支持在标签中直接绑定事件 2.在JavaScript代码中onXXX绑定:在JavaScript代码中绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发...在JavaScript代码中onXXX绑定 在JavaScript代码中绑定事件的语法为: elementObject.onXXX=function(){     // 事件处理代码 } 其中: elementObject...注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件

    5.7K20
    领券