列表元素 4

1.bind

bind(type,[data],function(eventObject))  bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,

参数函数如下:

type:事件类型,如click、change、mouseover等;

data:传入监听函数的参数,通过event.data取到;

function:监听函数,可传入event对象,这里的event是jquery封装的event对象。

bind: function( types, data, fn ) {

return this.on( types, null, data, fn );

可以看到内部是调用了on方法。

bind的特点就是会把监听器绑定到目标元素上,有一个邦一个,在页面上的元素不会动态添加的时候使用它没有什么问题。

但如果列表中动态增加一个“列表5”,点击它是没有反应的,必须再bind一次才行。

测试代码:

			$(function(){
			$('div').bind('click',function(){	
				if($(this).text()=='列表4'){
					$(this).after('<div>列表5</div>');
				alert($(this).text());
注意:jquery中append()和after()方法都可以添加元素,不同之处是append()是在要添加元素的末尾(在元素内)添加,而after()是在要添加的元素之后(在元素外)。 

2.live

live(type, [data], fn)

live的参数和bind一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素),

使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。

将上面代码中的bind改为live后,点击列表5就可以弹出“列表5”了。

注意:live方法在在 jQuery 版本 1.7 中被废弃在版本 1.9 中被移除,官方建议使用on代替。

测试代码:

	$(function(){
			$('div').live('click',function(){	
				if($(this).text()=='列表4'){
					$(this).after('<div>列表5</div>');
				alert($(this).text());
3.delegate

    将监听事件绑定在就近的父级元素上,

源码:     delegate: function( selector, types, data, fn ) {       

 return this.on( types, selector, data, fn );    

}
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,

并规定当这些事件发生时运行的函数。
这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。
代码,实现效果,点击div,两个p标签的文字颜色都发生变化。

<p>div内的p标签</p> <p>div外的p标签</p> $(function(){ $('div').delegate('p','click',function(){ $('p').css('color','blue');    on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
代码,实现效果同上,把delegate改为on,第一个参数为click,第二个参数p可写可不写,第三个参数同上。

	$(function(){
			$('div').on('click','p',function(){	
				$('p').css('color','red');	
控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签输入:
monitorEvents($0)
现在,将鼠标悬停在该元素上时,关注或单击它, 将显示触发事件的名称及其数据。
要停止获取该数据,只需在控制台写入下行:
unmonitorEvents($0)
monitorEvents() Documentat...
				
在使用bootstrap table等这些异步增删查的表格时,经常会遇到使用on、click等方法监听不到触发的点击事件等,这是需要使用delegate方法,用法如下: $( "#table" ).delegate( ".rulesSelect", "click", function() { console.log("abee"); # table 为 一个div容器
我们页面经常需要监听input输入框的value值的变化,常用事件一般有onblur、onchange、oninput、onpropertychange。 但是实际使用这些事件并不能满足要求,onblur、onchange事件都需要失去焦点后才能触发,而且onchange事件经常触发延迟,有时候达不到想要的效果。 onpropertychange事件能监非自定义属性值的变...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <meta http-equiv="Content-Type" content="text/html; char...
.native 子组件上添加事件(父组件),触发事件,没有.native无法触发 无法在组件直接使用事件,需要加修饰符来实现 根元素上监听原生事件 (把vue组件转化成一个普通的HTML标签,并且对普通的HTML标签是没有任何作用的) 为什么组件里的data是函数? 在组件,因为可能在多处调用同一组件,为了不让多处的组件共享同一data对象,只能返回函数。 data为对象的话会报错,为了理解这种机制,我们假设data为一个对象,那么这同一个对象有可能被很多实例共享,一个实例改变其它也会跟着变,这明显是
什么是事件监听:当用户在界面上执行一个操作,例如按下键盘、拖动或者单击鼠标时,都将产生一个事件。类似的DOM事件如:onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、onselect、onchange、onchange、onfoucs、onblur等等。那么,我们对这些事件进行监听就叫做事件监听jquery总...