15、事件绑定
语法及区别
object.事件类型(function(){});
编码效率略高/部分事件jquery没有实现,所以不能添加
object.on('事件类型',function(){});
编码效率略低/所有的js事件都可以添加
这两种绑定事件的方法可以添加多个相同或不同的事件,不会被覆盖
16、事件冒泡和默认行为
阻止事件冒泡方法:
1、给回调函数设置return false;
2、调用event对象,使用event.stopPropagation();调用是给function要添加event形参
注意:添加时要将方法添加给子元素
阻止默认行为:
1、给回调函数设置return false;
2、调用event对象,使用event.preventDefault();调用是给function要添加event形参
17、事件自动触发
jquery提供了一个自动触发事件的方法
语法 object.trigger('要触发的事件');
语法 object.triggerHandler('要触发的事件');
区别:第一种会触发事件冒泡,第二种不会触发事件冒泡
第一种会触发默认行为,第二种不会触发默认行为
a标签与别的标签有一点小区别;
使用第一种方法时a标签不会触发默认行为;
解决方法:包装a标签 在a标签里面加一个别的标签 用第一种方法触发a标签里面的span标签
<a href="#"><span>跳转</span></a>
18.自定义事件
自定义事件就是做一个系统没有的事件,但是要能够响应的事件;
自定义事件要满足两个条件:1、事件不能通过 object.事件类型(function(){});绑定事件;
2、要通过object.trigger(‘要触发的事件’);触发
<body>
<div class="box"></div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.box').on('myclick',function(){//myclick属于自定义事件
alert($('自定义事件成功'));
});
$('.box').trigger('myclick')//自动触发myclick事件
});
</script>
</body>
19、事件命名空间
使用场景:在开发时,多人协同开发 ,用于区别是谁绑定的事件,
要想事件的命名空间有效,必须满足两个条件;
1、事件是通过on来绑定的
2、通过tigger触发事件
<body>
<div class="box"></div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.box').on('click.zs',function(){//在事件后写 .自己的标志如:'click.zs'
alert('这是张三绑定的事件');
});
$('.box').on('click.ls',function(){
alert('这是李四绑定的事件');
});
$('.box').trigger('click.zs')//表示调用张三绑定的事件
});
</script>
</body>
有相同的命名空间的函数,触发子元素时,会自动触发有相同命名空间的函数
没有命名空间的函数,触发子元素时,会触发子元素和父元素相同类型的事件
20、事件委托
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
delegate(selector,[type],[data],fn)
概述
指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
selector:选择器字符串,用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
21、移入移除事件
mouseover/mouseout事件,子元素移入移出也会触发父元素的事件
解决办法:
使用mouseenter/mouseleave事件子元素移入移出不会触发父元素的事件(在开发中推荐使用)
还有一个同时具备移入移除事件就是hover();
语法1 object.hover(
function(){移入时执行的函数},
function(){移出时执行的函数}
);
语法 object.hover(
function(){移入移出时执行的函数,同时监听}
);