jQuery 事件

1.事件监听

  • 事件名(cb)：只用于原生事件
$('#box').click(function(){
      console.log('click - 1')
})
  • on(eventName,cb)：除了给当前元素做监听，还能做事件委托
$('#box').on('click',function(){
     console.log('click - 2')
})

//事件委托
$('#box').on('click','li',function(){
     console.log('li - 事件委托')
})
  • one(eventName,cb)方法监听：只执行一次
$('#box').one('click',function(){
     console.log('click - 3')
})
  • 自定义事件：on()/one()都可以定义自定义事件（事件回调中的第一个参数永远是event）
$('ul').on('removeChild',function(event,index){
    //根据下标获取选中的元素并删除
    $(this).children().eq(index).remove()
})
  • 为事件回调绑定数据：将数据绑定到event中供回调读取
<script>
    $(function(){
        var obj = {a:1,b:2}
        $('div').click(obj,function(event){
            console.log(event.data)
        })

        $('div').click() //{a: 1, b: 2}
    })
</script>
  • 注意：回调函数中的this为对应的原生dom元素

2.触发事件

  • 事件名称()：适用于原生事件，支持冒泡，不支持默认事件
<script>
   $(function(){
        $('li').on('click',function(){
            console.log('li')
        })
        $('ul').on('click',function(){
            console.log('ul')
        })
        $('#box').on('click',function(){
            console.log('box')
        })

        $('a').on('click',function(){
            console.log('a')
        })

        //模拟(支持冒泡)
        $('li').click() //li -> ul _> box

        //模拟a连接点击（不支持默认事件）
        $('a').eq(0).click() //a 不进行跳转
   })
</script>
  • trigger()：与事件名称()效果一致，支持批量操作，另外还支持自定义事件
//触发原生事件
$('#box').trigger('click')
//触发自定义事件
$('ul').trigger('removeChild'，2)
//不执行默认事件
$('a').eq(0).trigger('click')
  • triggerHandler()：顾名思义，直接执行回调，不会产生事件冒泡，不执行默认事件，只影响第一个匹配元素
//触发原生事件
$('#box').triggerHandler('click')
//触发自定义事件
$('ul').triggerHandler('removeChild',2)
//不执行默认事件 只影响第一个匹配元素
$('a').triggerHandler('click')

3.解绑事件

  • off(eventName)：解除当前元素绑定的事件监听,包括自定义事件,如果不传参数，则解绑所有的事件
  • 注意：只能移除由query添加的事件，原生dom通过addEventListenner添加的事件off()方法无法移除
// 解绑所有事件监听
$("#ul").off()
//解除click事件监听
$("#ul").off("click")
// 解除自定义事件
$("#ul").off("removeFirstChild")

4.jQuery事件和原生事件的关系

  • jQuery添加事件监听的方式是通过dom元素调用addEventListenner()来完成的，这也是他可以重复绑定事件的原因所在
  • 原生dom元素能触发jquery绑定的事件
<script>
    // 常规注册
    $("#ul").click(function(){
        console.log("click - juery")
    })
    $("#ul").on("click",function(){
        console.log("click - juery on")
    })

    //触发jquery监听的事件
    document.getElementById("ul").click()
    //click - juery
    //click - juery on
</script>
  • jquery对象能触发原生dom监听的事件
<script>
    var ul = document.getElementById("ul")
    ul.onclick= function(){
        console.log("onclick")
    }
    ul.addEventListener("click",function(){
        console.log("click - addEventListener")
    })
    // jquery对象也能直接调用 原生dom添加的事件监听回调
    $("#ul").click()
    //onclick
    //addEventListener
</script>

5.阻止默认事件和冒泡

  • 阻止默认事件：preventDefault()
  • 阻止冒泡：stopPropagation()
  • 同时阻止默认事件和冒泡 return false（在原生js中，这个语句只能阻止默认行为，不能阻止冒泡）
<body>
    <div id="box">
        <a href="http://www.baidu.com">百度一下</a>
    </div>
</body>
<script>
    $("#box").click(function(e){
        console.log("box")
    })
    $("#box>a").click(function(e){
        console.log("点击了a链接")
        //阻止默认事件(兼容IE8)
        e.preventDefault()
        //阻止冒泡(兼容IE8)
        e.stopPropagation()

        // 同时阻止默认事件和冒泡
        return false
    })
</script>

6.jQuery事件对象

  • 回调函数的第一个参数永远是event,后面的参数才是用户传递的数据
  • 常用的坐标信息与原生事件对象是一致的

7.总结

  • Jquery更方便自定义事件和事件委托
  • 对于事件触发，Jquery的方法都屏蔽了元素默认的事件
  • 自定义事件也只能由trigger/triggerHandler来触发
posted @   ---空白---  阅读(442)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示