js事件详解

最新推荐文章于 2024-09-16 17:42:02 发布

Vincent.TM

最新推荐文章于 2024-09-16 17:42:02 发布

阅读量370

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/houyibing930920/article/details/85864920

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

事件详解

事件的触发一般有三个阶段，事件捕获、目标事件、事件冒泡。

1. 事件绑定

事件绑定：即需要对操作动作做出响应。基本绑定有三种方式。

嵌入DOM，给dom直接增加事件函数。

  <button onclick="open()">按钮</button><button onclick="clickFn()">按钮</button>
 <script>
 	function clickFn(){
 	    alert('你已经点击了按钮‘)；
 	}
 </script>

获取到dom元素后，对dom元素增加可点击事件属性，动态绑定

 document.getElementById('btn').onclick = function(){    alert( '点击了按钮') }

监听事件，

 document.getElementById('btn').addEventListener('click',function(){
 		alert("点击了按钮")
 })//老ie下通过 attachEvent进行监听

以上三种方式均可以对元素绑定指定事件。

事件冒泡

当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，直到传到window。但是只是传递事件，对应的处理函数是不传递的。如果父级没有对应的处理函数，则没有任何表现，大多数情况下是取消事件冒泡，
取消冒泡的方式

非ie e.stopPropagation()
ie下使用 e.cancelBubble=true

事件委托

事件委托的实现原理其实就是事件冒泡，父级可以捕捉到子元素的事件。更多的使用到ul及li上，需要给对应的每个li绑定上事件时，可以将事件绑定到父级ul上。
使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
例如：

	document.getElementsByTagName("ul")[0].addEventListener('click',function(e){
			var e = e || window.e; 
			var target  = e.target ||  e.srcElement; //以上两句都是为了兼容浏览器
			alert("点击的内容是："+target.innerHTML);
	});

这里点击li会弹出每个对应li里的内容。

jQuery中事件的绑定。

jQuery中事件的绑定有多种方式，比如 bind 、 on 、 live 、one （一次性执行函数）、 delegate几种。
对应的解绑定也有多种 unbind、off、die、 undelegate
接下来对这几种绑定方式详细的说明下。

one 属于一次性绑定事件，执行一次后再次点击则不生效。
bind 是直接绑定在元素上，只能对已经存在的元素绑定事件，对未来元素不友好，不能自动为未来元素增加事件。
具体使用方法如下：$("#"+id).bind(type,[data],fn);

$(’#btn’).bind(“click”, function(){
alert(“按钮触发点击事件”);
});

解绑函数为 .unbind(type,data);不加参数为移除所有的类型的事件，只有type参数时为移除type类型的所有事件，存在两个参数时，为移除type类型的下data数组里的事件。
live绑定利用了事件冒泡的原理，使用事件委托的方式绑定事件，live方法并没有将监听器绑定到自己(this)身上，而是绑定到了document身上。
具体使用方法：$(’#’+id).live(type, [data], fn)
$(’#myol li’).live(‘click’,getHtml); 给ul下li绑定具体事件。
解绑函数为 .die(type,data);使用方式同unbind；
delegate和live相似，但由于live将事件委托给了document，使得document比较厚重，这时边增加了delegate,用于解决这个问题
具体使用方法：$(’#’+id).delegate(object,type, [data], fn) //这里的object为目标触发事件
$(’#ul’).delegate(‘li’,‘click’,function(){ alert(‘click’)});
解绑函数为 .undelegate(type,data);使用方式同unbind；
on 其实以上几种绑定的方式最终都会调用on ，
具体使用方式如下：$(’#’+id).on(type,[selector],[data],fn)
例子： $(’#ul li’).on(‘click’,function(){});
解绑函数为 .off(type,data);使用方式同unbind；

结论：

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持对未来新添加元素的事件设置；
.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；
.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些；

使用心得：