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的情况
  • 相关阅读:
    hdu2328 Corporate Identity
    hdu1238 Substrings
    hdu4300 Clairewd’s message
    hdu3336 Count the string
    hdu2597 Simpsons’ Hidden Talents
    poj3080 Blue Jeans
    poj2752 Seek the Name, Seek the Fame
    poj2406 Power Strings
    hust1010 The Minimum Length
    hdu1358 Period
  • 原文地址:https://www.cnblogs.com/ryzz/p/8361836.html
Copyright © 2011-2022 走看看