js，jq 两种方式派发事件，demo：上传图片

最新推荐文章于 2024-04-23 17:04:17 发布

草字

最新推荐文章于 2024-04-23 17:04:17 发布

阅读量422

点赞数

分类专栏： js (JavaScript) JQuery 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_42740797/article/details/122492872

版权

js (JavaScript) 同时被 2 个专栏收录

226 篇文章 10 订阅

订阅专栏

JQuery

44 篇文章 0 订阅

订阅专栏

原生js通过dom的dispatchEvent函数，传入事件对象并派发事件。

jquery封装好了部分逻辑，直接通过trigger方法，传入事件类型就行。

所有派发的事件支持所有类型的事件。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .addImg{
            position:relative;
            cursor: pointer;
            display: inline-flex;
            width: 80px;
            height: 80px;
            color:#ccc;
            background:#eee;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="addImg">
        <span>+</span>
    </div>
    <input type="file" accept="image" ref="uploadImg" id="fileupload1" style="display:none;" />
</body>
</html>
<script src="./jquery.3.2.1.min.js"></script>
<script>
//原生派发事件
document.querySelector('.addImg').addEventListener("click",function(){
    var evObj = document.createEvent('MouseEvents');
    evObj.initMouseEvent( 'click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null )
    document.querySelector("#fileupload1").dispatchEvent(evObj);
});
//jquery派发事件
$(".addImg").click(function(){
    $('#fileupload1').trigger('click');
});
</script>