zoukankan      html  css  js  c++  java
  • 关于JavaScript的事件处理一些知识

    《JS事件处理》
    Event对象详细信息:http://www.w3school.com.cn/jsref/dom_obj_event.asp
    JS原生支持3中绑定事件方式:
    1.以标签属性形式
    <div onclick="clicked(event)"></div>
    本质上这种方式是直接执行引号当中的JS语句。
    2.以DOMObject对象属性赋值方式
    var div=document.getElementById("div");
    div.onclick=function(e){...};
    3.以事件侦听器方式:
    div.addEventListener("click",function(e){...},bool);
    默认false,代表冒泡。
    一个完整的浏览器事件流:
    window->document->html->body->bigDiv->div->[p]->div->bigDiv->...->window
    注意,从window到p,再从p到window,中间目标元素p会触发两次。比如,给p加上true和false两个事件侦听器,那么点击p标签,console先后输出true的event和false的event。
    标准的Event属性:
    1.bubbles         返回布尔值,如果事件是起泡类型为true,否则为fasle(其值就是addEventListener时的第三个参数值)
    2.cancelable      返回布尔值,如果preventDefault方法可以取消与事件关联的默认动作,则为true,否则为fasle
    3.currentTarget   返回事件传播到的这个元素
    4.eventPhase      返回事件传播的当前阶段,它的值是下面的三个常量之一(Event.CAPTURING_PHASE == 1,Event.AT_TARGET == 2,Event.BUBBLING_PHASE == 3),分别表示捕获、目标和起泡阶段
    5.target          返回发生事件的元素
    6.timeStamp       返回一个从网页被打开到触发该事件的毫秒数
    7.type            返回这个事件的事件类型
    误区解释:
    target & currentTarget傻傻分不清?看下面例子就懂了:
    <div id="one">
       <div id="three"></div>
    </div>
    one.addEventListener("click",function(e){
       console.log(e.target);         //three
       console.log(e.currentTarget);  //one
    },false);
    注释:点击three,在冒泡阶段,从three开始向window传播时经过了one,即传播到了one这个元素,one绑定了click事件,这时触发对应的事件处理函数,然后先后输出three和one。另外,这事件处理函数中,关键词this等价于currentTarget。
    标准的Event方法:
    preventDefault()           通知浏览器不要执行与事件关联的默认动作(如果该元素的e.cancelable==false,说明不存在默认动作或无法阻止该元素的默认动作,只要cancelable为假,该方法不起作用)
    stopPropagation()          不再派发事件(可以在捕获、目标、冒泡各阶段使用来停止事件传播)
    stopImmediatePropagation() 不再派发事件(可以在捕获、目标、冒泡各阶段使用来停止事件传播)
    误区解释:
    stopPropagation() & stopImmediatePropagation()傻傻分不清?看下面例子就懂了:
    <div id = "div1">
        <button id = "button1"></button>
    </div>
    var div = document.getElementById("div1");
    var btn = document.getElementById("button1");
    div.addEventListener("click" ,function(){alert("第一次执行");} ,true);//1
    div.addEventListener("click" ,function(){alert("第二次执行");} ,true);//2
    btn.addEventListener("click" ,function(){alert("button 执行");});  
    这两者区别仅仅发生在对一个元素的一个阶段(冒泡或捕获)绑定了多个事件处理函数时(多个事件处理函数顺序按照定义时的顺序),如上面,如果在//1这行的alert后加上stopImmediatePropagation()那么只会弹出一个对话框“第一次自行”,但是如果换成stopPropagation()会弹出“第一次执行”和“第二次执行”。
    简单的说下return false:(极其不赞成使用,现在return false只会阻止默认行为,不会停止事件传播)
    1.使用事件侦听器注册的事件处理函数里面使用该语句无任何效果,不能阻止默认行为
    2.使用DOMObj=onclick=function(e){...}注册的事件处理函数,该语句能阻止默认行为
    3.在标签里面使用onclick="fun(event)",然后fun函数里面写了该语句,无法阻止默认行为
    4.在标签里面使用onclick="return fun(event)",然后fun函数里面写了该语句,能阻止默认行为
    5.在标签里面使用onclick="return false",能阻止默认行为
    也就是说,使用return false阻止默认行为只有两种情况:
    1,在标签属性里面写return false,这就是上述4和5的情况
    2,在DOMObj的事件处理函数里面写return false,这就是上述2的情况
  • 相关阅读:
    20201224-3
    20201224-3 列表的使用1
    20201224 字符串常用操作
    20201224-1
    20201223-1 俄罗斯方块
    3月27日:毕业设计计划
    3月26日:毕业设计计划
    3月25日:毕业设计计划
    3月24日:毕业设计计划
    3月23日:毕业设计计划
  • 原文地址:https://www.cnblogs.com/ryzz/p/8361836.html
Copyright © 2011-2022 走看看