jQ的select事件和trigger方法的小冲突
方法和事件都不难理解，分开用也都没问题，但是一起用就有些小问题出现。
直接上结论：使用trigger方法触发一个文本类型的 input 元素的select事件时，chrome浏览器会错误的触发三次，firefox和ie11只会正常触发一次
解决办法也简单，把trigger换成triggerHandler（）即可。
网上搜了下，有说是trigger（）的方法的问题，有说是冒泡问题的，有说是select触发机制的问题。
然而这些并没有说服我，填补不了好奇心，所以找不到答案就自己尝试
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").select(function(){
$("input").after("文本被选中！");
});
$("button").click(function(){
$("input").trigger("select");
});
});
</script>
</head>
<body>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
</body>
</html>
这是代码，点击按钮，会在页面添加 文本被选中！的提示，但是会出现三次！！！
问题是在查api时在w3school时发现的，trigger可以触发的事件那么多，前辈们故意选择会出错的select是为了提醒我们小心么0.0
给个链接，好奇的自己去试试http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_trigger
首先发现时，第一反应是是不是jquery给元素的捕获阶段、目标阶段、冒泡阶段分别绑定了事件。
查看trigger说明，它会触发所有匹配元素的指定事件。所以就换成了triggerHandler();然后果然只触发一次了。
好开心有没有，解决问题了有没有。然而我就是那么闲的蛋疼
忍不住想，jQ那么出名流行的库，没理由绑定事件绑定的那么奇葩啊，捕获目标冒泡全绑定，多层事件触发要怎么搞？一个一个的阻断事件？不可能啊。
所以又换回trigger，把input的select事件换成click。然后果然也只会触发一次。
mouseover也一样，这样就确定了是select的问题，不是trigger的问题
然后好奇是否是选择机制的问题，把文本内容删至一字母----还是三次；删完文本内容---两次，看起来似乎和select的选中有些关系，但是这和他们说的触发机制完全不同。
再试试事件问题。注释了jQ的select事件绑定，用Dom2事件绑定了一个事件，当然，要给input一个id方便获取
document.getElementById("FirstName").addEventListener('select', function() {
console.log('false');
}, false);
然后一运行一点击奇迹就出现了
完全超出预期啊有没有
干脆就把捕获和目标阶段分别用Dom2级Dom0级给绑定了，为了方便查看事件触发顺序，把捕获目标冒泡打印内容分别为1 2 3.
document.getElementById("FirstName").addEventListener('select', function() {
console.log('1');
}, true);
document.getElementById("FirstName").onselect=function(){
console.log('2');}
document.getElementById("FirstName").addEventListener('select', function() {
console.log('3');
}, false);
这次的结果是
事件是绑定了三个，trigger却触发了7次事件，由此可以证明，jQ没有分别绑定捕获目标冒泡，不然就是触发7次了。
那问题出在哪里呢，仔细观察目标阶段被触发了三次！
而且多次试验以后发现，无论有无其他两个阶段的事件，无论三事件绑定顺序，目标阶段事件必然在最开始、最后、最中间，一共出现三次（冒泡和捕获若有，则遵循绑定先后顺序触发各两次）
删除文本以后目标阶段触发两次，到此select事件触发多次的真正原因终于找到了。
处于某种原因trigger方法触发select事件，会把select的目标阶段事件重复触发三次，而且捕获阶段和冒泡阶段的也会分别触发两次。
那这个原因究竟是什么呢，为了弄明白，又在ie11和firefox上测试，发现两个浏览器是正常的一次。
用firefox 查看控制台，多次实验，发现三阶段均只会触发一次，且无论三事件绑定顺序，目标阶段事件必然在最开始触发，冒泡和捕获按照绑定顺序触发。
由于firefox和ie显示正常，chrome异常，所以我猜测，应该要么，chrome对于trigger方法触发select事件的处理比较提别;要么是jQ对trigger方法触发select事件的内部处理有问题，而firefox和ie做了额外的优化。个人更倾向与前者。
因为也曾怀疑是w3school的jquery库版本较旧的原因，换成了百度提供的jQ2.1.1的cdn但还是错误触发三次
不过暂时没有技术能力和时间成本再更深入的研究。写个博客，也算是留个坑，以后研究了再补吧0.0
jQ的select事件和trigger方法的小冲突的更多相关文章
- jQuery-委托事件和on方法注册事件
delegate注册委托事件 delegate--代理.委托 事件代理----事件最终不是由$("#first")执行,它只是代理元素 第一个参数:最终发生事件的元素 第二个参数: ...
- JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）
本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- jQuery 事件 - trigger() 方法
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- jQuery 事件 - trigger() 方法 和 triggerHandler() 方法
trigger() 方法触发被选元素的指定事件类型. triggerHandler() 方法触发被选元素的指定事件类型.但不会执行浏览器默认动作,也不会产生事件冒泡. triggerHandler() ...
- jq中事件绑定的方法
在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...
- JQ模拟触发事件
jQuery 事件 - trigger() 方法 jQuery 事件参考手册 实例 触发 input 元素的 select 事件: $("button").click(functi ...
- jq操作select集合
jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...
- JQuery | trigger() 方法
trigger() 方法触发被选元素的指定事件类型. 语法格式: trigger(type,[data]) type:触发事件类型 [data]:可选项,表示在触发事件时传递给函数的附加参数. 实例: ...
随机推荐
- new和delete创建和释放动态数组
1.动态创建和释放一维数组 #include<iostream> using namespace std; int main() { int n; cin>>n; //分配动态 ...
- 2019-2020-1 20199305《Linux内核原理与分析》第五周作业
系统调用的三层机制(上) (一)用户态.内核态和中断 (1)Intel x86 CPU有4种不同的执行级别 分别是0.1.2.3,数字越小,特权越高.Linux操作系统中只是采用了其中的0和3两个特权 ...
- Nginx与keepalived实现高可用
主keepalived设置 #安装keepalived [root@localhost ~]# yum -y install keepalived #安装nginx [root@localhost ~ ...
- intellij idea从git检出代码并建立工程
1. 打开intellij idea,点击configure,settings 2. 左侧展开Version Control,点击Git,点击下图中红框中按钮 3. 在弹出窗口中找到git.exe,点 ...
- jquery延迟加载
jquery实现图片延时加载,实现原理:不设置img的src地址,把地址存在img的alt中,当img标签出现在可视区域,alt值传给src.为避免看到替换文本alt,把字体的颜色设置为背景的颜色,如 ...
- 如何将Javaweb工程的访问协议由http改为https及通过域名访问?
将javaweb工程的http访问协议更改为https,需要做一下几部操作: 通过jre生成证书 调整tomcat的配置 调整工程的web.xm配置 具体详细过程如下: 一.生成证书 打开cmd切换到 ...
- 分词 | 双向匹配中文分词算法python实现
本次实验内容是基于词典的双向匹配算法的中文分词算法的实现.使用正向和反向最大匹配算法对给定句子进行分词,对得到的结果进行比较,从而决定正确的分词方法. 算法描述正向最大匹配算法先设定扫描的窗口大小ma ...
- 聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...
- Elastic：用Docker部署Elastic栈
安装 因为我们需要使用docker来进行安装,我们必须安装: docker:根据不同的操作系统,请按照要求安装docker.可以到网站https://docs.docker.com/去安装 docke ...
- WPF DataGrid显示MySQL查询信息，且可删除、修改、插入 （原发布 csdn 2018-10-13 20:07:28）
1.入行好几年了,工作中使用数据库几率很小(传统行业).借着十一假期回家机会,学习下数据库. 2.初次了解数据库相关知识,如果本文有误,还望告知. 3.本文主要目的,记录下wpf界面显示数据库信息,且 ...