zoukankan      html  css  js  c++  java
  • DOM事件探秘 殷的博客

    #事件流

    事件捕获:由document向事件触发的元素捕获

    事件冒泡:由触发事件的元素向上级触发

     

    #事件处理程序

    HTML事件处理程序

    <input type="button" value="按钮" onclick="alert('hello world')"></input>

    或者

    <script type="text/javascript">
        function showMes(){
            alert('hello world');
        }
    </script>
    <body>
        <input type="button" value="按钮" onclick="showMes()"></input>    
    </body>

     

     

    DOM0级事件处理程序

    <script type="text/javascript">
        document.getElementById('btn').onclick=function(){
            alert('hello world');
        }
        
    </script>
    <body>
        <input type="button" value="按钮" id="btn"></input>    
    </body>

     

     

     

    #DOM2级事件处理程序

    定义了两个方法:

    addEventListener()添加事件

    removeEventListener()移除事件

    三个参数设置;事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true)

    btn3.addEventListener('click',showMes,false);

    注意:

    1、若事件名称有on,则需去掉on。onclick -----> click,onmouseover -----> mouseover等等;

    2、false 兼容所有浏览器-----事件冒泡流

    3.通过addEventListener添加的事件只能通过removeEventListener来删除。---参数要一样

       btn.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致,删除事件

    4:dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。

    btn3.addEventListener('click',showMes,false);

    btn3.addEventListener('click',showMes,function(){alert(this.value);},false);

    特别的:
    1.DOM 2级事件处理程序无法删除匿名函数,只有将匿名函数命名化或赋值化才可以删除
    2.IE不支持该事件
    <input type="button" value="按钮" id="btn"></input>
        <script type="text/javascript">
        function Mes() {
            alert('hello world');
        }
        var btn = document.getElementById('btn');
        btn.addEventListener('click', Mes, false);
        btn.addEventListener('mouseover',function(){
            alert(this.type);
        },false);
        </script>

     

     

     

    #什么是事件对象?在触发DOM上的事件时都会产生一个对象
    事件对象EVENT
    ①DOM中的事件对象 属性
    (1)、type属性用于获取事件类型
    (2)、target属性用于获取事件目标
    (3)、stopPropagation()方法 用于阻止事件冒泡
    (4)、preventDefault() 方法 阻止事件的默认行为
    如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡,那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。(由内而外)
    如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡。stopPropagation()方法
    如果需要阻止a标签的默认属性跳转,可以使用阻止事件的默认行为preventDefault()方法

     

  • 相关阅读:
    scrollview嵌套listiview(解决高度问题以及两者滚动冲突问题)
    listview通过onscrollListener实现分页加载
    listview中的checkbox实现全选、反选、删除的功能
    【JavaScript】闭包应用之数据独立
    【JavaScript】闭包应用之数据缓存
    【问题:发现与解决】angularJs指令在dijit控件中的使用
    【转发】:CSS代码重构与优化之路
    写一个简易的富文本
    【html/css】若母div设置了透明度,如何才能使得里面的子div不继承母div的透明度
    【html/css】模态框的实现
  • 原文地址:https://www.cnblogs.com/yinzf/p/5326637.html
Copyright © 2011-2022 走看看