JS 使用JQuery的on()函数来进行事件绑定的问题

[柳叁]

请问一下事件绑定的操作写在元素被创建之前可以将事件绑定到元素上吗？不管可可以，还劳烦大神来讲一下JQuery当中 on 函数事件绑定的作用机理，或者给个资料我自己去看。

在做项目中，看到一段前端代码，是用 JQuery的on()函数进行click事件绑定的。这个事件绑定写成了这种形式

 $(document).on('click', 'i.fa.fa-trahs-o', function () {
                       ..........
            });

选择器选择的元素是js动态生成的，而且是用户某系操作触发后才生成的。这种绑定顺序也可以将事件绑定到元素上吗？是元素创建的时候又触发了这个 $(document).on() 还是 事件绑定机制当中本来就允许这样进行绑定？

[waqxy]

如果元素不多的话，还是直接绑定好一点，因为用委托的话，可能会让修改你的代码的同事不好理解为什么要这么写， 并且一般委托的情况下，还要判断是哪个元素触发的，再执行不同的操作。（直接绑定就不用判断了） 事件委托跟js事件流有关，事件流又跟浏览器有关（IE9+和主流浏览器支持事件冒泡和捕获，IE8和之前的版本只支持事件冒泡）。 DOM树深的话会有效率问题，因为事件冒泡和事件捕获要遍历元素，这也和js事件流有关。

[当作看不见]

http://www.runoob.com/jquery/event-delegate.html 看一下这个, delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

[waqxy]

这种形式的写法是将clcik绑定到$(document)上， $(document)的子元素发生click时会冒泡到document来处理， 当冒泡到document时会检测事件的target，如果target与选择符（你的这里是'i.fa.fa-trahs-o'）匹配就触发事件，否则不触发。 这是种委托的形式。 http://www.jquerycn.cn/a_5346

[柳叁]

引用 1 楼 qq_29594393 的回复:

http://www.runoob.com/jquery/event-delegate.html 看一下这个, delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。

好的！ 我自己今早也找了一些博客 了解到了原来还有一种说法叫做事件委托。

[柳叁]

引用 2 楼 waqxy 的回复:

这种形式的写法是将clcik绑定到$(document)上， $(document)的子元素发生click时会冒泡到document来处理， 当冒泡到document时会检测事件的target，如果target与选择符（你的这里是'i.fa.fa-trahs-o'）匹配就触发事件，否则不触发。 这是种委托的形式。 http://www.jquerycn.cn/a_5346

非常感谢！！ 正在学习事件委托和事件绑定的区别和应用的问题 元素较多的时候好像事件委托效率要高很多，那么如果元素并不是那么多的话的时候呢？跟浏览器内核有关吗？跟DOM树的层数有关吗？

[蚂蚁上树]

on 是冒泡上来的。

[柳叁]

引用 6 楼 waqxy 的回复:

如果元素不多的话，还是直接绑定好一点，因为用委托的话，可能会让修改你的代码的同事不好理解为什么要这么写， 并且一般委托的情况下，还要判断是哪个元素触发的，再执行不同的操作。（直接绑定就不用判断了） 事件委托跟js事件流有关，事件流又跟浏览器有关（IE9+和主流浏览器支持事件冒泡和捕获，IE8和之前的版本只支持事件冒泡）。 DOM树深的话会有效率问题，因为事件冒泡和事件捕获要遍历元素，这也和js事件流有关。

好的！！非常感谢