jQuery的event事件

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")
//            })


        })