• 事件2


    一.事件机制
    2.事件绑定
    6)addEventListener的第三个参数
    false:冒泡;
    true:捕获;
    IE的attachEvent没有第三个参数,所以就不说了

    冒泡:从最内层标签开始执行事件,逐层向外,直到执行到document的事件
    捕获:一个事件从document开始执行,逐层向内层标签执行,最后执行事件触发的标签

    注意:必须是相同的事件;
    案例:(01.冒泡.html);
    结构
    <body>
    <div id="box">
    <p>我是</p>
    </div>
    <body>
    js:点击段落,依次弹出提示框如下:
    (我是p的绑定事件)
    (我是div的绑定事件)
    (我是body的绑定事件)
    (我是document的点击事件)
    案例:(02.捕获.html)
    结构
    <body>
    <div id="box">
    <p>我是</p>
    </div>
    <body>
    js:点击段落,依次弹出提示框如下:
    (我是document的点击事件)
    (我是body的绑定事件)
    (我是div的绑定事件)
    (我是p的绑定事件)
    7)阻止冒泡
    标准浏览器阻止冒泡
    事件对象.stopPropagaton();
    Propagaton:传送、传播
    事件对象:当出发时间是会自动创建一个事件对象,通过实践对象可以访问很多信息,比如获取事件源、鼠标/页面的坐标等等。
    如:
    p.addEventListener('click',function(event)){

    },false;
    参数event就是事件对象
    IE低版本浏览器阻止冒泡
    获取事件对象
    var e =window.event;
    e.cancelBubble = true;
    封装阻止冒泡的兼容函数
    function stopBubble(evt){
    //evt被识别就是标准浏览器,就会返回evt给event变量,如果evt不能识别就是IE低版本浏览器,就会吧window.event给event变量
    var event = evt || window.event;
    if(event.stopPropagation){
    event.stopPropagation();
    }else{
    event.cancelBubble = true;
    }
    }

    p.addEventListener('click',
    function(event){
    alert('我是p的绑定事件');
    stopBubble(event);
    },false);
    案例:(03.阻止冒泡.html)
    阻止01案例的冒泡行为
    1)只实现标准浏览器的
    2)只实现低版本的
    3)实现浏览器兼容的。
    二.事件对象event
    任何事件在触发的时候,在事件处理函数中会自动生成一个事件对象event,这个event对象包含了所有与事件相关的信息,
    比如:事件源是谁,事件是什么,鼠标的位置,键盘按键是谁等等信息。

    event事件对象的获取:
    1.标准浏览器:它是事件处理函数中的形式参数(名称不定),例如:e
    2.IE低版本浏览器:window的一个event属性,格式固定,window.event。
    div.onclick = function(evt){
    // 兼容
    var event = evt ||window.event;
    console.log(event);
    }
    案例:(04.事件对象.html)
    单击body,在控制台输出事件对象
    1)标准浏览器输出
    2)IE低版本浏览器输出
    单击document,再控制台输出事件对象
    3)兼容的写法

    使用event对象获取事件源
    event.target || event.srcElement
    IE下,event对象有srcElement属性,但是没有target属性FireFox下,event对象有target属性,但是没有srcElement属性
    Chrome下,event对象有target属性,也有srcElement属性。这两个都能得到事件源。

    案例:(05.event对象获取事件源.html)
    结构:
    <div id="box">点击</div>
    <input type="button" value="btn" id="btn">
    js:
    1)单击div,控制台输出事件对象及三个事件源对象
    2)单击按键,控制台输出事件对象及四个事件源对象
    要求:事情对象及事件源的获取需要实现浏览器兼容性

    使用event阻止浏览器的默认行为
    超链接,在单击的时候,打开新页面是默认事件
    表单,有提交数据到服务器的默认事件
    有时候,我们需要阻止默认事件
    1.DOM0
    在事件处理函数的最后或者当满足一定条件的时候,加return false了;就会阻止默认事件
    2标准浏览器
    通过实践对象的preventDefault()
    方式阻止默认事件
    事件对象.preventDefault();
    3.IE低版本浏览器
    通过设置事件对象returnValue属性值来阻止默认事件
    事件对象.returnValue = false;
    兼容写法:
    封装阻止默认事件的兼容函数
    function prevent(evt){
    var event = evt || window.event;
    if(event.preventDefault){//标准浏览器
    event.preventDefault();
    }else if(event.returnValue){//IE低版本
    event.returnValue = false;
    }else{//以上浏览器皆不是
    return false;
    }
    }


    案例:(06.阻止默认事件.html)
    结构:
    超链接
    输入框 提交按钮
    js:
    1)阻止超链接、表单提交、右键的默认事件
    2)实现浏览器的兼容

  • 相关阅读:
    20145203盖泽双 《Java程序设计》第6周学习总结
    20145203盖泽双实验一 Java开发环境的熟悉(Linux + Eclipse)
    20145203盖泽双 《Java程序设计》第五周学习总结
    20145203盖泽双 《Java程序设计》第四周学习总结
    20145203盖泽双《Java程序设计》第三周学习总结
    ## 20145203盖泽双 《Java程序设计》第二周学习总结
    总结同学们第一周作业出现的问题
    DOS命令行简单用法
    20145203 盖泽双《Java程序设计》第一周的学习总结
    20145216史婧瑶《Java程序设计》第二次实验报告
  • 原文地址:https://www.cnblogs.com/yangjingyang/p/10210465.html
Copyright © 2020-2023  润新知