JQuery 事件

JQuery事件是对Javascript事件的函数封装。

Javascript 写法

document.getElementsByClassName('content')[0].onclick = function(){
	console.log(1)
}

JQuery 写法

$('.content').click(function(){
	console.log(1)
})

所有 Javascript 事件名中去掉 on 是 JQuery 中封装的事件方法。

事件绑定

在 Javascript 中，事件绑定 需要用到 addEventListener() 函数

document.getElementsByClassName('content')[0].addEventListener('click', function(){
	console.log(1)
}, false)

但是在 JQuery 中，事件绑定直接使用 On(type，[selector]，[data]，function) 函数

元素事件绑定

$('.content').on('click',function(){
	console.log(1)
})

子元素事件绑定

$('ul').on('click', 'li', function(e) {
    console.log($(e.target).text())
})

多事件绑定

$('.content').on({
	click: function(){
		console.log('click')
	},
	mouseenter: function(){
		console.log('mouseenter')
	},
	mouseleave: function(){
		console.log('mouseleave')
	}
})

自定义事件绑定

我们可以自定义事件名称，并且绑定在元素上。

$('.content').on('page',function(e,data){
	console.log(data)
})

主动触发事件

$('.content').trigger('page','data')

和 on 绑定事件有着相同的功能的是 one 绑定事件，但是 one 绑定事件只能触发一次。

$('.content').one('click', function() {
    console.log(1)
})

解绑事件
off 是用来接触绑定的事件。

$('.content').off()

也可以解绑某一个事件

$('.content').off('click')