jQuery知识点总结（五）

事件冒泡和默认行为

什么是事件冒泡？
当给子级一个事件的时候，子级的事件会传递给父级，父级也会执行这个事件

如何阻止事件冒泡
在子级的事件函数内加上return false；
如果子级有event参数传入可以在子级的事件函数内加上event.stopPropagation( );

什么是默认行为
默认行为就是没有添加但是本身就拥有的行为，比如a标签、submit按钮点击会跳转页面

如何阻止默认行为
在事件函数内加上return false；
如果有event参数传入可以在事件函数内加上event.preventDefault( );

事件自动触发

trigge( )和triggerHandler( )都会自动触发事件。

trigger

不会阻止默认行为以及事件冒泡
注意！如果已经在事件函数内阻止了事件冒泡或者默认行为，trigger同样也会阻止

triggerHandler

会阻止默认行为以及事件冒泡

重点！！\”< a >\” 标签使用trigger或者是triggerHandler都不会触发默认事件
触发默认事件的解决办法：给\”< a >“标签里面添加一个”< span >\”标签，$(“span”).trigger(“click”)。

自定义事件

自定义事件要用对象.on(“事件”，函数)来定义
用trigger或者triggerHandler来调用

<script>$(function(){//给按钮添加一个自定义事件$(\"button\").on(\"MyClick\",function(){alert(\"我是自定义事件\")})//调用自定义事件$(\"button\").trigger(\"MyClick\");})</script><body><button>点击</button></body>

事件命名空间

添加事件的命名空间 click.自定义的命名空间
触发条件

事件是用on绑定的
事件通过trigger触发

以下程序给子级绑定了click,click.1事件，也给父级绑定了click,click.1事件,此时点击son会触发所有点击事件，点击father会触发father的点击事件

<script>$(function(){$(\".son\").on(\"click.1\",function(){alert(\"son click.1\");})$(\".son\").on(\"click\",function(){alert(\"son click\");})$(\".father\").on(\"click\",function(){alert(\"fath click\");})$(\".father\").on(\"click.1\",function(){alert(\"father click.1\");})</script><body><div class=\"father\"><div class=\"son\"></div></div></body>

$(\”.son\”).trigger(“click”);
此时也会触发所有点击事件（先触发click.1事件，因为这个事件先添加的）

$(\”.father\”).trigger(“click.1”);
只会触发father的click.1的点击事件，不会触发father的click事件

$(\”.son\”).trigger(“click.1”);
触发son的点击事件以及father同名（click.1）的点击事件,不会触发father的click事件

事件委托

当我们在页面加载完毕之后添加DOM元素，该DOM元素不会执行入口函数中的函数，此时我们需要事件委托，将监听事件交给加载好的DOM元素。

以下程序点击按钮会新增一个li，点击li会在控制台打印li的内容

<script>$(function(){//点击按钮新增li$(\"button\").on(\"click\",function(){$(\"ul\").append(\"<li>我是新增的li</li>\");})//jQuery中如果找到的元素不止一个，那么jQuery会遍历所有找到的元素并给他们添加事件$(\"ul>li\").on(\"click\",function(){console.log($(this).html());})//事件委托$(\"ul\").delegate(\"li\",\"click\",function(){console.log($(this).html());        //this指的就是点击的li，不是ul（li将事件传递给ul的）})})</script><body><ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li></ul><button>新增li</button></body>

注意！当我们新增li之后，点击新增的li控制台不会打印新增的li

原因： jQuery入口函数是在所有DOM元素加载完成之后执行的，这里新增的li是在DOM元素
加载完毕之后（入口函数执行之后）新增的，所以新增的li没有click事件

解决：将监听click事件的任务交给父元素，当点击新增的li时，click事件会传递给父元素
父元素响应click事件，最终新增的li会执行click事件

！！！！现在用on来替代delegate

$(“ul”).delegate(“li”,“click”,function(){})
$(“ul”).on(“click”,“li”,function(){})

事件委托练习

点击登录弹出登录框，点击关闭关闭登录框

<style>.loginback{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgb(0,0,0,0.5);}body{width: 99%;height: 100%;}.login{width: 500px;height: 300px;border: 5px solid black;position: relative;margin: 100px auto;}span{width: 50px;height: 50px;position: absolute;right: 0;top: 0;background-color: blue;}</style><script src=\"../jquery-1.12.4.min.js\"></script><script>$(function(){//点击弹出登录框$(\"a\").on(\"click\",function(){var $login=$(\'<div class=\"loginback\">\'+\'  <div class=\"login\">\'+\'      <span>关闭</span>\'+\'  </div>\'+\'</div>\')$(\"body\").append($login);//点击关闭关闭登录框(span的click委托给body监听)$(\"body\").delegate(\".login>span\",\"click\",function(){$login.remove();})return false;})})</script><body><a href=\"http://www.baidu.com\">登录</a><div></div></body>

jQuery知识点总结（五）