jQuery事件

jQuery事件：

　　1、事件注册

　　　　单个事件注册　

　　　　　　element.事件(function() {})　　例：$(“div”).click(function(){ 事件处理程序 })

　　2、事件处理

　　　　事件处理on()绑定事件

　　　　　　on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

　　　　　　element.on(events,[selector],fn)

　　　　　　1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。2. selector: 元素的子元素选择器 。3. fn:回调函数 即绑定在元素身上的侦听函数。

　　　　　　例：可以绑定多个事件，多个事件处理程序

　　　　　　　　$(“div”).on({ 　　　　　　　　　　mouseover: function(){}, 　　　　　　　　　　mouseout: function(){}, 　　　　　　　　　　click: function(){} 　　　　　　　　});

 　　　　　　　  当绑定多个事件，处理程序相同时

　　　　　　　　$(“div”).on(“mouseover mouseout”, function() { 　　　　　　　　　　$(this).toggleClass(“current”); 　　　　　　　　});

　　　　　　　　可以事件委派 *** 作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。　　　　　　

　　　　　　　　$(‘ul‘).on(‘click‘, ‘li‘, function() { 　　　　　　　　　　alert(‘hello world!‘); 　　　　　　　　});

 　　　　　　　　动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

　　　　　　　　$(“div").on("click",”p”, function(){ 　　　　　　　　　　alert("俺可以给动态生成的元素绑定事件") 　　　　　　　　}); 　　　　　　　　$("div").append($("<p>我是动态创建的p</p>"));

 

　　　　事件处理off()解绑事件

　　　　　　off() 方法可以移除通过 on() 方法添加的事件处理程序。

　　　　　　　　$("p").off() // 解绑p元素所有事件处理程序 　　　　　　　　$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 　　　　　　　　$("ul").off("click", "li"); // 解绑事件委托

 

　　　　自动触发事件trigger()

　　　　　　有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

　　　　　　element.click() // 第一种简写形式 　　　　　　element.trigger("type") // 第二种自动触发模式 　　　　　　$("p").on("click", function () { 　　　　　　　　alert("hi~"); 　　　　　　}); 　　　　　　$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击 　　　　　　element.triggerHandler(type) // 第三种自动触发模式 　　　　　　triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

 

　　3、事件对象

　　　　事件被触发，就会有事件对象的产生。

　　　　element.on(events,[selector],function(event) {})

　　　　阻止默认行为：event.preventDefault() 或者 return false , 阻止冒泡： event.stopPropagation()

jQuery事件