jQuery中的on与bind绑定事件区别实例详解
程序员文章站
2024-02-10 14:56:10
on(events,[selector],[data],fn)
events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown....
on(events,[selector],[data],fn)
- events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myplugin” 。
- selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代.
- data:当一个事件被触发时要传递event.data给事件处理函数。
- fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
- bind(type,[data],fn)
- 为每个匹配元素的特定事件绑定事件处理函数。
- jquery 3.0中已弃用此方法,请用 on()代替。
- 参数类型跟前面那个on一样.
bind与on的区别就在于–事件冒泡
demo1:
## 点击相应的li弹出里面内容,这里把on换成bind是一样的没有区别.也就是说on不使用selector属性与bind并无区别
<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> $(function () { $('ul li').on('click',function(){ alert($(this).text()) }); }) </script>
demo2:
<script> // 这种情况你会发现点击第四个不具备事件.也就是不具备动态绑定事件能力 $(function () { $('ul li').bind('click',function(){ alert($(this).text()) }); var ok = $('<li>4</li>'); $('ul').last().append(ok); }) </script>
demo3
<script> // 换成on的写法,添加selector属性,就是通过事件冒泡,进行了事件委托,把li的事件委托给其父元素,点击后面加入的li就默认绑定了事件 $(function () { $('ul').on('click','li',function(){ alert($(this).text()) }); var ok = $('<li>4</li>'); $('ul').last().append(ok); }) </script>
事件委托的好处
- 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;
- 为动态添加的元素也能绑上指定事件;
以上所述是小编给大家介绍的jquery中的on与bind绑定事件区别实例详解,希望对大家有所帮助
推荐阅读
-
jQuery中的on与bind绑定事件区别实例详解
-
jQuery中关于live绑定多个事件整理的详解
-
jQuery live绑定的事件与解除绑定的实例详解
-
jQuery事件中mouseover与mouseenter的区别
-
Jquery中绑定事件bind与live的区别介绍
-
jQuery中bind和live以及delegate与on绑定事件的方式与区别详解
-
Jquery中绑定事件与普通事件的区别
-
jQuery中的bind绑定事件与文本框改变事件的临时解决方法_jquery
-
jquery中移除了live()和die(),新版事件绑定on()和off()的方法详解
-
jQuery中serializeArray()与serialize()的区别实例分析_jquery