关于jquery的obj.click()、和obj.on()以及行内的onclick事件

来源：互联网发布：推荐书籍知乎编辑：程序博客网时间：2024/06/07 05:54

一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。

以下以点击事件为例：

通常我们直接写obj.click();实现点击事件的效果，但是这种写法不支持动态元素或样式绑定事件。

支持动态元素绑定事件的是.live()和.on()。live在jquery1.7以后就不推荐使用了。

行内的onclick事件也可以实现对js的动态绑定事件。

以下是我自己整理的关于三种写法的使用，以便以后查看：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div class="content"><button id="add" onclick="add()">添加</button><button id="onadd" onclick="onAdd()">on添加</button><ul id="ul"><li>菜单一 <span onclick="delect(this);">删除</span></li><li>菜单二<span onclick="delect(this);">删除</span></li><li>菜单三<span>删除</span></li><li>菜单四<span>删除</span></li><li>菜单五<span>删除</span></li><li>菜单六<span>删除</span></li></ul></div><script src="js/jquery.min.js"></script><script>function add(){$('#ul').append('<li>菜单666<span>删除</span></li>')}function onAdd(){$('#ul').append('<li>on菜单666<span onclick="delect(this);">删除</span></li>')}function delect(obj){$(obj).parent().remove();console.log('onclick');}/*$('ul li span').click(function(){$(this).parent().remove();console.log('click');});*/$(document).on('click','#ul li span',function(){$(this).parent().remove();console.log('on');});</script></body></html>

注意：此处有一个jquery的引入。

此处.on的事件绑定用法是：.on(events,[,selector][,data],handler)，.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，

原理是：事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理。

好处是：万一子元素非常多，给每个子元素都添加一个事件会影响到性能；为动态添加的元素也能绑定指定事件。

阅读全文

0 0