手写一个trigger插件

javascript
  目录
  1. 1. 手写一个trigger插件

自己写一个简单的trigger来触发事件

手写一个trigger插件

各位小伙伴们，jquery大家超级熟悉吧，jquery的trigger函数一定知道吧，反正我是非常喜欢用它，有时候比如要把一个弹出层隐藏掉，大家可能会去改这个弹出层的css，但是我可能会直接trigger一下这个弹出层取消按钮，因为我懒嘛，哈哈。
但是，有时候可能想用trigger的时候，发现并没有使用jquery，额，自己写一个吧，其实，这段代码的核心部分我是参考了百度的一个手势库，好像叫touch.js,当时看的时候貌似这个库已经5年没人维护了，不过，模拟触发事件的代码被我留下了。见下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
;(function(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory;
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["jinuxTrigger"] = factory;
	else
		root["jinuxTrigger"] = factory;
})(this, function(el, evt, detail) {
	detail = detail || {};
    var e, opt = {
            bubbles: true,
            cancelable: true,
            detail: detail
        };

    try {
        if (typeof CustomEvent !== 'undefined') {
            e = new CustomEvent(evt, opt);
            if (el) {
                el.dispatchEvent(e);
            }
        } else {
            e = document.createEvent("CustomEvent");
            e.initCustomEvent(evt, true, true, detail);
            if (el) {
                el.dispatchEvent(e);
            }
        }
    } catch (ex) {
        console.warn("jinux-trigger is not supported by environment.");
    }
});

再附上一个小demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jinux-trigger</title>
    <script src="./trigger.js"></script>
</head>
<body>
    <h1>页面加载进来之后，等待3秒后代码触发按钮的点击事件</h1>
    <button>点击...</button>
</body>
<script>
    const btn = document.querySelector('button');
    btn.addEventListener('click',()=>{
        alert('点击按钮被点击了！！！');
    },false);
    //页面加载进来之后，等待3秒后代码触发按钮的点击
    setTimeout(()=>{
        jinuxTrigger(btn,'click');
    },3000);
</script>
</html>

  工具库   手写