`
weina
  • 浏览: 145698 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

addEventListener and attachEvent

    博客分类:
  • js
阅读更多
 <div id="btn">btn</div>
  document.getElementById( " btn " ).onclick  =  method1;
document.getElementById(
" btn " ).onclick  =  method2;
document.getElementById(
" btn " ).onclick  =  method3;
//此时只执行method3的方法

要想三个方法都执行的话怎么办??
//为某一事件附加其它的处理事件   dom.addEventListener(type,listener,is capture)  firefox下
//分别表示事件类型,执行的方法,和是否是冒泡(捕获和冒泡,默认为冒泡)

//ie下为:dom.attachEvent(type,listener)  只有冒泡
var test = document.getElementById( " btn " );
test.addEventListener('click',method1,false);
test.addEventListener('click',method2,false);
test.addEventListener('click',method3,false);

此时就会执行method1,method2,method3,这三个方法
那么在firefox里怎么使用第三个参数呢?
<div id="div1" style="border:1px solid red;width:500px;height:500px">1111
        <div id="div2">2222
            <div id="div3">  3333
                <div id="div4" style="border:1px solid red;width:200px;height:200px">
                    Hello World444
                </div>
            </div>
        </div>
    </div>

 <script type="text/javascript">      
        var d1 = document.getElementById('div1');
        var d2 = document.getElementById('div2');
        var d3 = document.getElementById('div3');
        var d4 = document.getElementById('div4');
        d1.addEventListener("click",function(e){
            console.log("d1 clicked");
            //console.dir(e);
            //e.stopPropagation();
        },true);
        d2.addEventListener("click",function(e){
            console.log("d2 clicked");
            //e.stopPropagation();
        },false);
        d3.addEventListener("click",function(e){
            console.log("d3 clicked");
            //e.stopPropagation();
        },false);
        d4.addEventListener("click",function(e){
            console.log("d4 clicked");
        },true);

    </script>

分享到:
评论

相关推荐

    IE6用setAttribute添加事件无效

    } else if (element.attachEvent) { // IE6 and below element.attachEvent('on' + eventType, function() { handler.call(element); // 模拟事件冒泡,确保this指向元素本身 }); } else { throw new Error('...

    JS模拟MSN

    例如,使用`addEventListener`或`attachEvent`(IE浏览器)来监听用户的点击事件,并定义相应的处理函数。 3. **AJAX通信**:为了实现即时通讯,JS需要与服务器进行异步数据交换。AJAX(Asynchronous JavaScript ...

    JavaScript客户端验证和页面特效制作全部PPT

    通过addEventListener或attachEvent方法,我们可以监听用户的点击、鼠标移动、键盘输入等行为,并作出相应的响应。例如,实现点击按钮显示或隐藏某个元素,或者在页面滚动时加载更多内容。 AJAX(Asynchronous ...

    JavaScript动态网页技术详解实例源代码

    我们可以通过addEventListener或attachEvent方法绑定事件处理器,实现用户交互时的响应。 JavaScript还支持异步编程,如AJAX(Asynchronous JavaScript and XML),用于在不刷新整个页面的情况下更新部分内容。...

    北大青鸟 S2 JavaScript 上机贯穿案例

    事件处理允许我们响应用户的交互,如点击按钮、鼠标悬停等,通过addEventListener或attachEvent方法绑定事件处理函数。CSS样式控制则是通过JavaScript修改元素的样式属性,实现动画效果、过渡变换等。 此外,学习者...

    Javascript基础知识

    事件驱动编程是JavaScript的一大特点,通过addEventListener或attachEvent来监听用户或浏览器的事件,如点击、滚动、键盘输入等,从而触发相应的响应函数。AJAX(Asynchronous JavaScript and XML)技术让网页能在不...

    Fairy-and-Star

    这需要用到addEventListener或attachEvent等事件处理函数。 如果"Fairy-and-Star"项目包含了一些复杂逻辑,如游戏规则或计分系统,那么JavaScript的面向对象编程(OOP)特性就会派上用场。开发者可能会定义类...

    js 特效代码网站常用

    2. 事件监听:通过addEventListener或attachEvent等方法,可以监听用户的交互事件,如点击、鼠标移动等,触发相应的功能。 3. CSS操作:JS可以改变元素的CSS属性,实现动态样式变化,如改变颜色、大小、位置等。 4. ...

    JavaScript 动态网页开发与详解(光盘视频动画)

    例如,使用addEventListener或attachEvent方法绑定事件,以及利用事件对象来获取事件的相关信息。 JavaScript还提供了AJAX(Asynchronous JavaScript and XML)技术,用于在不刷新整个页面的情况下与服务器交换数据...

    JS学习,教程

    JS通过addEventListener或attachEvent来监听事件,并定义相应的处理函数。事件冒泡和事件捕获是理解事件处理的关键概念。 五、AJAX异步通信 AJAX(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下...

    JavaScript教程

    事件处理器可以是内联的,也可以是通过addEventListener或attachEvent方法添加的。 AJAX(Asynchronous JavaScript and XML)是JavaScript用于创建异步通信的技术,使得网页可以在不刷新整个页面的情况下与服务器...

    PPK谈scriptsexamplescripts

    在JavaScript事件处理方面,PPK可能会强调避免使用内联事件处理程序,而是推荐使用addEventListener或attachEvent(针对旧版IE)来分离业务逻辑和视图。他可能还会讨论事件冒泡和事件捕获的概念,以及它们在实际应用...

    javascript语言

    事件处理是JavaScript与用户交互的关键,通过addEventListener或attachEvent方法绑定事件监听器,响应用户的操作。DOM(Document Object Model)是JavaScript操作网页元素的主要接口,通过DOM API可以创建、修改和...

    人工智能-项目实践-搜索引擎-集合主流搜索引擎的导航页面

    3. 事件监听与处理:利用addEventListener或attachEvent方法响应用户的点击、鼠标悬停等事件,实现动态交互。 4. CSS(Cascading Style Sheets):配合JavaScript进行页面样式控制,保证导航页面的美观和一致性。 5....

    仿百度登陆框(无刷新登录)

    这可以通过addEventListener或attachEvent(对于旧版IE)等方法实现。事件处理函数中,我们使用XMLHttpRequest对象或现代浏览器的fetch API发送异步请求。 **JSON**(JavaScript Object Notation)通常是Ajax通信中...

    js超酷翻页脚本大汇集

    1. 事件监听:JavaScript通过addEventListener或attachEvent方法监听用户的翻页行为,如点击按钮或滚动条。 2. 数据获取:通常,翻页数据来源于服务器,使用Ajax(Asynchronous JavaScript and XML)异步请求获取新...

    javaScript示例学习资料

    点击、鼠标移动、键盘输入等行为都可以触发事件,我们通过addEventListener或attachEvent来添加事件监听器,然后定义相应的处理函数。 JavaScript还有异步编程的概念,比如回调函数、Promise和async/await。这些...

    使用JavaScript增强交互效果.rar

    通过addEventListener或attachEvent来绑定事件处理函数,可以对这些交互做出响应,比如弹出提示框、提交表单数据或执行动画效果。 AJAX(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与...

    JavaScript 网页开发实例教程(PDG)

    JavaScript中的事件处理通常通过addEventListener或attachEvent方法实现,你可以为一个元素绑定多个事件处理器,使得代码更加灵活。 在特效方面,JavaScript能够改变网页的视觉表现,提供各种吸引人的效果。例如: ...

    网页游戏开发入门教程III(简单程序应用)

    可以使用JavaScript的addEventListener或attachEvent方法监听并处理这些事件。在教程中提到了部分伪代码,实际开发时需要根据具体需求编写完整的事件处理函数。 7. **战斗系统**:战斗系统的实现思路可能包括攻击...

Global site tag (gtag.js) - Google Analytics