网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 JavaScript DOM事件
内容
    第1章 事件流
    1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;
    然后逐级向上传播至最不具体的那个节点(文档);
    1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;
    第2章 事件处理程序
    2-1 HTML事件处理程序
    //缺点:HTML和JS代码紧密的耦合在一起;
    1
    <input type="button" value="按钮" onclick="showMessage()">
    2-2 DOM0级事件处理程序
    //较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;
    //优点:简单/跨浏览器;
    <input type="button" value="按钮" id="btn2">
    <script>
    var btn2 = document.getElementById('btn2'); //取得btn2按钮对象;
    btn2.onclick = function () { //给btn2添加onclick属性;
    alert('这是通过DOM0级添加的事件!');
    }
    btn2.onclick=null; //删除onclick属性;
    </script>
    2-3 DOM2级事件处理程序
    //DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;
    //addEventListener()和removeEventListner();
    //接收三个参数:要处理的事件名/事件处理函数和布尔值;
    //在IE8一下,不起作用;
    <input type="button" value="按钮" id="btn3">
    <script>
    var btn3 = document.getElementById('btn3');
    btn3.addEventListener('click',showMessage,false); //添加事件程序;
    btn3.addEventListener('click',function(){ //添加多个事件程序;
    alert(this.value);
    },false);
    btn3.removeEventListener('click',showMessage,false); //删除事件程序;
    </script>
    2-4 IE事件处理程序及跨浏览器
    //接收两个参数:事件处理函数名称和事件处理函数
    <script>
    var btn3 = document.getElementById('btn3');
    btn3.attachEvent('onclick',showMessage); //添加事件;
    btn3.detachEvent('onclick',showMessage); //删除事件;
    </script>
    >2.浏览器兼容
    //将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
    var eventUtil = {
    //添加句柄
    addHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.addEventListener){
    element.addEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.attachEvent){
    element.attachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
    element['on'+type] = handler;
    }
    };
    //删除句柄
    removeHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.removeEventListener){
    element.removeEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.detachEvent){
    element.detachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
    element['on'+type] = null;
    };
    };
    };
    //跨浏览器添加事件处理程序;
    eventUtil.addHandler(btn3,'click',showMessage);
    第3章 事件对象
    3-1 DOM中的事件对象
    //在触发DOM上的事件时都会产生一个对象==event;
    >1.type == 获取事件类型;
    >2.target == 获取事件目标;
    >3.stopPropagation() == 停止事件冒泡;
    >4.preventDefault() == 阻止事件的默认行为;
    function showMes(event){
    alert(event.type); //onclick;点击事件;
    alert(event.target.nodeName); 　　//INPUT;input按钮被触发;
    event.stopPropagation(); //停止事件冒泡;
    }
    <a href="event.html" onclick="stopGoto();">跳转</a>
    function stopGoto(event){
    event.preventDefault();　　　　　　　//阻止默认行为;
    }
    3-2 IE中的事件对象
    >1.type == 同上;
    >2.srcElement属性 == 获取事件目标;
    >3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;
    >4.returnValue属性 == 用于阻止事件的默认行为;
    function showMes(event){
    //非IE用event,IE8以下用window.event;
    event = event || window.event;
    //事件目标兼容;
    var ele = event.target || event.srcElement;
    //兼容阻止事件冒泡;
    if(event.stopPropagation){
    event.stopPropagation();
    }else{
    event.cancleBubble();
    };
    //兼容取消事件默认行为;
    if(event.preventDefault){
    event.preventDefault();
    }else{
    event.returnValue = false;
    }
    }
    第4章 QQ面板拖拽效果
    >1.封装获取Class方法
    function getClass(clsName,parent){
    var oParent = parent?document.getElementById(parent):document,
    eles = [],
    elements = oParent.getElementsByTagName('*');
    for (var i=0,l=elements.length; i<l; i++){
    if(elements[i].className == clsName){
    eles.push(elements[i]);
    }
    }
    return eles;
    }
    >2.封装拖拽函数
    window.onload = drag;
    function drag(){
    var oTitle = getClass('login_logo_webqq','loginPanel')[0];
    //拖拽
    oTitle.onmousedown = fnDown;
    //关闭弹窗
    var oClose = document.getElementById('ui_boxyClose');
    oClose.onclick = function(){
    document.getElementById('loginPanel').style.display = 'none';
    }
    //切换状态
    var loginState = document.getElementById('loginstate'),
    stateList = document.getElementById('loginStatePanel'),
    lis = stateList.getElementsByTagName('li'),
    stateTxt = document.getElementById('login2qq_state_txt'),
    loginStateShow = document.getElementById('login-state_show');
    loginState.onclick = function(e){
    //阻止冒泡到document使ul隐藏;
    e = e || window.event;
    if(e.stopPropagation){
    e.stopPropagation();
    }esle{
    e.cancleBubble = true;
    }
    stateList.style.display = "block";
    }
    //鼠标滑过/离开和点击状态列表时
    for(var i=0,i<lis.length,i++){
    lis[i].onmouseover = function(){
    this.style.background = "#567";
    }
    lis[i].onmouseout = function(){
    this.style.background = "#fff";
    }
    lis[i].onclick = function(e){
    //阻止冒泡到loginState使stateList显示;
    e = e || window.event;
    if(e.stopPropagation){
    e.stopPropagation();
    }esle{
    e.cancleBubble = true;
    }
    var id = this.id;
    stateList.style.display = "none";
    stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML;
    loginStateShow.className = '';
    loginStateShow.className = 'login-state-show '+id;
    }
    }
    document.onclick = function(){
    stateList.style.display = "none";
    }
    }
    //鼠标按下事件;
    function fnDown(event){
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel'),
    //鼠标按下时,鼠标和面板之间的距离;
    disX = event.clientX - oDrag.offsetLeft,
    disY = event.clientY - oDrag.offsetTop;
    //移动
    document.onmouseover = function(event){
    event = event || window.event;
    fnMove(event,disX,disY);
    }
    //释放鼠标
    document.onmouseup = function(){
    document.onmouseover = null;
    document.onmouseup = null;
    }
    }
    //鼠标移动事件;
    function fnMove (e,posX,posY){
    var oDrag = document.getElementById('loginPanel'),
    l = e.clientX-posX,
    t = e.clientY-posY,
    winW = document.documentElement.clientWidth || document.body.clientWidth,
    winH = document.documentElement.clientHeight || document.body.clientHeight;
    maxW = winW-oDrag.offsetWidth,
    maxH = winH-oDrag.offsetHeight;
    if(l<0){
    l = 0;
    }else if(l>maxW){
    l = maxW;
    }
    if(t<0){
    t = 0;
    }else if(t>maxH){
    t=maxH;
    }
    oDrag.style.left = l+'px';
    oDrag.style.top = t+'px';
    }
    第4章 抽奖系统
    >1.键盘事件
    >>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;
    >>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;
    >>3.keyUp:当用户释放键盘上的键时触发;
    >2.抽奖程序
    var data = ['iPhone5','iPad','三星电脑','谢谢参与'],
    timer = null,
    flag = 0;
    window.onload = function(){
    var play = document.getElementById('play'),
    stop = document.getElementById('stop');
    //(鼠标)开始抽奖
    play.onclick = palyFun;
    stop.onclick = stopFun;
    //(键盘Enter)开始抽奖
    document.onkeyup = function(event){
    event = event || window.event;
    if(event.keyCode == 13){
    if(flag == 0){
    palyFun();
    flag = 1;
    }else{
    stopFun();
    flag = 0;
    }
    }
    }
    }
    function palyFun(){
    var title = document.getElementById('title'),
    play = document.getElementById('play');
    //清除之前的定时器,放置定时器重复;
    clearInterval(timer);
    　//设置定时器;
    timer = setInterval(function(){
    //随机数*数组元素个数=数组随机索引;
    var random = Math.floor(Math.random()*data.length);
    title.innerHTML = data[random];
    },50);
    play.style.background = "#999";
    }
    function stopFun(){
    clearInterval(timer);
    var paly = document.getElementById('play');
    paly.style.background = '#036';
    }
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 2:14:20