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（）{移入移出时执行的函数，同时监听}
);
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
