js进阶课程 12-9 jquery的事件对象event的方法有哪些？

一、总结

一句话总结：三组六个，阻止默认事件一组，阻止冒泡一组，阻止冒泡和剩余事件一组。

1、事件的默认动作指什么？

比如点a标签跳转，比如点submit提交

2、如何阻止元素的默认事件？

event.preventDefault() 阻止事件的默认动作。

26         //阻止默认行为

27         $('#aid').click(function(e){

28             //e.preventDefault()

29             alert(e.isDefaultPrevented())

30         })

3、如何查看是否阻止和元素的默认事件？

event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。

26         //阻止默认行为

27         $('#aid').click(function(e){

28             //e.preventDefault()

29             alert(e.isDefaultPrevented())

30         })

4、事件冒泡是由内而外还是由外而内？

冒泡啊冒泡，用脚趾头想就知道冒泡是从内向外，所以事件冒泡也是从内向外。

5、如何阻止事件冒泡？

event.stopPropagation() 防止事件冒泡

43         $('#pid').click(function(e){

44             e.stopPropagation()

45             alert('p')

46         })

6、event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡是什么意思？

事件不会再冒泡了，并且，这个元素的其它事件也不再执行了

32         $('#aid').click(function(e){

33             //e.stopPropagation()

34             // alert('a')

35             // alert(e.isPropagationStopped())

36             e.stopImmediatePropagation()

37              alert('a1')

38              alert(e.isImmediatePropagationStopped())

39         })

7、事件对象event的方法如何使用？

把event直接传进来，然后直接调用它的方法就可以了

和event的属性一样，都是event直接点就好了

26         //阻止默认行为

27         $('#aid').click(function(e){

28             //e.preventDefault()

29             alert(e.isDefaultPrevented())

30         })

8、event的方法一般都带参数么？

一般都是不带参数的

9、event的方法有哪些？

三组六个，阻止默认事件一组，阻止冒泡一组，阻止冒泡和剩余事件一组。

  1. event.preventDefault() 阻止事件的默认动作。
  2. event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
  3. event.stopPropagation() 防止事件冒泡
  4. event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
  5. event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
  6. event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。

10、同时阻止了冒泡和默认事件的两种方法是什么？

return false
和
event.preventDefault() + event.stopPropagation()

55     //同时阻止事件冒泡和默认行为

56         $('#aid').click(function(e){

57             // e.stopPropagation()

58             // e.preventDefault()

59             alert('a')

60             return false

61         })

11、在js事件函数中return false是什么意思？

同时阻止了元素的冒泡和默认事件

55     //同时阻止事件冒泡和默认行为

56         $('#aid').click(function(e){

57             // e.stopPropagation()

58             // e.preventDefault()

59             alert('a')

60             return false

61         })

二、jquery的事件对象event的方法有哪些

1、相关知识

  1. event.preventDefault() 阻止事件的默认动作。
  2. event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
  3. event.stopPropagation() 防止事件冒泡
  4. event.isPropagationStopped()判断是否调用过 event.stopPropagation() 方法
  5. event.stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡
  6. event.isImmediatePropagationStopped() 检测 event.stopImmediatePropagation() 是否被调用过。
 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         input{width: 100px;height: 30px;}

         div{width: 200px;height: 200px;border:1px solid green;}

         #pid{width: 150px;height: 150px;border:1px solid blue;margin:25px;}

         #aid{width: 100px;height: 50px;border:1px solid red;margin:25px;display: block;}

       </style>

 </style>

 </head>

 <body>

 <h3>jQuery事件对象</h3>

 <div id="div1">

     <p id="pid"><a id="aid" href="http://www.51_zxw.net/" target="_blank">51zxw</a></p>

 </div>

 <input id="btn1" type="button" value="事件对象">

 <script type="text/javascript">

     $(function(){

         /*

         //阻止默认行为

         $('#aid').click(function(e){

             //e.preventDefault()

             alert(e.isDefaultPrevented())

         })

         $('#aid').click(function(e){

             //e.stopPropagation()

             // alert('a')

             // alert(e.isPropagationStopped())

             e.stopImmediatePropagation()

              alert('a1')

              alert(e.isImmediatePropagationStopped())

         })

         $('#aid').click(function(e){

              alert('a2')

         })

         $('#pid').click(function(e){

             e.stopPropagation()

             alert('p')

         })

         $('#div1').click(function(e){

             e.stopPropagation()

             alert('div')

         })

         $(document).click(function(){

             alert('document')

         })

     */

     //同时阻止事件冒泡和默认行为

         $('#aid').click(function(e){

             // e.stopPropagation()

             // e.preventDefault()

             alert('a')

             return false

         })

         $('#pid').click(function(e){

             alert('p')

         })

         $('#div1').click(function(e){

             alert('div')

         })

     })

 </script>

 </body>

 </html>
 

js进阶课程 12-9 jquery的事件对象event的方法有哪些？的更多相关文章

  1. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  2. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

  3. js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写 一.总结 一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象. 1.滚动事件scroll()的监听对象是 ...

  4. js进阶课程ajax简介（ajax是浏览器来实现的）

    js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...

  5. js进阶 11-9/10/11 jquery创建和插入节点

    js进阶 11-9/10/11 jquery创建和插入节点 一.总结 一句话总结: 1.jquery插入节点8个方法? 内部之前,内部之后,之前,之后:各两个 append()和appendTo() ...

  6. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  7. 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡

    jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...

  8. Javascript和jquery事件--事件对象event

    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...

  9. 第二十六课：jQuery对事件对象的修复

    因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类 ...

随机推荐

  1. javafx KeyFrame

    import javafx.animation.Animation; import javafx.animation.KeyFrame; import javafx.animation.Timelin ...

  2. 例说linux内核与应用数据通信（四）：映射设备内核空间到用户态

    [版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途]         一个进程的内存映象由以下几部分组成:代码段.数据段.BSS段和 ...

  3. 利用淘宝ip库限制地区访问

    https://sss.one/97.html 利用淘宝ip库限制地区访问 有些应用可能需要对某些地区的用户进行限制访问 在采用才此方法的时候,可以利用一些ip库对访问者的ip进行判断 淘宝ip库地址 ...

  4. ORA-16055: FAL request rejected

    主库频繁报错如下: ORA-16055: FAL request rejected   解决办法: ALTER SYSTEM SET log_archive_dest_state_2='DEFER' ...

  5. 笔记四：onsubmit和onclick的区别

    今天碰到关于表单提交的问题,我是用submit还是用onclick好呢,然后我去百度了一下两者的区别: onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点 ...

  6. 四、Docker+Tomcat

    原文:四.Docker+Tomcat 一.下载Tomcat镜像 具体可以search 搜索tomcat 相关镜像 docker pull sonodar/jdk8-tomcat8 二.创建容器 doc ...

  7. Writing buffer overflow exploits - a tutorial for beginners

    Buffer overflows in user input dependent buffers have become one of the biggest security hazards on ...

  8. [RxJS] Learn How To Use RxJS 5.5 Beta 2

    The main changes is about how you import rxjs opreators from now on. And introduce lettable opreator ...

  9. ASP.Net MVC Filter验证用户登录

    一.Filter是什么 ASP.NetMVC模式自带的过滤器Filter,是一种声明式编程方式,支持四种过滤器类型,各自是:Authorization(授权),Action(行为),Result(结果 ...

  10. js取对象的属性值循环

    var data = {name: "liuyang", job: "web", age: "27"} Object.keys(data). ...