原生js自定义事件(dispatchEvent派发)和jquery自定义事件对比。

  • html部分
<div id="app">div>	
  • js部分
<script>
			//jquery 自定义事件绑定bind或者是on; trigger触发
			//注意事件绑定的对象和触发的对象要保持一致
			 $('#app').bind('hello',function(){
			 	alert(123)
			 })
			 $('#app').on('click',function(){
			 	$('#app').trigger("hello");
			 })
			
			//原生js
			//自定义的事件可以绑定到DOM元素上定义事件处理逻辑,然后通过dispatchEvent派发事件。
			var div = document.getElementById('app')
				div.addEventListener('kaixinma',kaixinmahandel) 
			//创建event事件 new Event()
			//事件对象本身就是一个对象,因此可以添加属性和方法	
			var evt = new Event('kaixinma') //事件类型要保持一致 kaixinma
				evt.num = 10;
				evt.obj = {a:1}
				div.dispatchEvent(evt)//使用dispatchEvent对事件进行抛发 注意侦听对象和抛发对象必须一致
			function kaixinmahandel(e){
				console.log(e)
				console.log(111)
				}
</script>

你可能感兴趣的:(JavaScript)