jQuery事件处理及事件解绑

1. 绑定单个事件

		//css代码      
        div{
	        width: 200px;
	        height: 200px;
	        background-color: teal;
        }
        //html代码
        <div></div>
        //方法1
        //jQuery代码(记得引入jQuery文件)
        $(function() {
            $('div').click(function() {
                alert('你点我了');
            })
        })
        //方法2
       $('div').on('click', function() {
             alert('你点我了');
       })

2. 绑定多个事件

        //jQuery代码(记得引入jQuery文件)
        $(function() {
            $('div').on({
                mouseenter: function() {
                    $('div').css('backgroundColor', 'pink');
                },//鼠标进去背景颜色改为pink
                mouseleave: function() {
                    $('div').css('backgroundColor', 'blue');
                },//鼠标离开背景颜色改为blue
                click: function() {
                    $('div').css('backgroundColor', 'red');
                }//鼠标点击背景颜色改为red
            })
        })

若绑定的事件相同，可以使用简便方式

		//css代码
		.current {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        //jQuery代码(记得引入jQuery文件)
        $(function() {
            $('div').on('mouseenter mouseleave', function() {//多个事件处理程序之间用空格分开
                $('div').toggleClass('current');
            })
        })

3. 解绑事件 $(‘div’).off()

//jQuery代码(记得引入jQuery文件)
$('div').off(); //解绑所有事件
$('div').off('click'); //解绑onclick事件

4. one()与on()的区别
   one()顾名思义只能触发一次，而on()可以出发无数次

//jQuery代码(记得引入jQuery文件)
$('div').one(function(){
	alert('我只能弹出来一次');//这个对话框只能弹出来一次
})
$('div').on('click',function(){
	alert('我能弹出无数次'); //每点击一次弹出对话框一次
})