为了账号安全,请及时绑定邮箱和手机立即绑定
  • 事件冒泡讲解得非常到位,清淅!老师讲课质量真好,继续关注!
    查看全部
  • 事件封装在对象中,功能封装在方法中。 单独存成文件 做Util工具 在IE中: 几乎都是属性存在的 1) event || window.event (IE 8以前) 2) srcElement属性: 用于获取目标 event.target || event.srcElement 3) cancleBubble属性: 用于阻止事件冒泡 4) returnValue属性: 用于阻止事件的默认行为 false表示阻止事件的默认行为
    查看全部
  • 跨浏览器的事件处理程序

    var eventUtil={
        //添加句柄
        addHandler:function(element,type,handler//){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent//('on'+type,handler);
            }else{
                element['on'+type]=handler;//DOM0级事件处理程序判断
            }
        },
        //删除句柄
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent//('on'+type,handler);
            }else{
                element['on'+type]=null;//DOM0级事件处理程序判断
            }
        }
    }
    eventUtil.addHandler(btn3,'click',showMes);
    eventUtil.removeHandler(btn3,'click',showMes);


    查看全部
  • 跨浏览器解决——》添加句柄:

    这里为什么添加句柄?

    句柄一般什么时候使用

    句柄是什么?

    句柄的格式一般如何?

    调用的格式?

    查看全部
  • 1、任何能够跟着鼠标移动的东西 都要有一个前提:绝对定位
    2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。
    3、js ie10以下版本不支持document.getElementsByClassName
    4、js封装getClass方法,获取class
    5、实现随鼠标拖动,需要让窗口的坐标随着鼠标移动,鼠标的坐标保存在时间的clientX和clientY两个属性中。
    6、onmousedown鼠标按下 窗口和鼠标的位置同步;
    element.style.left/top=clientX/Y+'px';
    onmousemove当鼠标指针在元素内部移动时重复地触发

    2.在指定区域(整个QQ面板)按下——页面随光标移动,即页面的坐标与光标坐标一致——释放鼠标是停止移动

    3.clientX与clentY能够获取鼠标的光标位置;onmousedown鼠标按下事件;移动要用到onmousemove事件,当鼠标指针在元素内部移动时重复的触发;clientX与clentY是event这个对象的属性,非ie用event,ie用window.event


    查看全部
  • IE中的事件对象

    (非IE的事件对象用event,IE8之前用window.event)

    IE中的事件对象
    1.type属性 用于获取事件类型
    2.srcElement属性 用于获取事件目标
    IE和其它浏览器兼容:
    event = event||window.event  (IE8之前的浏览器用window.event)
    var  ele = event.target  ||event.srcElement
    3.ancelBubble属性 用于阻止事件冒泡。
    true表示阻止冒泡,false表示不阻止冒泡。
    4.returnValue属性   用于阻止事件的默认行为。

     注意:判断不要判断方法,判断属性。例如:if(event.propagation)设置false为阻止事件的默认行为。(ie中基本都是属性,没有方法)


    查看全部
  • DOM2级事件处理程序

    DOM2级事件处理程序

    一、定义了两个方法:
    addEventListener()添加事件
    removeEventListener()移除事件
    btn3.addEventListener('click',showMes,false);
    三个参数设置:事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true)

    二、注意:
    1.事件名称全都不加on了,onclickclick——事件名称要加引号“”
    2.处理方法中的函数只写函数名,不加括号——不加括号才是函数,加了括号是运行函数
    3.false 兼容所有浏览器-----事件冒泡流——布尔值是不需要加引号“”的
    4.通过addEventListener添加的事件只能通过removeEventListener来删除——参数要一样
    btn.removeEventListener(参数);//参数必须和btn.addEventListener的一致,删除事件

    三、其他
    dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。
    btn3.addEventListener('click',showMes,false);
    btn3.addEventListener('click',showMes,function(){alert(this.value);},false);
    //不可以这样添加两个函数,怀疑其本意为:
    //Btn3.addEventListener('click',showmessage1/function(){alert("这是匿名函数")},false);  

    四、缺点:IE不支持该事件


    查看全部
  • DOM0级事件处理程序 (用得比较多):先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。
    它是一种较传统的方式:把一个函数赋值给一个事件处理程序的属性。
    优点:简单,跨浏览器的优势
    var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象
    btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性

    查看全部
  • HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中
    缺点:HTML和js代码高耦合,如果修改,就要修改两个地方--HTML元素内和script函数。

    查看全部
  • DOM2级事件处理程序

    DOM2级事件处理程序 一、定义了两个方法: addEventListener()添加事件 removeEventListener()移除事件 btn3.addEventListener('click',showMes,false); 三个参数设置:事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true) 二、注意: 1.事件名称全都不加on了,onclick→click——事件名称要加引号“” 2.处理方法中的函数只写函数名,不加括号——不加括号才是函数,加了括号是运行函数 3.false 兼容所有浏览器-----事件冒泡流——布尔值是不需要加引号“”的 4.通过addEventListener添加的事件只能通过removeEventListener来删除——参数要一样 btn.removeEventListener(参数);//参数必须和btn.addEventListener的一致,删除事件 三、其他 dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。 btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value);},false); //不可以这样添加两个函数,怀疑其本意为: //Btn3.addEventListener('click',showmessage1/function(){alert("这是匿名函数")},false);   四、缺点:IE不支持该事件

    查看全部
  • 1.DOM2级事件处理程序: DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventLisener()(添加事件监听程序)和removeEventListner()。 输入参数:要处理的事件名(如'click'事件(去掉'on'))、作为事件处理程序的函数、布尔值(false--冒泡阶段--最大限度兼容个浏览器)。 2."this"--引用被触发的元素。 3.IE8不支持该DOM2事件处理程序。
    查看全部
  • DOM0级事件处理程序 (用得比较多),先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。 较传统的方式:把一个函数赋值给一个事件处理程序的属性。 优点:简单,跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性 btn2.onclick=null;-----删除onclick属性,即卸载事件
    查看全部
  • 事件处理程序: 1,HTML事件处理程序; 2,DOM0级事件处理程序; 3,DOM2级事件处理程序;(定义了两个方法:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接受三个参数:要处理的事件名、作为事件处理程序的函数、布尔值) 4,IE事件处理程序;(attachEvent()添加事件,DetachEvent()删除事件。他们接受相同的两个参数:事件处理程序的名称和事件处理程序的函数) 5,跨浏览器的事件处理程序;
    查看全部
  • 坚持做到没漏洞
    查看全部
    2 采集 收起 来源:编程挑战

    2017-03-03

  • 拖拽->鼠标跟随 1、绑定鼠标点击事件 2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性) 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽) 4、将拖拽元素设置成绝对定位 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法) 6、设置left、top限定,禁止元素拖出窗口 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth 8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴
    查看全部

举报

0/150
提交
取消
课程须知
1.你一定对HTML+CSS比较熟悉; 2.掌握一定的JS基础知识,尤其是函数封装、调用等知识。
老师告诉你能学到什么?
DOM事件具体相关知识,DOM事件的使用方法及应用!

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!