一、谷歌、火狐自定义JavaScript事件

　　1、创建事件；

document.createEvent('HTMLEvents');

　　参数是字符串类型，表示要创建的事件类型。

uievents；
mutationevents；
htmlevents；

　　2、初始化事件；

ev.initEvent('listen', false, false);

　　参数说明：

eventType：事件名称；
canBubble：事件是否冒泡；
cancelable：是否可以用 preventDefault() 方法取消事件；

　　3、监听事件；

document.addEventListener(dataavailable, handler, param3);

　　参数说明：

dataavailable：监听的事件名称；
handler：处理函数；
param3：是否是扑获事件模型；

　　4、触发事件；

document.dispatchEvent(ev);

　　参数说明：
　　ev:第一步所创建的事件对象；

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>javascript自定义事件</title>
<script type="text/javascript">
　　//创建事件
　　var ev = document.createEvent('HTMLEvents');
　　window.onload = function () {
　　　　//初始化事件
　　　　ev.initEvent('listen', false, false);
　　　　//监听事件与绑定处理函数
　　　　document.addEventListener("listen", function (e) {
　　　　　　alert("事件被触发!");
　　　　}, false);
　　}
</script>
</head>
<body>
　　<div>
　　　　<input type="button" value="触发" onclick="document.dispatchEvent(ev);" />
　　</div>
</body>
</html>

2016-05-25补充：移除监听removeEventListener及ev.stopPropagation()

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>javascript自定义事件</title>
<script type="text/javascript">
　　//创建事件
　　var ev = document.createEvent('HTMLEvents');

    function myFun1(e) {
　　　　alert("事件被触发11!");
　　}

    function myFun2(e) {
　　　　alert("事件被触发22!");
　　}

　　window.onload = function () {
　　　　//初始化事件
　　　　ev.initEvent('listen', false, false);
　　　　//监听事件与绑定处理函数
　　　　document.addEventListener("listen", myFun1, false);
        document.addEventListener("listen", myFun2, false);
　　}

</script>
</head>
<body>
　　<div>
　　　　<input type="button" value="触发" onclick="document.dispatchEvent(ev);" />
       <input type="button" value="移除" onclick='document.removeEventListener("listen", myFun1, false);' />
　　</div>
</body>
</html>

　　上面是移除myFun1的监听，事件依然触发，myFun2的监听依然可以监听到。而且，如果是用匿名函数添加的监听，怎么移除呢？这是个问题。知道的请告诉我。

　　如果要移除全部的监听，逐一移除监听是可行方法之一。还有就是，让事件不再派发，如上面的

<input type="button" value="停止派发" onclick='ev.stopPropagation()' />

　　这样写，单击了停止派发按钮后，事件就不再派发，全部监听都不会再接收到此事件对象的派发。

　　Event的属性非常多，比如时间戳，是否冒泡等，不同的属性又可以实现不同的功能，有兴趣的可以了解下Event对象的更多属性。

二、IE自定义JavaScript事件

　　注意，以上方式只适用于谷歌，如果希望IE也能够兼容，要并上兼容IE的方式。
　　其中谷歌与IE的对应关系为：
　　谷歌、火狐 IE

createEvent、initEvent    createEventObject
addEventListener    attachEvent
dispatchEvent    fireEvent

　　IE自定义事件示例：

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>javascript自定义事件</title>
<script type="text/javascript">
　　//创建事件
　　var ev = document.createEventObject();

　　window.onload = function () {
　　　　document.attachEvent('ondataavailable',function () { 
　　　　　　alert("IE事件触发!"); //IE
　　　　}
　　　　); 
　　}
</script>
</head>
<body>
　　<div>
　　　　<input type="button" value="触发" onclick="document.fireEvent('ondataavailable', ev);" />
　　</div>
</body>
</html>

三、兼容谷歌火狐IE的自定义事件

　　要兼容谷歌火狐IE，那么按照上面的逻辑，那就是先判断一下，如果是低版本IE，那么就使用低版本IE的函数或对象，否则就使用谷歌的事件对象。

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>javascript自定义事件</title>
<script type="text/javascript">
　　//创建事件
　　var HtmlEvent;
　　if (document.createEvent) {
　　　　HtmlEvent = document.createEvent('HTMLEvents'); //谷歌、火狐创建新事件的写法
　　　　HtmlEvent.initEvent("Click", false, false);
　　}
　　else if (document.createEventObject) {
　　　　HtmlEvent = document.createEventObject(); //旧版本IE的创建新事件的写法
　　}
　　window.onload = function () {
　　　　//监听事件与绑定处理函数
　　　　if (document.addEventListener) {
　　　　　　document.addEventListener('Click', function (e) {
　　　　　　　　alert("谷歌火狐、事件被触发!"); //谷歌火狐的触发事件
　　　　　　}, false);
　　　　} 
　　　　else if(document.attachEvent) {
　　　　　　document.attachEvent('ondataavailable', function () { 
　　　　　　　　alert("IE事件触发!"); }); //IE
　　　　　　}
　　　　}
　　}

　　function fire()
　　{
　　　　if (document.dispatchEvent) {
　　　　　　document.dispatchEvent(HtmlEvent);
　　　　}
　　　　else if (document.fireEvent) {
　　　　　　document.fireEvent('ondataavailable', HtmlEvent);
　　　　}
　　}
</script>
</head>
<body>
　　<div>
　　　　<input type="button" value="触发" onclick="fire()" />
　　</div>
</body>
</html>

四、触发事件时向Listen传参

　　传参的方式很简单，直接在参数赋值在事件Event对象上就OK了，什么格式的都可以。

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>javascript自定义事件</title>
<script type="text/javascript">
　　//定义一个事件
　　var ev = document.createEvent('HTMLEvents');
　　window.onload = function () {
　　　　//初始化事件
　　　　ev.initEvent('listen', false, false);

　　　　//监听事件与绑定处理函数
　　　　document.addEventListener("listen", function (e) {
　　　　　　alert("传过来的参数：" + e.name);
　　　　　　}, false);
　　　　}

　　　　function fire()
　　　　{
　　　　　　ev.name = "刘备";
　　　　　　document.dispatchEvent(ev);
　　　　}
　　　　</script>
　　</head>
　　<body>
　　　　<div>
　　　　　　<input type="button" value="触发" id="btn1" onclick="fire()" />
　　　　</div>
　　</body>
</html>

五、jQuery的自定义事件的绑定与触发

jQuery绑定与触发自定义事件更加方便，而且兼容性更好。

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).on("listen",function(event,a,b){
        alert(a + " " + b);
    });

    //第一个是自定义的事件名
    //第二个参数是一个数组
    //数组中的项会和自定义事件中回调的参数项对应
      $(function(){
      $('#btn1').click(function(){
          $(document).trigger("listen",["aa","bb"])
      });
    })
</script>
</head>
<body>
    <input type="button" id="btn1"  value="触发"  />
</body>
</html>

posted on 2015-10-19 16:25 逆心阅读(5097) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

C军

公告

一、谷歌、火狐自定义JavaScript事件

二、IE自定义JavaScript事件

三、兼容谷歌火狐IE的自定义事件

四、触发事件时向Listen传参

五、jQuery的自定义事件的绑定与触发