不同方法绑定事件，以及不同事件的执行顺序

最新推荐文章于 2021-03-27 14:42:48 发布
最新推荐文章于 2021-03-27 14:42:48 发布
阅读量221 收藏
点赞数
文章标签： c# javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_15288/article/details/82639156
版权

 

$(document).ready(function(){
	$("input[name='n']").on("keyup",function(){
		console.log("name");
	});
	
	$(".c").on("keyup",function(){
		console.log("class");
	})
	
	$("#a").on("keyup",function(){
		console.log("id");
	});
	
})

 我曾经一直天真地以为应该是以id绑定的先执行，今天试了才发现是按照定义的顺序执行，哪个写在前面哪个就先执行。。。

 

如果分开文件定义，也是一个道理，写在前面的文件会先执行。

 

上一篇提到delegate，我试了一下这个：

 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".input_class").on("keyup",function(){
		console.log("class");
	});

	$("#div_id").delegate("input","keyup",function(){
		console.log("delegate");
	});
	
});
</script>

</head>

<body>

<div id="div_id">
	<input type="text" id="input_id" name="input_name" class="input_class"/> 
</div>

</body>
<script type="text/javascript" src="test.js"></script>
</html>

 test.js:

$(document).ready(function(){
	
	$("input[name='input_name']").on("keyup",function(){
		console.log("name");
	});
	
	$("#input_id").on("keyup",function(){
		console.log("id");
	});
	
})

 test.js写了两遍，中间在html离插了一段。输出：

  name

  id

  class

  name

  id

  delegate

 

test.js执行了两遍才轮到delegate，果然不是一个爹生的！！

 

 

iteye_15288
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
看懂此文，不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
aty
01-28 1万+
抽空学习了下，javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。到这里是不是可以理解addEventListener(type,handler,useCapture)这个API中第三个参数useCapture的含义呢？useCapture=false意味着：将事件处理函数加入到冒泡阶段，在冒泡阶段会被调用；useCapture=true意味着：将事件处理函数加入到捕获阶段，在捕获阶段会被调用至此我们可以给出事件函数执行顺序的结论了：捕获阶段的处理函数最先执行，其次是目标阶段的处理
JavaScript三种事件绑定的方法和执行顺序
sayUonly的博客
06-22 1592
JavaScript三种事件绑定的方法和执行顺序JavaScript的三种事件绑定方法HTML标签DOM事件addEventListener三种绑定事件的执行顺序 JavaScript的三种事件绑定方法 事件就是指在HTML元素上发生的事情。例如，onchange元素发生了变化，onclick元素被点击了，onload元素加载完成等。那么如何绑定这些事件，让事件发生的时候可以按照用户的心意完成一些功能呢？目前常用的绑定方法有如下三种： HTML标签 可以直接在HTML的标签上绑定事件，可以是直接的JavaS
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
11-29
抽空学习了下javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。 方式1： HTML的DOM元素支持onclick、onblur等以on开头属性，我们可以直接在这些属性值中编写javascript代码。当点击div的时候，下面的代码会弹出div的ID： <div id=”outestA” onclick=”var id
同一事件绑定不同的处理方法、执行顺序有所不同
麦琪的专栏
03-26 845
在做项目的过程中遇到一个很棘手的问题，示例如下： 动态加载DOM节点的时候， var a2 = document.createElement("a");     a2.className = "countCicle";     a2.onclick = function(){     alert("进入js的click事件"); } DOM节点加载完毕后，对同一元素再绑定不同
js 事件绑定的几种方式以及它们的区别
weixin_34237596的博客
01-10 813
3种绑定方式1：DOM元素中直接绑定2：在JS代码中绑定3：绑定事件监听函数不同点：1：用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。2：addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Fir...
记录：为同一个元素绑定多个不同事件，并用同一个事件处理函数
05-12 172
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>王侯将相宁有种乎</title> <style&gt...
javascript attachEvent绑定多个事件执行顺序问题
10-28
执行顺序是没有规律的，但是每次执行的顺序是一样的，如果是随机那么应该每次执行的顺序都不一样才对，这才是我想要说明的
动态的绑定事件addEventListener方法的使用
09-04
这意味着你可以为同一个事件添加多个监听器，它们会按照添加的顺序依次执行。此外，与早期版本的`onxyz`事件处理属性不同，`addEventListener`不会覆盖已有的事件处理函数，而是将其添加到处理函数队列中。 `...
jquery绑定事件不生效的解决方法
12-10
通过使用DOM就绪事件或调整脚本加载顺序，可以确保在正确的时间执行事件绑定，从而避免此类问题。此外，良好的代码组织和规范，如使用模块化或延迟加载技术，也能帮助优化页面性能，减少类似问题的发生。
JavaScript绑定事件监听函数的通用方法
11-22
事件绑定的3中常用方法：传统绑定、W3C绑定方法、IE绑定方法。但是，在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索...　d、监听函数的执行顺序应当是按照绑定的顺序
JS中控制绑定事件执行顺序
热门推荐
hsd2012的专栏
04-11 1万+
在JS中，绑定的事件默认的执行时间是在冒泡阶段执行，而非在捕获阶段。这也是为什么当父类和子类都绑定了某个事件，会先调用子类绑定的事件，后调用父类的事件。直接看下面实例 *{margin:0;padding: 0;} var obj1=document.getElementById('id1'); obj1.addEventListener(
看懂此文，不再困惑于 JS 中的事件设计
weixin_33743703的博客
08-07 265
看懂此文，不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章，关于JS事件的，写的很详细也很容易理解，相关的知识点都有总结到，看完就有种很舒畅的感觉，该串起来的知识点都串起来了。反正一字节：爽。 作者：aitangyong 链接：blog.csdn.net/aitangyong/article/details/43231111 抽空学习了下j...
C# 事件案例 （事件触发多方法）
21号先锋者
02-15 5116
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Examples { public delegate void DelPublish();//声明事件所需的委托（代理） cla...
事件绑定的几种方式
weixin_30390075的博客
04-09 3211
(一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。 方式1： HTML的DOM元素支持onclick、onblur等以on开头属性，我们可以直接在这些属性值中编写javascript...
Js 三种绑定事件方式 及 区别
Superman_peng的博客
03-27 785
三种事件绑定方式 DOM里直接绑定事件 <button id="btn" onclick="submit()">提交</button> <script> function submit() { console.log('DOM click......'); }; </script> js代码里获取DOM元素进行事件绑定 <button id="btn">提交</button> <script&gt
python tkinter 一个事件绑定两个函数，怎么确定函数的执行顺序？
最新发布
05-28
在Python tkinter中，可以使用`bind`函数来为控件绑定事件，绑定多个函数的执行顺序可以使用以下两种方法： 1.使用`bind`函数的`+`参数： ``` button.bind("<Button-1>", func1) button.bind("<Button-1>", func2, "+") ``` 在这个例子中，当鼠标左键按下时，先执行`func1`函数，然后执行`func2`函数。 2.创建一个新的函数来调用其他函数： ``` def wrapper(event): func1() func2() button.bind("<Button-1>", wrapper) ``` 在这个例子中，当鼠标左键按下时，先执行`wrapper`函数，然后`wrapper`函数会依次调用`func1`和`func2`函数。 需要注意的是，如果多个绑定函数中有一个函数返回了`"break"`，则后续的函数都不会被执行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值