jQuery事件操作
jQuery的事件操作
1.绑定事件
-
bind(type,data,fn) -
参数说明
-
type(string) :事件类型
-
data(Object):可选,作为event.data属性值传递给事件对象的额外数据对象
-
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数
-
示例:当每个p标签被点击时,弹出其文本
-
$("p").bind("click", function(){
alert( $(this).text() );
});
-
-
示例:事件处理之前传递一些附加的数据
-
function handler(event) {
//event.data 可以获取bind()方法的第二个参数的数据
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
-
-
常见事件
-
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //内容发生变化，input，select等
keyup(function(){...})
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象 -
通过返回false来取消默认的行为来阻止事件起泡
-
$("form").bind("submit", function() { return false; })
-
-
通过event.preventDefault()方法来阻止事件起泡
-
$("form").bind("submit", function(event){
event.stopPropagation();
});
-
-
-
2.解绑事件
-
unbind(type,fn); -
描述:bind()的反向操作,从每一个匹配的元素中删除绑定的事件,如果没有参数,则删除所有的绑定事件,如果把绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除
-
参数说明
-
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数
-
3.补充一次性事件
-
one(type,data,fn) -
描述:为每一个匹配的元素的特定事件,像(click)绑定一个一次性的事件处理函数,在每个对象上,这个事件处理函数只会被执行一次,其他规则与bind()函数相同
-
参数说明
-
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数
-
-
示例:当所有段落被第一次点击的时候,显示所有其文本
-
$("p").one("click", function(){
//只有第一次点击的时候才会触发，再次点击不会触发了
alert( $(this).text() );
});
-
4.事件委托(事件代理)
-
原理:利用冒泡的原理,把事件加到父级上,触发执行效果
-
作用:
-
性能要好
-
针对新创新的元素,直接可以拥有事件
-
-
事件源:
-
跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的
-
-
使用情景
-
为DOM中的很多元素绑定的相同事件
-
为DOM中尚不存在的元素绑定事件
-
<body>
<ul>
<li class="luffy">路飞</li>
<li>路飞</li>
<li>路飞</li>
</ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//通过on()方法
$('ul').on('click','#namei,.luffy',function(){
console.log(this);
})
//未来追加的元素
$('ul').append('<a id="namei">娜美</a>')
}
</script> -
语法:在选定的元素上绑定一个或者多个事件处理函数
-
on(type,selector,data,fn); -
参数说明
-
events(String) : 一个或多个空格分隔的事件类型
-
selector(String) : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
-
-
-
-
-
