兴义城乡建设部网站,承德的网站建设公司,使用网站模板快速建站教案,上海企业网站建站模板1. jQuery事件注册
单个事件注册
语法#xff1a;
element.事件(function(){})
eg#xff1a;$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
!DOCTYP…1. jQuery事件注册
单个事件注册
语法
element.事件(function(){})
eg$(“div”).click(function(){ 事件处理程序 })
其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;} .current {background-color: purple;}/stylescript srcjquery.min.js/script
/head
bodydiv/divulli我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/li/ulol/olscript$(function() {// 1. 单个事件注册$(div).click(function() {$(this).css(background, purple);});$(div).mouseenter(function() {$(this).css(background, skyblue);});})/script
/body
/html2. jQuery事件处理
2.1 事件处理on()绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
语法element.on(events,[selector],fn)
events:一个或多个用空格分隔的事件类型如click或keydown 。selector: 元素的子元素选择器 。fn:回调函数 即绑定在元素身上的侦听函数。
on() 方法优势1
可以绑定多个事件多个处理事件处理程序。 $(“div”).on({mouseover: function(){}, mouseout: function(){},click: function(){}
}); 如果事件处理程序相同 $(“div”).on(“mouseover mouseout”, function() {$(this).toggleClass(“current”);}); on() 方法优势2
可以事件委派操作 。事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上就是把事件委派给父元素。
$(ul).on(click, li, function() {alert(hello world!);
}); 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派最新版本的请用on替代他们。
on() 方法优势3
动态创建的元素click() 没有办法绑定事件 on() 可以给动态生成的元素绑定事件 $(“div).on(click,”p”, function(){alert(俺可以给动态生成的元素绑定事件)});$(div).append($(p我是动态创建的p/p));!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;} .current {background-color: purple;}/stylescript srcjquery.min.js/script
/head
bodydiv/divulli我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/li/ulol/olscript$(function() {// 2. 事件处理on// (1) on可以绑定1个或者多个事件处理程序// $(div).on({// mouseenter: function() {// $(this).css(background, skyblue);// },// click: function() {// $(this).css(background, purple);// },// mouseleave: function() {// $(this).css(background, blue);// }// });$(div).on(mouseenter mouseleave, function() {$(this).toggleClass(current);});// (2) on可以实现事件委托委派// $(ul li).click();$(ul).on(click, li, function() {alert(11);});// click 是绑定在ul 身上的但是 触发的对象是 ul 里面的小li// (3) on可以给未来动态创建的元素绑定事件// $(ol li).click(function() {// alert(11);// })$(ol).on(click, li, function() {alert(11);})var li $(li我是后来创建的/li);$(ol).append(li);})/script
/body
/html2.2 事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$(p).off() // 解绑p元素所有事件处理程序
$(p).off( click) // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$(ul).off(click, li); // 解绑事件委托
如果有的事件只想触发一次 可以使用 one() 来绑定事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/stylescript srcjquery.min.js/scriptscript$(function() {$(div).on({click: function() {console.log(我点击了);},mouseover: function() {console.log(我鼠标经过了);}});$(ul).on(click, li, function() {alert(11);});// 1. 事件解绑 off // $(div).off(); // 这个是解除了div身上的所有事件$(div).off(click); // 这个是解除了div身上的点击事件$(ul).off(click, li);// 2. one() 但是它只能触发事件一次$(p).one(click, function() {alert(11);})})/script
/head
bodydiv/divulli我们都是好孩子/lili我们都是好孩子/lili我们都是好孩子/li/ulp我是屁/p
/body
/html2.3 自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件不必鼠标点击触发。
element.click() // 第一种简写形式
element.trigger(type) // 第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式(triggerHandler模式不会触发元素的默认行为这是和前面两种的区别。)
$(p).on(click, function () {alert(hi~);
}); $(p).trigger(click); // 此时自动触发点击事件不需要鼠标点击!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/stylescript srcjquery.min.js/scriptscript$(function() {$(div).on(click, function() {alert(11);});// 自动触发事件// 1. 元素.事件()// $(div).click();会触发元素的默认行为// 2. 元素.trigger(事件)// $(div).trigger(click);会触发元素的默认行为$(input).trigger(focus);// 3. 元素.triggerHandler(事件) 就是不会触发元素的默认行为$(div).triggerHandler(click);$(input).on(focus, function() {$(this).val(你好吗);});// $(input).triggerHandler(focus);});/script
/head
bodydiv/divinput typetext
/body
/html3. jQuery事件对象
事件被触发就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为event.preventDefault() 或者 return false 阻止冒泡 event.stopPropagation()
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestylediv {width: 100px;height: 100px;background-color: pink;}/stylescript srcjquery.min.js/scriptscript$(function() {$(document).on(click, function() {console.log(点击了document);})$(div).on(click, function(event) {// console.log(event);console.log(点击了div);event.stopPropagation();})})/script
/head
bodydiv/div
/body
/html
