方法和事件都不难理解，分开用也都没问题，但是一起用就有些小问题出现。

直接上结论：使用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方法的小冲突的更多相关文章

  1. jQuery-委托事件和on方法注册事件

    delegate注册委托事件 delegate--代理.委托 事件代理----事件最终不是由$("#first")执行,它只是代理元素 第一个参数:最终发生事件的元素 第二个参数: ...

  2. JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）

    本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(ev ...

  3. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  4. jQuery 事件 - trigger() 方法

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  5. jQuery 事件 - trigger() 方法 和 triggerHandler() 方法

    trigger() 方法触发被选元素的指定事件类型. triggerHandler() 方法触发被选元素的指定事件类型.但不会执行浏览器默认动作,也不会产生事件冒泡. triggerHandler() ...

  6. jq中事件绑定的方法

    在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...

  7. JQ模拟触发事件

    jQuery 事件 - trigger() 方法 jQuery 事件参考手册 实例 触发 input 元素的 select 事件: $("button").click(functi ...

  8. jq操作select集合

    jq操作select集合 时间:2012年12月07日分类:Javascript 最近一段时间发现,老是要跟select,option相关的东西打交道,而且有的时候还会搞错,于是,抽了一点时间整理了一 ...

  9. JQuery | trigger() 方法

    trigger() 方法触发被选元素的指定事件类型. 语法格式: trigger(type,[data]) type:触发事件类型 [data]:可选项,表示在触发事件时传递给函数的附加参数. 实例: ...

随机推荐

  1. AcWing 21. 斐波那契数列

    题目地址 https://www.acwing.com/solution/acwing/content/2896/ 题目描述输入一个整数 n ,求斐波那契数列的第 n 项. 假定从0开始,第0项为0. ...

  2. P4287 [SHOI2011]双倍回文

    题意 考虑对每个节点\(x\)维护\(lastpos_x\)表示\(x\)的所有后缀回文串中第一个\(len\leqslant len_x/2\)并且能和\(x\)最后一个字符匹配的,之后枚举节点,判 ...

  3. oracle中utl_raw

    RAW,类似于CHAR,声明方式RAW(L),L为长度,以字节为单位,作为数据库列最大2000,作为变量最大32767字节.LONG RAW,类似于LONG,作为数据库列最大存储2G字节的数据,作为变 ...

  4. __setattr__和__delattr__和__getattr__

    目录 一.__setattr__ 二.__delattr__ 三. __getattr__ class Foo: x = 1 def __init__(self, y): self.y = y def ...

  5. 使用Runtime的objc_msgSend实现模型和字典的互转

    一.介绍 模型转字典,字典转模型,这是开发中最基本的功能.系统类中提供了一个setValuesForKeysWithDictionary方法来实现字典转模型,至于模型转字典,这个就需要使用runtim ...

  6. Python 如何操作微信

    1.给文件传输助手发一条消息 import itchat itchat.auto_login(enableCmdQR=True) # 这里需要你人工手机扫码登录 itchat.send('Hello, ...

  7. C++ day01-C++的函数和对象

    C++的函数和对象 1.1 1 混合型语言 c++以.cpp为文件扩展名,有且只有一个名为main的主函数,因保留了这个面向过程的主函数,所以被称为混合语言 2 注释方式 . C++的注释方式有两种, ...

  8. 依赖注入在 dotnet core 中实现与使用：2 使用 Extensions DependencyInjection

    既然是依赖注入容器,必然会涉及到服务的注册,获取服务实例,管理作用域,服务注入这四个方面. 服务注册涉及如何将我们的定义的服务注册到容器中.这通常是实际开发中使用容器的第一步,而容器本身通常是由框架来 ...

  9. Java 类加载机制(阿里)-何时初始化类

    (1)阿里的面试官问了两个问题,可以不可以自己写个String类 答案:不可以,因为 根据类加载的双亲委派机制,会去加载父类,父类发现冲突了String就不再加载了; (2)能否在加载类的时候,对类的 ...

  10. vscode wsl git 换行符问题autocrlf

    wsl中使用code,由于windows换行符问题git会显示大量文件修改,此时需要在wsl中设置autocrlf设置 git config --global core.autocrlf input ...