事件详解D - 默认行为及DOM2事件

浏览器的默认行为
JavaScript事件本身所具有的属性,例如
a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等。
阻止默认行为的方式:
event.preventDefault();
event.returnValue = false;
return false;
我们来看一下阻止方法:
原本的代码是这样的
由于点击一次,页面就会刷新一次
刷新速度太快导致我们看不到控制台输出的效果:
点击页面中的超链接并没有什么效果
如果我们想要看到控制台输出的语句,就需要用到上面那三个阻止默认行为方式的方法:
第一种方法:event.preventDefault();
运行结果如下:
第二种方法:event.returnValue = false;
运行结果如下:
第三种方法:return false;
运行结果如下:
这三种方法同样都是点击几次就显示几次信息
直接写document.是给页面加事件
例如我们这有个form标签,我们来去除一下一些默认的行为
运行效果如下:
1.点击提交按钮不会提交,会在控制台输出信息
2.点击文本框无法输入键盘上的任意键(但是打汉字可以)
3.右击鼠标页面中任意空白处都不会出现菜单
DOM2级事件
DOM2级事件处理程序:
添加事件监听器:addEventListener(事件名,处理函数,布尔值)
移除事件监听器:removeEventListener(事件名,处理函数)
IE下的事件监听器:
添加:attachEvent(事件名,处理函数);、
移除:detachEvent(事件名,处理函数)
举个小例子来看一下:
运行结果,当我们点击红色的div时,同时出现foo和bar的值:
这和之前我们说的普通事件有所区别,普通事件只会显示最下面定义的函数
举个小例子:
运行结果如下,只会显示下面的bar函数的值:
上面就是普通事件和DOM2级事件显示的区别!!!
移除效果时也有区别:
在普通事件中,移除只需要让outer.onclick = null即可
运行结果再点击红色div时无任何效果:
在DOM2事件中,移除需要removeEventListener:
运行效果如下,当我们点击时只会显示bar没有移除的:
如果都移除,可以再写一条移除语句即可
以上就是DOM2和普通事件的添加和移除效果!!!!!
添加时普通事件只能显示最下面的;DOM只要定义的都可以显示
移除时普通事件为null即可;DOM2需要removeEventListener
我们再来看一下DOM2中的第三个布尔值参数
当我们把它改为true时,和false的效果区别:
当为false时,点击蓝色区域,显示顺序从上自下
最特定的到最不特定的
当改为true时,显示效果正好相反,从下自上
即最不特定的到最特定的
对于版本8以下的IE,我们要用:
attachEvent(事件名,处理函数);  来添加事件
detachEvent(事件名,处理函数);  来移除事件
添加的写法:
移除的写法:
此时点击就没有任何效果
依旧是封装函数
封装函数时必须要进行判断浏览器的兼容性:
点击红色div时会显示定义的foo中的数值
第一个参数:要传的对象outer
第二个参数:添加的事件click
第三个参数:定义执行的函数foo
再来测试一下移除DOM2事件的函数:
此时再点击就没有任何输出效果
- 写作不易,大家多多关注,谢谢啦-
---web分享,分享的不只是web
(0)

相关推荐

  • java事件监听器怎么绑定,Java学习笔记(二)事件监听器

    Java实现对组件事件(如单击.输入等)的监听和JavaScript类似,都是先添加Listener,再写触发函数,不同的是,Java实现监听前必须使用implements将各个接口添加到类内. 相关 ...

  • js

    js

  • 事件监听器中this指代问题

    我们都知道,事件监听器中的this指代当前元素,换句话说,谁'点'的,就指谁:单一情况好理解,但是,当遇到原型链中的this时,我们有时候就会反应不过来. 今天写百度前端技术学院的题时,就遇到了这样一 ...

  • 风光摄影后期实录(5)详解:Lightroom默认设置 晨景气氛营造

    风光摄影后期实录(5)详解:Lightroom默认设置 晨景气氛营造

  • 从历史事件详解周易六十四卦的“卦象”!

    这几年西方的占星术在我们国内很热门,甚至一度超过我们祖祖辈辈最亲近的"四柱八字"和"周易预测". 其实我们中国传统的预测学要比占星术厉害很多,只是国人不懂而已. ...

  • 荣誉的叛国者——德国“720事件”详解(上)

    1944年7月20日,施陶芬贝格上校刺杀希特勒,是被人所周知的15次刺杀希特勒的行动中最为知名的一次.但是,因为德国民众的哲学基因以及二战后两个德国的意识形态的宣传,对"720事件" ...

  • 荣誉的叛国者——德国“720事件”详解(中)

    瓦尔基里 实际上,在1944年7月20日以前,低级国防军将领一共组织了6次刺杀希特勒的行动,前文的"闪电行动"即是其中之一.但是种种刺杀行动要不是因为执行者临时胆怯,要不是由于希特 ...

  • 荣誉的叛国者——德国“720事件”详解(下)

    荣誉的叛国者--德国"720事件"详解(上) 荣誉的叛国者--德国"720事件"详解(中) 事件的后续 炸弹爆炸时,施陶芬贝格上校和费尔吉贝尔将军在后者的办公室 ...

  • 事件详解C - 键盘事件及事件流

      键盘事件  格式:document.键盘事件 1.onkeypress;  按下字符键触发 2.onkeydown;  按下任意键触发 先来看onkeypress和onkeydown: 运行结果如 ...

  • JavaScript事件详解A(兼容性)

      课程大纲  1.事件基础 2.事件处理函数( console.log ); 3.事件对象 4.事件默认行为及阻止方式 5.DOM2级时间处理 6.事件委托机制 我们依次来学习   事件基础  Ja ...

  • JavaScript事件详解B - 坐标

      事件对象常用的属性  当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息.包括导致事件的元素.事件的类型.以及其它与特定事件相关的信息. 通过事件绑定的执行函数是可以得到一个 ...

  • JS-JavaScript事件详解

    JS运行和编译 语法分析 查找基本语法有没有错误 预解析 执行之前进行预解析 var.function关键字提前到当前作用域的顶部,变量默认值为undefined,函数默认值为函数体代码块,当函数与变 ...