zoukankan      html  css  js  c++  java
  • js事件

    事件流:事件在DOM结构中传播的过程;
    事件冒泡:事件从最开始的具体元素到最外层的document出啊脉搏的过程;
    事件捕获:不太具体的节点应该最先接收到消息,一直传播到最里层的节点;

    事件处理程序的方式:
    1.<input type="button" value="button1" id="button1" onclick="alert("Hello World!");" />
    2.<script>
    var btn = document.getElementById("button1");
    btn.onclick = function(){alert("Hello World!");}
    btn.onclick = null;
    </script>
    3.var btn = document.getElementById("button1");
    btn.addEventListner("click",function(){alert("Hello World!");},false);
    btn.removeEventListner("click",function(){alert("Hello World!");},false);

    4.ie事件处理程序函数:
    btn.attach("onclick",function_name);//注意这里又变成了onclick
    btn.detach("onclick",funciton_name);//而且只有两个参数

    5.那怎么样兼容浏览器呢?
    跨浏览器的时间处理程序:
    将不同事件处理程序放在if else判断语句中,再将它们放在一个对象中,进行调用;

    var eventHandler{
    addHandler:function(element_name,event_name,function_name){
    if(element_name.addEventHandler){
    element_name.addEventHandler(event_name,function_name,false);
    }else if(element_name.attach){
    element_name.attach("on"+evemt_name,function_name);
    }else{
    element_name["on"+event_name] = function_name;
    }
    }
    removeHandler:function(element_name,event_name,function_name){
    if(element_name.removeEventHandler){
    element_name.addEventHandler(event_name,function_name,false);
    }else if(element_name.attach){
    element_name.detach("on"+evemt_name,function_name);
    }else{
    element_name["on"+event_name] = null;//js中所有的"."都可以替代成"[]";
    }
    }
    }
    //调用对象的两个方法;
    eventHandler.addHandler(btn,"click",showMessage);
    eventHandler.removeHandler(btn,"click",showMessage);


    6.DOM中的事件对象event;
    function showMessage(event){
    alert(event.type);//获取事件类型;
    alert(event.target.nodeName);//获取事件发出点;
    event.stopPropagation();//阻止事件冒泡,不在父级元素相应事件;
    }
    还有一个比较重要的event对象的方法就是preventDefault();它组织事件的默认行为;
    例:<a id="go" ref="http://www.baidu.com/">Go</a>
    <script>
    var my_go = document.getElementById("go");
    my_go.onclick = function(event){event.preventDefault();}//再点击就不会跳转了
    </script>

    6.而在IE事件处理对象中,event=window.event;//event的获取方式不一样;
    event.type;//type获取方式一样;
    event.srcElement;//target获取方式不同;
    event.cancelBubble = true;//组织冒泡;
    event.returnValue = false;//组织默认方法;

  • 相关阅读:
    stenciljs 学习四 组件装饰器
    stenciljs 学习三 组件生命周期
    stenciljs 学习二 pwa 简单应用开发
    stenciljs ionic 团队开发的方便web 组件框架
    stenciljs 学习一 web 组件开发
    使用npm init快速创建web 应用
    adnanh webhook 框架 hook rule
    adnanh webhook 框架 hook 定义
    adnanh webhook 框架request values 说明
    adnanh webhook 框架execute-command 以及参数传递处理
  • 原文地址:https://www.cnblogs.com/zengneng/p/5540683.html
Copyright © 2011-2022 走看看