Jquery的事件绑定

最新推荐文章于 2024-07-26 11:41:15 发布

✧* ꧁柠檬ヤ汽水꧂✧*

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量81

点赞数

分类专栏： jquery jq 文章标签： jquery javascript html5

本文链接：https://blog.csdn.net/qq_44381873/article/details/104977979

版权

jquery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

一、首先来一个基础布局

<style>
        #box{width: 200px;height: 200px;background: red;}
    </style>
</head>
<body>
    <div id="box">
        <p>段落1</p>
        <p class="aa">段落2</p>
        <h3>标题3</h3>
        <h4 class="aa">标题4</h4>
    </div>
</body>

然后引入从官网下载的jquery文件：

<script src="jquery.js"></script>

1.on绑定，off删除

on绑定可以实现事件委托，及，向事件处理函数中传参
on的参数：
1.事件类型，还可以起名，为了将来删除方便；
2.事件委托的元素，可省略；
3.向事件处理函数中传递的数据，可省略；
4.事件处理函数，注意，如果向时间里出函数中传参了，那么要通过事件对象的data属性找到；
off删除，删除事件类型+名字；

 
$("#box").on("click.c1",".aa","hello",function(eve){
        console.log(1);
    });

$("#box").on("click.c2",function(){
        console.log(2);
    })

2.one方法：绑定一次性事件，触发之后，自动删除

$("#box").one("click",function(){
        console.log(1);
    })

3.基础绑定，直接使用事件名绑定

$("#box").click(function(){
        console.log("点击")
    })
    $("#box").mousemove(function(){
        console.log("移动")
    })
    $("#box").dblclick(function(){
        console.log("双击")
    })
    $("#box").mousedown(function(){
        console.log("按下")
    })

4.hover方法绑定事件

进入:mouseentwe；
离开:mouseleave；
不带事件冒泡；

$("#box").hover(function(){
        console.log("鼠标进入")
    },function(){
        console.log("鼠标离开")
    })

5.ready方法绑定事件

document.onload
    $(document).ready(function(){
        console.log("页面结构加载完成")
    })

6.模拟事件执行：triggerHandler / trigger
trigger：会触发事件冒泡
triggerHandler：不会触发事件冒泡

$("#box").click(function(){
        console.log("点击了");
    })

    setInterval(()=>{
        $("#box").triggerHandler("click");
    },1000)

二、总结：

on绑定（只能使用off删除），

one绑定，

hover绑定（进入和离开），

trigger模拟执行，

ready绑定（加载），

基础绑定（所有事件都支持）。

2.1 事件对象：
兼容不用处理了;
事件对象身上的属性原来怎么用现在还怎么用;
事件对象身上的事件冒泡，兼容解决了;
事件对象身上的阻止默认事件，兼容解决了;

2.2 事件处理函数中的：
return false;
既可以阻止冒泡，又可以阻止默认;

慎用：放在事件处理函数的最后一行;

2.3 原生阻止默认事件有兼容:
事件对象提供了阻止默认事件的内容：
e.preventDefault();
e.returnValue = false;
return false;

✧* ꧁柠檬ヤ汽水꧂✧*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery的事件绑定

一、首先来一个基础布局<style> #box{width: 200px;height: 200px;background: red;} </style></head><body> <div id="box"> <p>段落1</p> <...
复制链接

扫一扫

专栏目录