pokutuna/index.html

## index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="outer">
      <div id="inner"></div>
    </div>

    <script>
     document.querySelector('#outer').addEventListener('customevent:test', function(event) {
         console.log('outer!', event.detail, event.defaultPrevented);
     });
     document.querySelector('#inner').addEventListener('customevent:test', function(event) {
         console.log('inner!', event.detail, event.defaultPrevented);
         event.preventDefault();
     });
    </script>
  </body>
</html>

## index.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/// <reference path="./libs.d.ts" />
var CustomEvent = require("custom-event");
document.addEventListener('DOMContentLoaded', function () {
    var event = new CustomEvent('customevent:test', {
        detail: {
            key: 'value',
        },
        bubbles: true,
        cancelable: true,
    });
    document.querySelector('#inner').dispatchEvent(event);
});
console.log(CustomEvent);
console.log('index.ts loaded!');

},{"custom-event":2}],2:[function(require,module,exports){
(function (global){

var NativeCustomEvent = global.CustomEvent;

function useNative () {
  try {
    var p = new NativeCustomEvent('cat', { detail: { foo: 'bar' } });
    return  'cat' === p.type && 'bar' === p.detail.foo;
  } catch (e) {
  }
  return false;
}

/**
 * Cross-browser `CustomEvent` constructor.
 *
 * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent
 *
 * @public
 */

module.exports = useNative() ? NativeCustomEvent :

// IE >= 9
'undefined' !== typeof document && 'function' === typeof document.createEvent ? function CustomEvent (type, params) {
  var e = document.createEvent('CustomEvent');
  if (params) {
    e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
  } else {
    e.initCustomEvent(type, false, false, void 0);
  }
  return e;
} :

// IE <= 8
function CustomEvent (type, params) {
  var e = document.createEventObject();
  e.type = type;
  if (params) {
    e.bubbles = Boolean(params.bubbles);
    e.cancelable = Boolean(params.cancelable);
    e.detail = params.detail;
  } else {
    e.bubbles = false;
    e.cancelable = false;
    e.detail = void 0;
  }
  return e;
}

}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1]);

## index.ts
/// <reference path="./libs.d.ts" />
import * as CustomEvent from 'custom-event';

document.addEventListener('DOMContentLoaded', () => {
    let event = new CustomEvent('customevent:test', {
        detail: {
            key: 'value',
        },
        bubbles: true,
        cancelable: true,
    });
    document.querySelector('#inner').dispatchEvent(event);
});
console.log(CustomEvent);
console.log('index.ts loaded!');

## libs.d.ts
declare module 'custom-event' {
    export = CustomEvent;
}

## package.json
{
  "name": "customevent",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "tsc; browserify index.js -o index.js"
  },
  "devDependencies": {
    "browserify": "^14.1.0",
    "custom-event": "^1.0.1",
    "typescript": "^2.2.1"
  }
}

## tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "outDir": ".",
        "rootDir": ".",
        "sourceMap": false
    },
    "exclude": [
        "node_modules"
    ],
    "files": [
        "index.ts"
    ]
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<script src="./index.js"></script>
	</head>
	<body>
	<div id="outer">
	<div id="inner"></div>
	</div>

	<script>
	document.querySelector('#outer').addEventListener('customevent:test', function(event) {
	console.log('outer!', event.detail, event.defaultPrevented);
	});
	document.querySelector('#inner').addEventListener('customevent:test', function(event) {
	console.log('inner!', event.detail, event.defaultPrevented);
	event.preventDefault();
	});
	</script>
	</body>
	</html>
	(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
	"use strict";
	Object.defineProperty(exports, "__esModule", { value: true });
	/// <reference path="./libs.d.ts" />
	var CustomEvent = require("custom-event");
	document.addEventListener('DOMContentLoaded', function () {
	var event = new CustomEvent('customevent:test', {
	detail: {
	key: 'value',
	},
	bubbles: true,
	cancelable: true,
	});
	document.querySelector('#inner').dispatchEvent(event);
	});
	console.log(CustomEvent);
	console.log('index.ts loaded!');

	},{"custom-event":2}],2:[function(require,module,exports){
	(function (global){

	var NativeCustomEvent = global.CustomEvent;

	function useNative () {
	try {
	var p = new NativeCustomEvent('cat', { detail: { foo: 'bar' } });
	return 'cat' === p.type && 'bar' === p.detail.foo;
	} catch (e) {
	}
	return false;
	}

	/**
	* Cross-browser `CustomEvent` constructor.
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent.CustomEvent
	*
	* @public
	*/

	module.exports = useNative() ? NativeCustomEvent :

	// IE >= 9
	'undefined' !== typeof document && 'function' === typeof document.createEvent ? function CustomEvent (type, params) {
	var e = document.createEvent('CustomEvent');
	if (params) {
	e.initCustomEvent(type, params.bubbles, params.cancelable, params.detail);
	} else {
	e.initCustomEvent(type, false, false, void 0);
	}
	return e;
	} :

	// IE <= 8
	function CustomEvent (type, params) {
	var e = document.createEventObject();
	e.type = type;
	if (params) {
	e.bubbles = Boolean(params.bubbles);
	e.cancelable = Boolean(params.cancelable);
	e.detail = params.detail;
	} else {
	e.bubbles = false;
	e.cancelable = false;
	e.detail = void 0;
	}
	return e;
	}

	}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
	},{}]},{},[1]);
	/// <reference path="./libs.d.ts" />
	import * as CustomEvent from 'custom-event';

	document.addEventListener('DOMContentLoaded', () => {
	let event = new CustomEvent('customevent:test', {
	detail: {
	key: 'value',
	},
	bubbles: true,
	cancelable: true,
	});
	document.querySelector('#inner').dispatchEvent(event);
	});
	console.log(CustomEvent);
	console.log('index.ts loaded!');
	{
	"name": "customevent",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"scripts": {
	"build": "tsc; browserify index.js -o index.js"
	},
	"devDependencies": {
	"browserify": "^14.1.0",
	"custom-event": "^1.0.1",
	"typescript": "^2.2.1"
	}
	}
	{
	"compilerOptions": {
	"module": "commonjs",
	"target": "es5",
	"noImplicitAny": true,
	"outDir": ".",
	"rootDir": ".",
	"sourceMap": false
	},
	"exclude": [
	"node_modules"
	],
	"files": [
	"index.ts"
	]
	}