bind绑定事件
1 bind(type,data,fn) 2 【参数描述】 3 type (String) : 事件类型 4 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象 5 fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数 6 // bind 参数都是选传的,接收参数e.data 7 $('button').bind('click',{'a':'b'},fn) 8 function fn(e) { 9 console.log(e.data) 10 console.log(e.data.a) 11 } 12 13 $('button').bind('click',fn) 14 function fn(e) { 15 console.log('wahaha') 16 } 17 18 // 简写的事件名称当做方法名 19 $('button').click({'a':'b'},fn) 20 function fn(e) { 21 console.log(e.data) 22 console.log(e.data.a) 23 } 24 25 $('button').click(fn) 26 function fn(e) { 27 console.log('wahaha') 28 }
解绑事件
$(选择器).unbind(type,fn); 【参数说明】 type (String) : (可选) 事件类型 fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数 【描述】 1. bind()的反向操作，从每一个匹配的元素中删除绑定的事件。 2. 如果没有参数，则删除所有绑定的事件。 3. 如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
常见事件
click(function(){...}) // 单机事件
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // input框鼠标离开时内容改变触发
keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
1 <style> 2 .outer{ 3 width: 300px; 4 height: 300px; 5 background-color: red; 6 } 7 .inner{ 8 width: 100px; 9 height: 100px; 10 background-color: forestgreen; 11 } 12 </style> 13 14 <body> 15 <div class="outer"> 16 <div class="inner"></div> 17 </div> 18 </body> 19 20 <script> 21 $('.outer').click( 22 function () { 23 alert('outer') 24 }) 25 $('.inner').click( 26 function (e) { 27 alert('inner') 28 // e.stopPropagation() //阻止事件冒泡方法1 29 return false //阻止事件冒泡方法2 30 }) 31 </script>
常用的组织事件冒泡的方式
【方式一】通过返回false来取消默认的行为并阻止事件起泡。
举例：
$("form").bind("submit", function() { return false; })
【方式二】通过event.preventDefault() 方法阻止事件起泡
举例：
$("form").bind("submit", function(event){
event.stopPropagation();
});
事件委托
原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
1.性能要好 2.针对新创建的元素，直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景：
-
为DOM中的很多元素绑定相同事件；
-
为DOM中尚不存在的元素绑定事件；
语法：
on(events,selector,data,fn); events( String) : 一个或多个空格分隔的事件类型 selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素 data: 当一个事件被触发时，要传递给事件处理函数的event.data。 fn:回调函数 ******这里一定要注意的是，selector，这里是放选择器，不是放jQuery对象******
【举例】
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不许点')
})
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件
页面加载
1 document.onload = function(){ 2 //js 代码 3 } 4 window.onload = function () { 5 $('button').click(function () { 6 alert('不许点') 7 }) 8 } 9 onload要等到所有的文档 音视频都加在完毕才触发 10 onload只能绑定一次 11 12 //jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用 13 $(document).ready( 14 function () { 15 //文档加在完毕之后能做的事情 16 }) 17 18 //jquery的方式(简写)***** 19 $(function () { 20 //文档加在完毕之后能做的事情 21 }) 22 23 //示例 24 $(function () { 25 $('button').click(function () { 26 alert('不许点') 27 }) 28 }) 29 30 //jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次 31 $(window).ready( 32 function () { 33 alert('123') 34 })
each
each() 方法规定为每个匹配元素规定运行的函数。
jQuery提供的each方法是对参数中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。
1 语法结构 2 $(selector).each(function(index,element)) 3 【举例】 4 <body> 5 <ul> 6 <li>选项一</li> 7 <li>选项二</li> 8 <li>选项三</li> 9 </ul> 10 </body> 11 <script> 12 $('li').each( 13 function (ind,dom) { //主动传ind是每项的索引,dom是每一项的标签对象 14 console.log(ind,dom) 15 } 16 ) 17 </script>