移动端 new CustomEvent('input') 兼容问题

最近在 安卓自带浏览器 上发现  new CustomEvent('input') 不兼容

解决办法

(function () {
  if(!!window.CustomEvent) return;
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   };

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

　　

http://stackoverflow.com/questions/23920708/get-short-javascript-customevent-polyfill-to-compile-in-typescript

 

自定义事件例子1

<button id="myButton">点击我</button>
<p id="output"></p>
 
<script>
    const button = document.getElementById('myButton');
    const output = document.getElementById('output');
 
    // 监听自定义事件
    button.addEventListener('myEvent', (e) => {
        output.textContent = `收到消息: ${e.detail.message}`;
    });
 
    // 点击按钮时触发自定义事件
    button.addEventListener('click', () => {
        const event = new CustomEvent('myEvent', {
            detail: { message: '你好，世界！' }
        });
        button.dispatchEvent(event);
    });
</script>

自定义事件例子2

let form = document.getElementById('myForm');
let input = document.getElementById('myInput');

/ /表单监听验证事件
form.addEventListener('fieldValidated', function(event) {
    if (!event.detail.valid) {
        console.log('验证失败:', event.detail.message);
    } else {
        console.log('验证成功');
    }
});

// 模拟验证过程
input.addEventListener('blur', function() {
    if (input.value === '') {
// 创建自定义事件
let validationEvent = new CustomEvent('fieldValidated', {
    detail: {
        field: 'myInput',
        valid: false,
        message: '输入不合法'
    }
});
        input.dispatchEvent(validationEvent);
    }
});
                   

 

自定义事件例子3

 //自定义事件
<form id="myForm">
    <input type="text" id="username" placeholder="Username">
    <input type="password" id="password" placeholder="Password">
    <button type="button" id="submitButton">Submit</button>
</form>


// 创建自定义事件
const customFormSubmit = new Event('customFormSubmit');
 
// 监听自定义事件
document.getElementById('myForm').addEventListener('customFormSubmit', function(event) {
    console.log('Custom form submit event triggered!');
    // 在这里编写你的逻辑，比如表单验证等
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    if (username && password) {
        console.log('Form is valid!');
        // 可以继续进行提交或其他操作
    } else {
        console.log('Form is invalid!');
    }
});
 
// 触发自定义事件（在按钮点击时）
document.getElementById('submitButton').addEventListener('click', function() {
    const form = document.getElementById('myForm');
    form.dispatchEvent(customFormSubmit);
});

　　

自定义事件封装

function EventTarget(){
                this.handlers = {};
            }
            EventTarget.prototype = {
                constructor:EventTarget,
                addHandler:function(type,handler){
                    if(typeof this.handlers[type] == 'undefined'){
                        this.handlers[type] = [];
                    }
                    this.handlers[type].push(handler);
                },
                removeHandler:function(type,handler){
                    if(this.handlers[type] instanceof Array){
                        var arr = this.handlers[type];
                        for(var i = 0,len = arr.length;i < len;i++){
                            if(arr[i] == handler){
                                arr.splice(i,1);
                            }
                        }
                    }
                },
                dispatchEvent:function(event){
                    if(!event.target){
                        event.target = this;
                    }
                    if(this.handlers[event.type] instanceof Array){
                        var arr = this.handlers[event.type];
                        for(var i = 0,len = arr.length;i < len;i++){
                            arr[i](event);
                        }
                    }
                }
            }
            
            var mdiv = document.getElementById("mydiv");
            var eventName = "MY_EVENT";
            var myEvent = new EventTarget();
            myEvent.addHandler(eventName,function(evt){
                console.log(evt.message);
            });
            myEvent.dispatchEvent({type:eventName,message:"触发成功"});

 

 

 

 

其他的

function triggerEvent(element,eventType){
    var e;
    if(element.dispatchEvent){//正常情况
        e = new Event(eventType);
        element.dispatchEvent(e);
    }else if(element.fireEvent){//IE
        e = document.createEventObject();
        e.button = 1;
        element.fireEvent('on'+eventType,e);
    }else if(element['on'+eventType]){
        element['on'+eventType].call();
    }
}

 

 

 trigger: function (eventName, eventData) {
        for (var i = 0; i < this.length; i++) {
          var evt;
          try {
            evt = new window.CustomEvent(eventName, {detail: eventData, bubbles: true, cancelable: true});
          }
          catch (e) {
            evt = document.createEvent('Event');
            evt.initEvent(eventName, true, true);
            evt.detail = eventData;
          }
          this[i].dispatchEvent(evt);
        }
        return this;
      },

　　--

 

try {
        evt = new window.CustomEvent(events[i], {
          detail: eventData,
          bubbles: true,
          cancelable: true,
        });
      } catch (e) {
        evt = document.createEvent('Event');
        evt.initEvent(events[i], true, true);
        evt.detail = eventData;
      }

 //create custom event
        if (typeof document.CustomEvent === 'function') {
            this.event = new document.CustomEvent('shake', {
                bubbles: true,
                cancelable: true
            });
        } else if (typeof document.createEvent === 'function') {
            this.event = document.createEvent('Event');
            this.event.initEvent('shake', true, true);
        } else {
            return false;
        }

　

    window.dispatchEvent(this.event);

//创建事件, Event是无法传递参数的
var event = new Event('suface');
//创建事件, CustomEvent是可以传递参数的
var event = new CustomEvent('suface', { detail: elem.dataset.time });

// 监听事件Listen for the event.
elem.addEventListener('suface', function (e) { //... }, false);

// 分发/触发事件Dispatch the event.
elem.dispatchEvent(event);

 

 

　

HTMLElement.prototype.trigger = function(type, data) {
    var event = document.createEvent('HTMLEvents');
    event.initEvent(type, true, true);
    event.data = data || {};
    event.eventName = type;
    event.target = this;
    this.dispatchEvent(event);
    return this;
}