1、冒泡和默认行为

 <div class="aa">
<div class="bb">
<div class="cc">
<em>
<strong>
冒泡测试3
</strong>
</em>
</div>
</div>
</div>
<div>
<form action="http://www.baidu.com" method="post">
<input type="submit" value="提交">
</form> <a href="http://www.baidu.com">百度一下</a> </div> <script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(document).bind("click",function () {
//
// alert("第一层冒泡")
// })
// $("div .bb").bind("click",function () {
// alert("第二层冒泡测试")
// })
// $("div .cc").bind("click",function (e) {
// e.stopPropagation()
// alert("第三层冒泡测试")
// }) // 第一层里是document,第二层是div,第三层还是div,都绑定了click事件,如果直接点第三层的事件,则首先会执行第三层绑定的函数,然后会执行第二层的函数,最后
// 在实行最后一层的函数,如果我们想阻止这样的行为该怎么处理e.stopPropagation(),这样,这一层就不会出现冒泡行为了 // 阻止默认行为是上面意思呢?比如我们的按钮,和超链接,如果我们点击了就会提交数据或者跳转到超链接,我们就可以使用代码实现阻止这样的默认行为
// 看到下面的例子,就阻止了a标签和input标签的默认行为,preventDefault // $("a").bind("click",function (event) {
// event.preventDefault()
// })
// $(":input[type='submit']").bind("click",function (event) {
// event.preventDefault()
// )} // 如果在函数中直接返回false,就可以实现取消默认行为+阻止冒泡行为

  

2、模拟用户操作

    <input type="button" value="提交">
<script src="jquery-3.2.1.js"></script>
<script>
$(function () { // 这个是用户的真实操作,而不是浏览器模拟用户操作,如果在加上下面的代码,就实现了浏览器模拟用户的click事件
// $(this).bind('click',function () {
// alert("模拟用户点击页面")
//
// $(this).trigger('click')
//
// }) // 用下面这种写法也可以实现模拟用户行为
// $('input').bind('click',function () {
// alert("第二种模拟用户点击页面的方法")
// }).trigger('click') // 自定义事件,主要是用在只要浏览器刷新就会自动执行的事件,相当于刷新页面触发一个函数一样的效果
// $(':input').bind('myevent',function () {
// alert("自定义事件")
// }).trigger('myevent') //trigger和triggerHandler的区别
// 1、如果标签有默认行为,则riggerHandler不会执行默认行为,trigger则会执行默认行为,比如点击按钮提交数据,这里就会有一个默认的行为
// 2、如果匹配到多个标签,则trigger会每个标签执行一次,而triggerHandler只第一个标签会执行默认行为,后面的标签不会执行默认行为
// 3、返回值不一样 //命令空间,比如下面的例子,一个input上绑定了2个click事件,但是我们只想把abc这个事件去掉该怎么办呢,我们可以在click后加一个点,在一些随机数就可以了 // $("input").bind('click',function () {
// alert('abc')
// })
// $("input").bind('click',function () {
// alert('123')
// })
//
// $("input").bind('click.abc',function () {
// alert('abc')
// })
// $("input").bind('click.123',function () {
// alert('123')
// })
//
// $("input").unbind('click.123') })

  

3、事件委托

  <div class="aa" id="box">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(function () {
// $(':button').bind('click',function () {
// alert("事件不委托")
// }) // 使用live绑定的是document,而非button,所有永远只会绑定一次事件
// $(":button").live('click',function () {
// alert('事件委托绑定')
// // })
// bind不能动态绑定,比如下面的例子,我开始有4个button按钮,我点击这4个中的任何一个
// 都会触发下面的click事件,然后复制出来一个按钮,但是如果我点击复制出来的按钮,则不会
// 在复制出来新的按钮,这就是bind不能动态绑定的意思;同样live可以实现动态绑定,因为事件是
// 绑定在document上,而点击button是冒泡到document,如果要触发这个冒泡,还会校验event type
// 和event target
// $(':button').bind('click',function () {
// $(this).clone().appendTo(".aa")
//
// })
// live已经被废弃了,live的替代方法是delegate<,他只绑定父元素
// $("#box").delegate('input','click',function () {
// $(this).clone().appendTo('#box')
// })
//
// $("#box").undelegate("input",'click') //on off one 这个才是重点 //普通的绑定:bind
//普通的解绑:unbind
//普通的事件委托:delegate
//普通的事件委托解绑:undelegate
//方法太多,导致换乱,所有这里提供了新的方法 on和off
//新方法绑定:on
//新方法解绑:off
// 普通使用
// $(":input").on('click',function () {
// alert('替代bind')
//
// }) // 额外数据也是可以的
// $(":input").on('click',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// }) // 执行多个事件也是可以的
// $(":input").on('click dblclick',{user:'cui'},function (e) {
// alert('替代bind' + e.data.user)
//
// })
// $(":input").on({
// click:function () {
// alert('鼠标单击')
// },
// dblclick:function () {
// alert('鼠标双击')
// }
// }) //同样阻止默认行为和冒泡也是可以的,方法和bind是一样的 //通过off来移除事件,也支持移除多个,也支持明明空间 //on如何替换delegate呢?也是通过父元素绑定和删除
// $("#box").on('click',':input',function () {
// $(this).clone().appendTo('#box')
// })
//移除事件委托
// $("#box").off('click',':input') //one的意思,仅仅触发一次,然后就会移除事件 // $(":input").one('click',function () {
// alert("one来触发事件")
// }) // 同样one的委托效果也是一样的 ,只有第一次生效
// $("#box").one('click',':input',function () {
// $(this).clone().appendTo("#box")
// }) })

  

jQuery的event事件的更多相关文章

  1. JQuery常用API 核心 效果 JQueryHTML 遍历 Event事件

    JQuery 常用API 参考资料:JQuery 官网   jQuery API 中文文档 核心 jQuery 对象 jQuery() 返回匹配的元素集合,无论是通过在DOM的基础上传递的参数还是创建 ...

  2. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  3. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  4. jQuery:详解jQuery中的事件(一)

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  5. jQuery原生框架-----------------事件

    jQuery.extend({ // 绑定事件 addEvent: function( ele, type, fn ) { // ele不是DOM,type不是字符串,fn不是函数,打包打走 if( ...

  6. Javascript事件模型系列(三)jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  7. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  8. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  9. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

随机推荐

  1. 使用file_get_contents提交http post

    以前使用curl获取需要登陆内容的文章,但其实,自5.0开始,使用file_get_contents就可以完成.(前提是开启了allow_url_fopen),下面以一个简单的例子说明一下:1.先看一 ...

  2. 严重: Dispatcher initialization failed java.lang.RuntimeException: java.lang.reflect.InvocationT

    严重: Dispatcher initialization failed java.lang.RuntimeException: java.lang.reflect.InvocationT (2012 ...

  3. Oracle(一)安装

    一.到官网或者哪里去下载Oracle,我下的是winX64的11g版本 官网:https://www.oracle.com/technetwork/database/enterprise-editio ...

  4. 使用jquery获取url以及jquery获取url参数的方法(转)

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...

  5. ubuntu16.04x64环境下 tar方式 安装mysql-5.7.21 试水过程记录

    前几天读研时候上铺的同学和我说到了一个问题,就是他们单位的redhat服务器给MySQL服务的数据库文件所在的磁盘空间不够了,对于这个问题我也是没有想过的,在受朋友之托下考虑自己做下复现,由于同学所在 ...

  6. InputStream,InputStreamReader和Reader的关系

    InputStream:得到的是字节输入流,InputStream.read("filename")之后,得到字节流 Reader:读取的是字符流 InputStreamReade ...

  7. [BZOJ5330][SDOI2018]反回文串

    luogu bzoj sol 枚举一个长度为\(n\)为回文串,它的所有循环位移都可以产生贡献. 但是这样算重了.重复的地方在于可能多个回文串循环同构,或者可能有的回文串经过小于\(n\)次循环位移后 ...

  8. [BZOJ5252][八省联考2018]林克卡特树lct

    bzoj(上面可以下数据) luogu description 在树上选出\(k\)条点不相交的链,求最大权值. 一个点也算是一条退化的链,其权值为\(0\). sol 别问我为什么现在才写这题 首先 ...

  9. Leetcode Excel Sheet Column Number (C++) && Excel Sheet Column Title ( Python)

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  10. kafka搭建

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...