addEventListener 事件监听器 冒泡事件)

addEventListener 事件监听器 (冒泡事件)

1、后面绑定的事件照样会执行

2、不会被覆盖

3、调用者是事件源but.addEventListener

4、参数1,事件名(不带on 点击,移开)("click",fn1)

5、参数2执行函数("click",fn1)

6、参数3事件名(捕获或者冒泡)

7、火狐谷歌IE9+ 支持addEventListener

 var but=document.getElementsByTagName("button")[0];
    //addEventListener 事件监听器
    //原事件被执行的时候,后面的事件也照样被执行
    // 第一次执行的事件不会被第二次执行事件沉淀掉
    but.addEventListener("click",fn1);
    but.addEventListener("click",fn2);
    function fn1(){
        console.log("鹅鹅鹅,曲项向天歌")
    }
    function fn2(){
        console.log("白毛浮绿水,红掌拨清波")
    }

8、IE678支持attachevent

but.attachEvent("onclick",fn2)

事件监听器兼容性写法

 var but=document.getElementsByTagName("button")[0];
    function fn1(){
        console.log("鹅鹅鹅,曲项向天歌")
    }
    function fn2(){
        console.log("白毛浮绿水,红掌拨清波")
    }
    //没有赋值返回空,也就是false 有值返回true
    //console.log(but.addEventListener);
    //兼容写法
    EventListen={
        EventListener:function (stl,fn,ele) {
            if(stl.addEventListener){
                stl.addEventListener(ele,fn)
            }else if(stl.attachEvent){
                stl.attachEvent("on"+ele,fn)
            }else{
                stl["on"+ele]=fn
            }
        }
    }
    //调用
    EventListen.EventListener(but,fn1,"click");
    EventListen.EventListener(but,fn2,"click")
时间: 2024-08-04 01:57:15

addEventListener 事件监听器 冒泡事件)的相关文章

dom捕捉事件和冒泡事件-原理与demo测试

先插入一条广告,博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: http://shop117066935.taobao.com/ 马上开始正题... 先参考一下百度百科对冒泡事件流的解释: ----------不喜欢读文字的同学,可以直接看下面demo,传递顺序简单明了! http://baike.baidu.com/link?url=kaeJHTii_1uVgxD

js的捕捉事件,冒泡事件

冒泡事件可以查询上个随笔, 捕捉事件正好和冒泡时间正反着 所以这代码我把冒泡事件注释, html和css的内容 <style type="text/css"> #box1{width:500px;height:500px;background:#900;} #box2{width:400px;height:400px;background:#090;} #box3{width:300px;height:300px;background:#009;} #box4{width:

WPF快速指导10:WPF中的事件及冒泡事件和隧道事件(预览事件)的区别

本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所谓路由事件,MSDN定义如下: 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 CLR 事件,可以由 RoutedEvent 类的实例提供支持并由 Windows Presentation Foundation (W

WPF的路由事件、冒泡事件、隧道事件(预览事件)

原文:WPF的路由事件.冒泡事件.隧道事件(预览事件) 本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所谓路由事件,MSDN定义如下: 功能定义:路由事件是一种可以针对元素树中的多个侦听器(而不是仅针对引发该事件的对象)调用处理程序的事件. 实现定义:路由事件是一个 CLR 事件,可以由 RoutedEvent 类的实例提供支持并由 Window

冒泡事件 阻止冒泡事件

什么是冒泡事件? 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层. 举个栗子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>阻止冒泡</title> 4 <script src="script/jquery-1

事件监听器原理——事件对象、事件监听器、事件源

package cn.my.demo; //设计一个监听器 public class Demo2 { public static void main(String[] args) { Person p=new Person(1001,"张三"); p.refisterListener(new PersonListener() { public void dorun(Event e) { Person p=e.getSource(); System.out.println("W

javascript, jQuery阻止默认事件和冒泡事件

事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点. 例如: <!DOCTYPE html> <html> <head> <title>Event Bubbling Example</title> </head> <body> <div id="myDiv">Click Me</div>

事件监听器与事件发射器之间的关系——node环境下

在node中,充满了异步.如果使用回调的话会陷入回调陷阱.在密密麻麻的"});"中挣扎. 所以使用事件发射\监听的方式去构造我们的代码能带我们走去回调地狱,走向愉快.具体有多好谁用谁知道啊,不过今晚遇到了个坑,官网和众多的博客都没有提到.,可能是太基础了吧,但为了像我这样野生的工程狮能不要像我这样爬地那么费劲还是分享下. var events = require("events") var emitter = new events.EventEmitter() em

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->  事件冒泡 ● 事件捕获:事件发生时(onclick,onmouseover--)首先发生在document上,然后依次传递给body.……最后到达目的节点(即事件目标). ● 事件冒泡:事件到达事件目标之后不会结束,会逐层向上冒泡,直至document对象,跟事件捕获相反 1.onlick -->事件冒泡,